/* BiuroFlow admin/portal shared styling
 * Mirrors design tokens with desktop Flutter app (lib/core/theme/).
 * Both Daniel's products share the same visual language: dark forest +
 * glass-morphism + Space Grotesk + JetBrains Mono.
 */

/* ============================================================
   Design tokens — single source of truth
   Mirrors BfSpacing/BfRadii/BfColors from lib/core/theme/
   ============================================================ */
:root {
  /* Spacing scale */
  --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;

  /* Radii */
  --bf-radius-sm: 4px;
  --bf-radius-md: 8px;
  --bf-radius-lg: 12px;
  --bf-radius-xl: 16px;
  --bf-radius-full: 9999px;

  /* Forest base (dark) — mirrors lib/core/theme/colors.dart
     gradientStartDark / darkScheme.surface so web and desktop share the
     same canvas. */
  --bf-bg-base: #0D1412;
  --bf-bg-base-soft: #0D1412;
  --bf-bg-base-elevated: #162822;  /* desktop darkScheme.surfaceContainer */
  --bf-bg-surface: rgba(255, 255, 255, 0.04);
  --bf-bg-surface-hover: rgba(255, 255, 255, 0.07);
  --bf-bg-surface-alt: rgba(255, 255, 255, 0.06);
  --bf-bg-surface-strong: rgba(255, 255, 255, 0.10);

  /* Borders */
  --bf-border-subtle: rgba(255, 255, 255, 0.08);
  --bf-border-medium: rgba(255, 255, 255, 0.12);
  --bf-border-strong: rgba(255, 255, 255, 0.18);

  /* Brand */
  --bf-blue: #4DA3FF;
  --bf-blue-soft: rgba(77, 163, 255, 0.15);
  --bf-blue-deep: #1E3A8A;
  --bf-amber: #F4B248;
  --bf-amber-soft: rgba(244, 178, 72, 0.15);

  /* Semantic */
  --bf-success: #3FB97A;
  --bf-success-soft: rgba(63, 185, 122, 0.15);
  --bf-warning: #F59E0B;
  --bf-warning-soft: rgba(245, 158, 11, 0.15);
  --bf-error: #E87366;
  --bf-error-soft: rgba(232, 115, 102, 0.15);
  --bf-info: #4DA3FF;
  --bf-info-soft: rgba(77, 163, 255, 0.15);

  /* Text */
  --bf-text-primary: #F1F5F9;
  --bf-text-secondary: #94A3B8;
  --bf-text-tertiary: #64748B;
  --bf-text-disabled: #475569;
  --bf-text-on-accent: #0A1210;

  /* Shadows (blue-tinted to match accent) */
  --bf-shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.35);
  --bf-shadow-md: 0 6px 16px -6px rgba(77, 163, 255, 0.10);
  --bf-shadow-lg: 0 12px 32px -10px rgba(77, 163, 255, 0.18);

  /* Motion */
  --bf-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --bf-duration-fast: 120ms;
  --bf-duration-base: 200ms;
  --bf-duration-slow: 320ms;

  /* Density (overridable via JS toggle) */
  --bf-density-pad: var(--bf-space-xl);
  --bf-density-card-pad: var(--bf-space-xl);
  --bf-density-row-pad: var(--bf-space-md) var(--bf-space-lg);

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

[data-density="compact"] {
  --bf-density-pad: var(--bf-space-md);
  --bf-density-card-pad: var(--bf-space-md);
  --bf-density-row-pad: var(--bf-space-xs) var(--bf-space-md);
}

[data-density="spacious"] {
  --bf-density-pad: var(--bf-space-2xl);
  --bf-density-card-pad: var(--bf-space-2xl);
  --bf-density-row-pad: var(--bf-space-lg) var(--bf-space-xl);
}

/* ============================================================
   Base typography & body
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background-color: var(--bf-bg-base-soft);
  background-image: radial-gradient(ellipse at 30% 20%, #1A2F28 0%, var(--bf-bg-base-soft) 60%, #0F172A 100%);
  background-attachment: fixed;
  color: var(--bf-text-primary);
}

code,
pre,
kbd,
samp,
.font-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

::selection {
  background: var(--bf-blue-soft);
  color: var(--bf-text-primary);
}

/* Skip-to-content link (a11y) */
.bf-skip-link {
  position: absolute;
  top: -40px;
  left: var(--bf-space-lg);
  z-index: var(--bf-z-toast);
  padding: var(--bf-space-sm) var(--bf-space-lg);
  background: var(--bf-blue);
  color: var(--bf-text-on-accent);
  border-radius: var(--bf-radius-md);
  font-weight: 600;
  transition: top var(--bf-duration-base) var(--bf-ease);
}
.bf-skip-link:focus {
  top: var(--bf-space-md);
  outline: 2px solid var(--bf-text-primary);
  outline-offset: 2px;
}

/* 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 (semantic + legacy aliases)
   ============================================================ */
.bf-card,
.glass-card {
  background-color: var(--bf-bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-lg);
}

.bf-card--hover,
.glass-card-hover {
  background-color: var(--bf-bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-lg);
  transition:
    background-color var(--bf-duration-slow) var(--bf-ease),
    border-color var(--bf-duration-slow) var(--bf-ease),
    box-shadow var(--bf-duration-slow) var(--bf-ease),
    transform var(--bf-duration-slow) var(--bf-ease);
}

.bf-card--hover:hover,
.glass-card-hover:hover {
  background-color: var(--bf-bg-surface-hover);
  border-color: var(--bf-border-medium);
  box-shadow: var(--bf-shadow-md);
}

.bf-card--interactive {
  cursor: pointer;
}
.bf-card--interactive:hover {
  transform: translateY(-1px);
}
.bf-card--interactive:active {
  transform: translateY(0);
}

.bf-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bf-space-lg);
  padding: var(--bf-density-card-pad);
  border-bottom: 1px solid var(--bf-border-subtle);
}
.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-border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bf-space-sm);
}

.bf-card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bf-blue);
}

/* ============================================================
   Inputs / forms
   ============================================================ */
.bf-input,
.bf-textarea,
.bf-select,
.bf-file {
  display: block;
  width: 100%;
  padding: var(--bf-space-md) var(--bf-space-lg);
  background-color: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-medium);
  border-radius: var(--bf-radius-md);
  color: var(--bf-text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  transition:
    border-color var(--bf-duration-fast) var(--bf-ease),
    background-color var(--bf-duration-fast) var(--bf-ease),
    box-shadow var(--bf-duration-fast) var(--bf-ease);
}

.bf-input:hover,
.bf-textarea:hover,
.bf-select:hover {
  border-color: var(--bf-border-strong);
  background-color: var(--bf-bg-surface-hover);
}

.bf-input:focus,
.bf-textarea:focus,
.bf-select:focus,
.bf-file:focus {
  outline: none;
  border-color: var(--bf-blue);
  background-color: var(--bf-bg-surface-hover);
  box-shadow: 0 0 0 3px var(--bf-blue-soft);
}

.bf-input::placeholder,
.bf-textarea::placeholder {
  color: var(--bf-text-tertiary);
}

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

.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='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-position: right var(--bf-space-md) center;
  background-repeat: no-repeat;
  background-size: 1.1em;
  padding-right: var(--bf-space-2xl);
}

.bf-file {
  padding: 0;
  background: var(--bf-bg-surface);
}
.bf-file::file-selector-button {
  margin-right: var(--bf-space-md);
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-blue-soft);
  border: 0;
  border-right: 1px solid var(--bf-border-medium);
  color: var(--bf-blue);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-file::file-selector-button:hover {
  background: rgba(77, 163, 255, 0.25);
}

/* Form field wrapper */
.bf-field {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
}
.bf-field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bf-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
}
.bf-field__label--required::after {
  content: "*";
  color: var(--bf-error);
  font-weight: 700;
}
.bf-field__hint {
  font-size: 0.75rem;
  color: var(--bf-text-tertiary);
}
.bf-field__error {
  font-size: 0.75rem;
  color: var(--bf-error);
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
  margin-top: var(--bf-space-xs);
}

/* ============================================================
   Buttons
   ============================================================ */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-sm);
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-radius: var(--bf-radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  text-decoration: 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),
    transform var(--bf-duration-fast) var(--bf-ease),
    box-shadow var(--bf-duration-fast) var(--bf-ease);
  min-height: 40px;
}
.bf-btn:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 2px;
}
.bf-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.bf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bf-btn--primary {
  background: var(--bf-blue);
  color: var(--bf-text-on-accent);
  box-shadow: 0 4px 12px -4px rgba(77, 163, 255, 0.4);
}
.bf-btn--primary:hover:not(:disabled) {
  background: #6BB5FF;
  box-shadow: 0 6px 18px -4px rgba(77, 163, 255, 0.6);
  transform: translateY(-1px);
}

.bf-btn--secondary {
  background: var(--bf-bg-surface-strong);
  color: var(--bf-text-primary);
  border-color: var(--bf-border-medium);
}
.bf-btn--secondary:hover:not(:disabled) {
  background: var(--bf-bg-surface-hover);
  border-color: var(--bf-border-strong);
}

.bf-btn--ghost {
  background: transparent;
  color: var(--bf-text-secondary);
}
.bf-btn--ghost:hover:not(:disabled) {
  background: var(--bf-bg-surface);
  color: var(--bf-text-primary);
}

.bf-btn--danger {
  background: var(--bf-error-soft);
  color: var(--bf-error);
  border-color: rgba(232, 115, 102, 0.3);
}
.bf-btn--danger:hover:not(:disabled) {
  background: var(--bf-error);
  color: white;
  border-color: var(--bf-error);
}

.bf-btn--sm {
  padding: var(--bf-space-xs) var(--bf-space-md);
  font-size: 0.8125rem;
  min-height: 32px;
}
.bf-btn--xs {
  padding: 2px var(--bf-space-sm);
  font-size: 0.75rem;
  min-height: 24px;
  font-weight: 500;
}
.bf-btn--lg {
  padding: var(--bf-space-md) var(--bf-space-xl);
  font-size: 1rem;
  min-height: 48px;
}
.bf-btn--icon {
  padding: var(--bf-space-sm);
  min-width: 40px;
}

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

/* ============================================================
   Badges
   ============================================================ */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-xs);
  padding: 2px var(--bf-space-sm);
  border-radius: var(--bf-radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}
.bf-badge--neutral { background: var(--bf-bg-surface-strong); color: var(--bf-text-secondary); border-color: var(--bf-border-subtle); }
.bf-badge--success { background: var(--bf-success-soft); color: var(--bf-success); border-color: rgba(63, 185, 122, 0.3); }
.bf-badge--warning { background: var(--bf-warning-soft); color: var(--bf-warning); border-color: rgba(245, 158, 11, 0.3); }
.bf-badge--error   { background: var(--bf-error-soft);   color: var(--bf-error);   border-color: rgba(232, 115, 102, 0.3); }
.bf-badge--info    { background: var(--bf-info-soft);    color: var(--bf-info);    border-color: rgba(77, 163, 255, 0.3); }
.bf-badge--accent  { background: var(--bf-amber-soft);   color: var(--bf-amber);   border-color: rgba(244, 178, 72, 0.3); }

.bf-badge--lg {
  padding: var(--bf-space-xs) var(--bf-space-md);
  font-size: 0.75rem;
}

/* Pulsing unread dot */
.bf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-blue);
  box-shadow: 0 0 0 0 var(--bf-blue-soft);
  animation: bfDotPulse 1.8s ease-in-out infinite;
}
.bf-dot--quiet { animation: none; opacity: 0.7; }
.bf-dot--success { background: var(--bf-success); }
.bf-dot--warning { background: var(--bf-warning); }
.bf-dot--error { background: var(--bf-error); }

@keyframes bfDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(77, 163, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0); }
}

/* Unread count badge for sidebar/inbox */
.bf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0 6px;
  height: 1.5em;
  border-radius: var(--bf-radius-full);
  background: var(--bf-blue);
  color: var(--bf-text-on-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bf-count--muted { background: var(--bf-bg-surface-strong); color: var(--bf-text-secondary); }

/* ============================================================
   Sidebar shell layout
   ============================================================ */
.bf-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}
@media (max-width: 1023px) {
  .bf-shell {
    grid-template-columns: 1fr;
  }
}

.bf-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bf-bg-base);
  border-right: 1px solid var(--bf-border-subtle);
  padding: var(--bf-space-xl) var(--bf-space-lg);
  z-index: var(--bf-z-sidebar);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xl);
}
@media (max-width: 1023px) {
  .bf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--bf-duration-slow) var(--bf-ease);
    box-shadow: var(--bf-shadow-lg);
  }
  .bf-sidebar[data-open="true"] {
    transform: translateX(0);
  }
}

.bf-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-md);
  text-decoration: none;
}
.bf-sidebar__brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--bf-radius-md);
  background: var(--bf-blue-soft);
  border: 1px solid rgba(77, 163, 255, 0.3);
  color: var(--bf-blue);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.bf-sidebar__brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--bf-text-primary);
}
.bf-sidebar__brand-name em {
  color: var(--bf-blue);
  font-style: normal;
}
.bf-sidebar__brand-tag {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-text-tertiary);
  margin-top: 2px;
}

.bf-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-nav-section__title {
  padding: 0 var(--bf-space-md);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-text-tertiary);
  margin-bottom: var(--bf-space-sm);
}

.bf-nav-link {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-md);
  border-radius: var(--bf-radius-md);
  color: var(--bf-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--bf-duration-fast) var(--bf-ease), color var(--bf-duration-fast) var(--bf-ease);
}
.bf-nav-link:hover {
  background: var(--bf-bg-surface);
  color: var(--bf-text-primary);
}
.bf-nav-link[aria-current="page"],
.bf-nav-link.active {
  background: var(--bf-blue-soft);
  color: var(--bf-blue);
  font-weight: 600;
}
.bf-nav-link__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.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;
}

/* Mobile sidebar overlay */
.bf-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: calc(var(--bf-z-sidebar) - 1);
}
.bf-sidebar-backdrop[data-open="true"] {
  display: block;
}

.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);
  padding: var(--bf-space-md) var(--bf-space-xl);
  background: rgba(13, 20, 18, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bf-border-subtle);
}

.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 (thumb bar) — 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: 1fr;
    gap: 2px;
    padding: var(--bf-space-xs) var(--bf-space-sm);
    padding-bottom: calc(var(--bf-space-xs) + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 20, 18, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--bf-border-subtle);
  }
  /* Keep page content clear of the fixed bar (incl. iOS home indicator). */
  .bf-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

.bf-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: var(--bf-space-xs) 2px;
  border-radius: var(--bf-radius-md);
  text-decoration: none;
  color: var(--bf-text-tertiary);
  transition: color var(--bf-duration-fast) var(--bf-ease),
    background var(--bf-duration-fast) var(--bf-ease);
}
.bf-bottom-nav__item:active {
  background: var(--bf-bg-surface);
}
.bf-bottom-nav__item.is-active {
  color: var(--bf-blue);
}
.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: -2px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: var(--bf-radius-full);
  background: var(--bf-amber);
  border: 1.5px solid var(--bf-bg-base);
}
.bf-bottom-nav__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Task center — columns on desktop, segmented 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;
}

@media (max-width: 1023px) {
  .bf-tasks__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    margin-bottom: var(--bf-space-lg);
    padding: 3px;
    background: var(--bf-bg-surface);
    border: 1px solid var(--bf-border-subtle);
    border-radius: var(--bf-radius-md);
  }
  .bf-tasks__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: var(--bf-space-sm);
    border-radius: var(--bf-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bf-text-secondary);
    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-count {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--bf-radius-full);
    background: var(--bf-bg-surface-strong);
    color: var(--bf-text-secondary);
  }
  .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-blue-soft);
    color: var(--bf-blue);
  }
  #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 {
    background: var(--bf-blue);
    color: var(--bf-text-on-accent);
  }
}

/* ============================================================
   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: 700;
  letter-spacing: -0.02em;
  color: var(--bf-text-primary);
  margin: 0;
}
.bf-page-subtitle {
  color: var(--bf-text-secondary);
  margin-top: var(--bf-space-xs);
  font-size: 0.875rem;
}

.bf-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
  font-size: 0.8125rem;
  color: var(--bf-text-tertiary);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.bf-breadcrumb a {
  color: var(--bf-text-secondary);
  text-decoration: none;
  padding: 2px var(--bf-space-xs);
  border-radius: var(--bf-radius-sm);
  transition: color var(--bf-duration-fast) var(--bf-ease), background var(--bf-duration-fast) var(--bf-ease);
}
.bf-breadcrumb a:hover {
  color: var(--bf-blue);
  background: var(--bf-blue-soft);
}
.bf-breadcrumb__sep {
  color: var(--bf-text-disabled);
  margin: 0 var(--bf-space-xs);
  user-select: none;
}
.bf-breadcrumb__current {
  color: var(--bf-text-primary);
  font-weight: 500;
}

/* ============================================================
   Empty / error / loading states
   ============================================================ */
.bf-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--bf-space-md);
  padding: var(--bf-space-3xl) var(--bf-space-xl);
  color: var(--bf-text-tertiary);
}
.bf-state__icon {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}
.bf-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bf-text-primary);
}
.bf-state__message {
  font-size: 0.875rem;
  max-width: 28rem;
}
.bf-state__action {
  margin-top: var(--bf-space-md);
}

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

/* Skeleton loaders */
.bf-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--bf-bg-surface) 0%,
    var(--bf-bg-surface-hover) 50%,
    var(--bf-bg-surface) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--bf-radius-sm);
  animation: bfShimmer 1.6s ease-in-out infinite;
  height: 1em;
}
.bf-skeleton--lg { height: 2.5em; border-radius: var(--bf-radius-md); }
.bf-skeleton--circle { border-radius: 50%; aspect-ratio: 1; height: 2.5em; }

@keyframes bfShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Attachment tile (DRY for thread/dashboard/document views)
   ============================================================ */
.bf-attachment {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--bf-duration-fast) var(--bf-ease), border-color var(--bf-duration-fast) var(--bf-ease);
}
.bf-attachment:hover {
  background: var(--bf-bg-surface-hover);
  border-color: var(--bf-border-medium);
}
.bf-attachment__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bf-blue-soft);
  border-radius: var(--bf-radius-md);
  color: var(--bf-blue);
  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-text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-attachment__meta {
  font-size: 0.75rem;
  color: var(--bf-text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-xs) var(--bf-space-md);
  align-items: center;
}
.bf-attachment__size {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--bf-text-tertiary);
  flex-shrink: 0;
}

/* ============================================================
   Message bubble (thread detail)
   ============================================================ */
.bf-message {
  display: flex;
  gap: var(--bf-space-md);
  padding: var(--bf-space-lg);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-lg);
  position: relative;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-message--from-office {
  border-left: 3px solid var(--bf-blue);
  background: linear-gradient(90deg, var(--bf-blue-soft) 0%, transparent 8%);
}
.bf-message--from-client {
  border-left: 3px solid var(--bf-success);
  background: linear-gradient(90deg, var(--bf-success-soft) 0%, transparent 8%);
}
.bf-message--unread::after {
  content: "";
  position: absolute;
  top: var(--bf-space-md);
  right: var(--bf-space-md);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-blue);
}

.bf-message__avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bf-blue-soft);
  color: var(--bf-blue);
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
  border: 1px solid rgba(77, 163, 255, 0.3);
}
.bf-message__avatar--client {
  background: var(--bf-success-soft);
  color: var(--bf-success);
  border-color: rgba(63, 185, 122, 0.3);
}
.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: 600;
  font-size: 0.875rem;
  color: var(--bf-text-primary);
}
.bf-message__time {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--bf-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.bf-message__direction {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--bf-text-tertiary);
}
.bf-message__direction--from-client { color: var(--bf-success); }
.bf-message__direction--from-office { color: var(--bf-blue); }
.bf-message__text {
  color: var(--bf-text-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bf-message__attachments {
  margin-top: var(--bf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
}

/* New-message animation hook (used by realtime JS) */
.bf-message--just-arrived {
  animation: bfMessagePop 380ms var(--bf-ease) both;
}
@keyframes bfMessagePop {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Composer (sticky reply box)
   ============================================================ */
.bf-composer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0, var(--bf-bg-base-soft) 24%);
  padding-top: var(--bf-space-xl);
  padding-bottom: var(--bf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
}
.bf-composer__shell {
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-medium);
  border-radius: var(--bf-radius-lg);
  padding: var(--bf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  transition: border-color var(--bf-duration-fast) var(--bf-ease), background var(--bf-duration-fast) var(--bf-ease);
}
.bf-composer__shell:focus-within {
  border-color: var(--bf-blue);
  background: var(--bf-bg-surface-hover);
  box-shadow: 0 0 0 3px var(--bf-blue-soft);
}
.bf-composer textarea {
  border: 0;
  background: transparent;
  resize: none;
  min-height: 4em;
  padding: var(--bf-space-sm);
  color: var(--bf-text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}
.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.75rem;
  color: var(--bf-text-tertiary);
}
.bf-composer__hint kbd {
  padding: 2px var(--bf-space-xs);
  background: var(--bf-bg-surface-strong);
  border: 1px solid var(--bf-border-medium);
  border-radius: var(--bf-radius-sm);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--bf-text-secondary);
}

/* Drop-zone */
.bf-dropzone {
  position: relative;
  border: 1px dashed var(--bf-border-medium);
  border-radius: var(--bf-radius-md);
  padding: var(--bf-space-lg);
  text-align: center;
  background: var(--bf-bg-surface);
  color: var(--bf-text-tertiary);
  font-size: 0.8125rem;
  transition: border-color var(--bf-duration-fast) var(--bf-ease), background var(--bf-duration-fast) var(--bf-ease);
}
.bf-dropzone[data-dragover="true"] {
  border-color: var(--bf-blue);
  background: var(--bf-blue-soft);
  color: var(--bf-blue);
}

/* ============================================================
   Toasts (HTMX OOB target #bf-toasts)
   ============================================================ */
.bf-toasts {
  position: fixed;
  top: var(--bf-space-xl);
  right: var(--bf-space-xl);
  z-index: var(--bf-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  pointer-events: none;
  max-width: 22rem;
}
.bf-toast {
  pointer-events: auto;
  background: var(--bf-bg-base-elevated);
  border: 1px solid var(--bf-border-medium);
  border-radius: var(--bf-radius-md);
  padding: var(--bf-space-md) var(--bf-space-lg);
  color: var(--bf-text-primary);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-md);
  box-shadow: var(--bf-shadow-lg);
  animation: bfToastIn var(--bf-duration-base) var(--bf-ease);
}
.bf-toast--success { border-left: 3px solid var(--bf-success); }
.bf-toast--error   { border-left: 3px solid var(--bf-error); }
.bf-toast--warning { border-left: 3px solid var(--bf-warning); }
.bf-toast--info    { border-left: 3px solid var(--bf-blue); }
@keyframes bfToastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Command palette (Ctrl+K modal)
   ============================================================ */
.bf-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-palette);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  animation: bfFadeIn var(--bf-duration-base) var(--bf-ease);
}
.bf-palette {
  width: min(640px, 90vw);
  background: var(--bf-bg-base-elevated);
  border: 1px solid var(--bf-border-medium);
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-lg);
  overflow: hidden;
  animation: bfSlideUp var(--bf-duration-base) var(--bf-ease);
}
.bf-palette__input {
  width: 100%;
  padding: var(--bf-space-lg) var(--bf-space-xl);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bf-border-subtle);
  color: var(--bf-text-primary);
  font-size: 1rem;
  outline: none;
  font-family: inherit;
}
.bf-palette__input::placeholder { color: var(--bf-text-tertiary); }
.bf-palette__results {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--bf-space-sm);
}
.bf-palette__item {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  padding: var(--bf-space-md) var(--bf-space-lg);
  border-radius: var(--bf-radius-md);
  text-decoration: none;
  color: var(--bf-text-primary);
  cursor: pointer;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-palette__item:hover,
.bf-palette__item[aria-selected="true"] {
  background: var(--bf-blue-soft);
}
.bf-palette__item-kind {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-text-tertiary);
  flex-shrink: 0;
}

/* ============================================================
   Tabs
   ============================================================ */
.bf-tabs {
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
  border-bottom: 1px solid var(--bf-border-subtle);
  padding: 0 var(--bf-space-xs);
  overflow-x: auto;
}
.bf-tab {
  padding: var(--bf-space-md) var(--bf-space-lg);
  color: var(--bf-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--bf-duration-fast) var(--bf-ease), border-color var(--bf-duration-fast) var(--bf-ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
}
.bf-tab:hover {
  color: var(--bf-text-primary);
}
.bf-tab[aria-current="page"],
.bf-tab.active {
  color: var(--bf-blue);
  border-bottom-color: var(--bf-blue);
}

/* ============================================================
   Filter chips (used on lists)
   ============================================================ */
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-xs);
  padding: var(--bf-space-xs) var(--bf-space-md);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-full);
  color: var(--bf-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 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-chip:hover {
  background: var(--bf-bg-surface-hover);
  border-color: var(--bf-border-medium);
  color: var(--bf-text-primary);
}
.bf-chip[aria-pressed="true"],
.bf-chip.active {
  background: var(--bf-blue-soft);
  border-color: rgba(77, 163, 255, 0.4);
  color: var(--bf-blue);
}

/* ============================================================
   Metric tiles (used on dashboards)
   ============================================================ */
.bf-metric {
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-md);
  padding: var(--bf-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
}
.bf-metric__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bf-text-tertiary);
  font-weight: 600;
}
.bf-metric__value {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bf-text-primary);
  line-height: 1.1;
}
.bf-metric__value--accent { color: var(--bf-blue); }
.bf-metric__value--success { color: var(--bf-success); }
.bf-metric__value--warning { color: var(--bf-amber); }
.bf-metric__hint {
  font-size: 0.75rem;
  color: var(--bf-text-tertiary);
}

/* ============================================================
   Search bar
   ============================================================ */
.bf-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 28rem;
}
.bf-search__icon {
  position: absolute;
  left: var(--bf-space-md);
  width: 16px;
  height: 16px;
  color: var(--bf-text-tertiary);
  pointer-events: none;
}
.bf-search__input {
  width: 100%;
  padding: var(--bf-space-sm) var(--bf-space-md) var(--bf-space-sm) var(--bf-space-2xl);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-md);
  color: var(--bf-text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color var(--bf-duration-fast) var(--bf-ease), background var(--bf-duration-fast) var(--bf-ease);
}
.bf-search__input:focus {
  outline: none;
  border-color: var(--bf-blue);
  background: var(--bf-bg-surface-hover);
  box-shadow: 0 0 0 3px var(--bf-blue-soft);
}
.bf-search__kbd {
  position: absolute;
  right: var(--bf-space-sm);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--bf-space-xs);
  background: var(--bf-bg-surface-strong);
  border: 1px solid var(--bf-border-medium);
  border-radius: var(--bf-radius-sm);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--bf-text-tertiary);
  pointer-events: none;
}

/* ============================================================
   Legacy / pre-existing utilities (kept for compatibility)
   ============================================================ */
.glow-text {
  text-shadow: 0 0 30px rgba(77, 163, 255, 0.3),
    0 0 60px rgba(77, 163, 255, 0.1);
}

.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--bf-ease), transform 0.7s var(--bf-ease);
}
.section-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

#topbar {
  transition: backdrop-filter var(--bf-duration-slow) var(--bf-ease), background-color var(--bf-duration-slow) var(--bf-ease);
}
#topbar.scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@keyframes bfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bfSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bfGlow {
  from { text-shadow: 0 0 10px rgba(77, 163, 255, 0.3); }
  to { text-shadow: 0 0 20px rgba(77, 163, 255, 0.5),
                     0 0 40px rgba(77, 163, 255, 0.2); }
}

.animate-fade-in { animation: bfFadeIn 0.6s var(--bf-ease) forwards; }
.animate-slide-up { animation: bfSlideUp 0.6s var(--bf-ease) forwards; }
.animate-glow { animation: bfGlow 3s ease-in-out infinite alternate; }

.bg-gradient-hero {
  background-image: radial-gradient(ellipse at 30% 20%, #1A2F28 0%, var(--bf-bg-base-soft) 60%, #0F172A 100%);
}
.bg-gradient-forest {
  background-image: linear-gradient(135deg, var(--bf-bg-base-soft) 0%, #1A2F28 50%, #162822 100%);
}

.sidebar-active {
  background-color: var(--bf-blue-soft) !important;
  color: #60A5FA !important;
}

/* DaisyUI input tweak — keep readability when daisy classes are used */
.input-bordered,
.textarea-bordered,
.select-bordered {
  background-color: var(--bf-bg-surface);
  border-color: var(--bf-border-medium);
  color: var(--bf-text-primary);
}
.input-bordered:focus,
.textarea-bordered:focus,
.select-bordered:focus {
  border-color: var(--bf-blue);
  box-shadow: 0 0 0 1px var(--bf-blue-soft);
  outline: none;
}

/* Native checkbox/radio inside Django forms — consistent styling */
.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.15rem;
  height: 1.15rem;
  background-color: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-strong);
  cursor: pointer;
  vertical-align: middle;
  margin: 0 0.5rem 0 0;
  flex-shrink: 0;
  transition: background-color 0.15s var(--bf-ease), border-color 0.15s var(--bf-ease);
}

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

.form-control input[type="radio"]:not(.radio),
ul input[type="radio"]:not(.radio) {
  border-radius: 999px;
}

.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-blue);
  background-color: var(--bf-bg-surface-hover);
}

.form-control input[type="checkbox"]:not(.checkbox):not(.toggle):checked,
ul input[type="checkbox"]:not(.checkbox):checked {
  background-color: var(--bf-blue);
  border-color: var(--bf-blue);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A1210'%3E%3Cpath d='M13.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L6.5 10.793l6.646-6.647a.5.5 0 01.708 0z'/%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 {
  background-color: var(--bf-blue);
  border-color: var(--bf-blue);
  background-image: radial-gradient(circle, #0A1210 35%, transparent 40%);
}

.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-blue);
  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: var(--bf-space-sm) 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);
  cursor: pointer;
  padding: var(--bf-space-xs) var(--bf-space-md);
  border-radius: var(--bf-radius-sm);
  transition: background-color 0.15s var(--bf-ease);
  color: var(--bf-text-secondary);
  font-size: 0.875rem;
  width: 100%;
}

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

/* ============================================================
   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;
  }
  .section-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Dense list (.bf-list) — replacement for card grids on
   threads/requests/documents. One row per item, hover affordance,
   leading dot, primary text, meta line, trailing time/badge.
   ============================================================ */
.bf-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-bg-surface);
  overflow: hidden;
}
.bf-list__row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-border-subtle);
  text-decoration: none;
  color: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-list__row:last-child {
  border-bottom: 0;
}
.bf-list__row:hover,
.bf-list__row:focus-visible {
  background: var(--bf-bg-surface-hover);
  outline: none;
}
.bf-list__row[data-status="unread"] {
  border-left: 3px solid var(--bf-blue);
  padding-left: calc(var(--bf-space-lg) - 3px);
}
.bf-list__row[data-status="warning"] {
  border-left: 3px solid var(--bf-warning);
  padding-left: calc(var(--bf-space-lg) - 3px);
}
.bf-list__row[data-status="error"] {
  border-left: 3px solid var(--bf-error);
  padding-left: calc(var(--bf-space-lg) - 3px);
}
.bf-list__leading {
  display: grid;
  place-items: center;
}
.bf-list__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bf-list__title {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-sm);
  font-weight: 500;
  color: var(--bf-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-list__row[data-status="unread"] .bf-list__title {
  font-weight: 600;
}
.bf-list__meta {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  font-size: 0.75rem;
  color: var(--bf-text-tertiary);
  flex-wrap: wrap;
}
.bf-list__trailing {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  font-size: 0.75rem;
  color: var(--bf-text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bf-list__row[aria-selected="true"] {
  background: var(--bf-blue-soft);
}

/* ============================================================
   Compact data table (.bf-table)
   Sticky head, monospace numerics, 36px row, hover highlight.
   ============================================================ */
.bf-table-wrap {
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-bg-surface);
  overflow: auto;
  max-width: 100%;
}
.bf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.bf-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bf-bg-base-elevated);
  border-bottom: 1px solid var(--bf-border-medium);
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-text-secondary);
  padding: var(--bf-space-sm) var(--bf-space-md);
  white-space: nowrap;
}
.bf-table tbody td {
  padding: var(--bf-space-sm) var(--bf-space-md);
  border-bottom: 1px solid var(--bf-border-subtle);
  color: var(--bf-text-primary);
  vertical-align: middle;
}
.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-bg-surface-hover);
}
.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: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.bf-table .bf-muted {
  color: var(--bf-text-tertiary);
}
.bf-table a {
  color: var(--bf-text-primary);
  text-decoration: none;
}
.bf-table a:hover {
  color: var(--bf-blue);
}

/* ============================================================
   KPI strip — horizontal mini-tiles for dashboard
   ============================================================ */
.bf-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--bf-border-subtle);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-lg);
  overflow: hidden;
  margin-bottom: var(--bf-space-lg);
}
.bf-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-bg-surface);
  min-width: 0;
}
.bf-kpi__label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-text-tertiary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-kpi__value {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bf-text-primary);
  line-height: 1.1;
}
.bf-kpi__delta {
  font-size: 0.75rem;
  color: var(--bf-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
}
.bf-kpi__delta--up { color: var(--bf-success); }
.bf-kpi__delta--down { color: var(--bf-error); }
.bf-kpi--accent .bf-kpi__value { color: var(--bf-blue); }
.bf-kpi--warning .bf-kpi__value { color: var(--bf-warning); }
.bf-kpi--error .bf-kpi__value { color: var(--bf-error); }

/* ============================================================
   Master-detail layout (thread_detail, company_detail)
   Left: sticky list (320px), right: scrollable detail.
   On <1280 — falls back to single column (detail-only view).
   ============================================================ */
.bf-master-detail {
  display: grid;
  grid-template-columns: 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) + 56px); /* topbar height */
    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);
}
/* Optional: hide list on narrow widths when in detail mode */
.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;
  }
}

/* ============================================================
   Tabs (segmented control) — used in thread_detail to host
   Wiadomości / Dokumenty / Akcje. Replaces side-aside.
   ============================================================ */
.bf-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-md);
  width: fit-content;
}
.bf-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-xs);
  padding: var(--bf-space-xs) var(--bf-space-md);
  border: 0;
  background: transparent;
  color: var(--bf-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--bf-radius-sm);
  cursor: pointer;
  transition: background var(--bf-duration-fast) var(--bf-ease), color var(--bf-duration-fast) var(--bf-ease);
}
.bf-tabs__btn:hover {
  color: var(--bf-text-primary);
}
.bf-tabs__btn[aria-selected="true"] {
  background: var(--bf-bg-surface-strong);
  color: var(--bf-text-primary);
}
.bf-tabs__btn .bf-count {
  margin-left: var(--bf-space-xs);
}
.bf-tab-panel[hidden] {
  display: none;
}

/* ============================================================
   Sticky toolbar (filters under page header, above list/table)
   ------------------------------------------------------------
   Wrapped in a contained surface so search / chips / select
   read as one row instead of three free-floating widgets, and
   pinned below the topbar so filters stay reachable on long
   lists. `--bf-toolbar-control-h` aligns control heights —
   search input padding sits between chip and select padding,
   so without this each control rendered at a different height.
   ============================================================ */
.bf-toolbar {
  --bf-toolbar-control-h: 36px;
  position: sticky;
  top: 56px; /* below topbar */
  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-bg-base-elevated);
  border: 1px solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-md);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 10px -8px rgba(0, 0, 0, 0.45);
  flex-wrap: wrap;
}

.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-chip {
  padding-left: var(--bf-space-md);
  padding-right: var(--bf-space-md);
}
.bf-toolbar .bf-search__icon {
  top: 50%;
  transform: translateY(-50%);
}

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