/* =====================================================================
   Design System · IASD Library — Components and layout
   Load order: bootstrap.min.css → tokens.css → bootstrap-theme.css
               → components.css
   The "b-" prefix avoids collisions with Bootstrap classes.
   ===================================================================== */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-ui); background: var(--color-bg); color: var(--color-text); }
.b-num { font-variant-numeric: tabular-nums; }
.b-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.b-skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 2000;
  background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
}
.b-skip-link:focus { top: var(--space-4); }

/* =====================================================================
   Responsive app shell
   phone (<768): top bar + bottom nav
   tablet (768–1199): navigation rail (icon + label)
   desktop (>=1200): full sidebar with the official logo
   ===================================================================== */
.b-app { min-height: 100vh; display: flex; }

.b-nav {
  background: var(--nav-bg); color: var(--nav-text);
  display: flex; flex-direction: column;
}
.b-nav__brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.b-nav__product {
  display: block; margin-top: var(--space-5); /* the clear space of the logo (DESIGN-SYSTEM §2.5) */
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--nav-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.b-nav__list { list-style: none; margin: 0; padding: var(--space-3); overflow-y: auto; flex: 1; }
.b-nav .b-nav__list { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.b-nav__group {
  font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold);
  padding: var(--space-4) var(--space-3) var(--space-2);
}
/* In the dark menu the group titles are small capitals; every item keeps its own label (feature 029). */
.b-nav .b-nav__group { font-size: var(--text-xs); color: var(--nav-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.b-nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-target); padding: 0 var(--space-3);
  border-radius: var(--radius); color: var(--color-text); text-decoration: none;
  font-weight: var(--weight-semibold);
}
.b-nav__item i { font-size: 1.35rem; color: var(--color-primary); }
.b-nav__item:hover { background: var(--color-primary-subtle); color: var(--color-text); }
.b-nav__item[aria-current="page"] {
  background: var(--color-primary); color: #fff;
}
.b-nav__item[aria-current="page"] i { color: #fff; }
.b-nav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* The dark side menu; the "Mais" sheet of the phone keeps the light items above. */
.b-nav .b-nav__item { color: var(--nav-text); font-weight: var(--weight-normal); }
.b-nav .b-nav__item i { color: inherit; opacity: 0.9; }
.b-nav .b-nav__item:hover { background: var(--nav-hover); color: #fff; }
.b-nav .b-nav__item[aria-current="page"] {
  background: var(--nav-active); color: #fff; font-weight: var(--weight-semibold);
  box-shadow: inset 3px 0 0 var(--nav-accent);
}
.b-nav .b-nav__item[aria-current="page"] i { opacity: 1; }
.b-nav .b-nav__item:focus-visible { box-shadow: 0 0 0 2px var(--focus-on-dark); }

.b-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-topbar {
  height: var(--topbar-height); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5);
  position: sticky; top: 0; z-index: 1010;
}
.b-topbar__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-primary); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-topbar__user { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
/* The way back, before the title (feature 032): a square button with the arrow, the height of the controls. */
.b-topbar__back {
  flex-shrink: 0; width: var(--control-height); height: var(--control-height); min-height: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
/* The menu of the operator and the "Sair" button (feature 056): plain until the pointer is over them, with the height
   of the controls (40px with a mouse, 48px by touch). */
.btn-link.b-user-menu__toggle, .btn-link.b-user-menu__action, .btn-link.b-topbar__logout {
  --bs-btn-hover-color: var(--color-primary); --bs-btn-active-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-subtle); --bs-btn-active-bg: var(--color-primary-light);
  --bs-btn-padding-x: var(--space-3); text-decoration: none;
}
.btn-link.b-user-menu__toggle { --bs-btn-padding-x: var(--space-1); --bs-btn-padding-y: 0; gap: var(--space-1); }
.b-user-menu { position: relative; }
.b-user-menu__avatar { position: relative; display: inline-flex; }
/* Sounds off (feature 056): in sight, so that the missing beep at the counter is no surprise. */
.b-user-menu__muted {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1;
  background: var(--color-warning-bg); color: var(--color-warning-text); box-shadow: 0 0 0 1px var(--color-surface);
}
.b-user-menu__chevron { font-size: 0.75rem; color: var(--color-text-muted); }
.b-user-menu__panel {
  position: absolute; top: calc(100% + var(--space-1)); right: 0; width: 240px;
  max-width: calc(100vw - 2 * var(--space-4)); padding: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.b-user-menu__person {
  display: flex; flex-direction: column; padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere;
}
.b-user-menu__person strong { color: var(--color-text); }
.b-user-menu__person span { color: var(--color-text-muted); font-size: var(--text-sm); }
.btn-link.b-user-menu__action { width: 100%; justify-content: flex-start; }

/* Initials in a circle: the operator in the top bar, the person on the record (feature 029). */
.b-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-light); color: var(--color-primary);
  font-weight: var(--weight-bold); font-size: var(--text-sm); line-height: 1;
}
.b-avatar--lg { width: 64px; height: 64px; font-size: var(--text-xl); }
/* Fluid and aligned to the menu (feature 031): always 24px from the menu and from the brand strip, on any monitor,
   with no maximum width, like the forms (feature 057). Short screens keep their reading width (.b-content--narrow). */
.b-content { padding: var(--space-5); width: 100%; margin: 0; }
/* The footer of the system (feature 060): at the end of the screen, even with little content. Below the 16px of the
   interface because nobody needs it to work (DESIGN-SYSTEM §4). */
.b-footer {
  margin-top: auto; padding: var(--space-2) var(--space-5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
  border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs);
}

/* Brand strip on the right on desktops (feature 031, DESIGN-SYSTEM §2.2): a fixed width, only wide enough for
   the white symbol (48px) and its clear space, the Division colour, the symbol at the bottom as on the login.
   Not the seventh column of the Creation Grid, whose columns have equal widths (convention of the system). */
.b-sabbath { display: none; }
@media (min-width: 1200px) {
  .b-sabbath {
    display: flex; flex: 0 0 var(--brand-strip-width); align-items: flex-end; justify-content: center;
    position: sticky; top: 0; height: 100vh; padding-bottom: var(--space-6);
    background: var(--iasd-division);
  }
  .b-sabbath .b-official-symbol { width: 48px; }
}
/* Short screens (a receipt, a result list): the content keeps a reading width, aligned to the left like the
   others, instead of a narrow column in the middle (DESIGN-SYSTEM §9.5). */
.b-content--narrow > * { max-width: 48rem; }

.b-bottomnav { display: none; }

/* Desktop (>=1200) */
@media (min-width: 1200px) {
  .b-nav { width: var(--sidebar-width); position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
}

/* Tablet (768–1199): rail */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .b-nav { width: var(--rail-width); position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
  .b-nav__brand { padding: var(--space-4) var(--space-2); display: flex; justify-content: center; }
  .b-nav__brand .b-official-logo, .b-nav__product, .b-nav__group { display: none; }
  .b-nav .b-nav__brand .b-official-symbol { display: block; }
  .b-nav__list { padding: var(--space-1); overflow-x: hidden; scrollbar-width: thin; }
  .b-nav__item { flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-2) 0; min-height: 64px; font-size: 0.8125rem; letter-spacing: -0.01em; text-align: center; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
  .b-nav__item i { font-size: 1.5rem; }
  .b-nav__item .b-nav__label { display: none; }
}
.b-nav__short { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) { .b-nav .b-nav__short { display: inline; } }

/* Phone (<768): bottom nav */
@media (max-width: 767.98px) {
  .b-nav { display: none; }
  .b-topbar { padding: 0 var(--space-4); }
  /* The space of the bottom bar is in .b-main, so that the footer does not end up behind it (feature 060). */
  .b-main { padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom)); }
  .b-content { padding: var(--space-4); }
  .b-footer { padding: var(--space-2) var(--space-4); justify-content: center; text-align: center; }
  .b-bottomnav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
    height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(0, 31, 61, 0.06);
  }
  .b-bottomnav a, .b-bottomnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--color-text-muted); text-decoration: none; font-size: 0.8125rem; font-weight: var(--weight-semibold);
    background: none; border: 0; padding: 0; font-family: inherit;
  }
  .b-bottomnav a i, .b-bottomnav button i { font-size: 1.5rem; }
  .b-bottomnav [aria-current="page"] { color: var(--color-primary); }
  .b-bottomnav [aria-current="page"] i { background: var(--color-primary-light); border-radius: var(--radius-pill); padding: 0 var(--space-4); }
  .b-bottomnav :focus-visible { outline: none; box-shadow: var(--focus-ring); }
}

/* "Mais" on the phone: the whole menu in a bottom sheet (native <dialog>, closes with Esc or a tap outside). */
.b-more {
  margin: auto 0 0; width: 100%; max-width: none; max-height: 85vh; padding: 0;
  border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface);
  padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--shadow-3);
}
.b-more::backdrop { background: rgba(0, 31, 61, 0.4); }
.b-more__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); }
.b-more__footer { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }

/* ---------- Official brand (DESIGN-SYSTEM §2.5) ---------- */
/* Only the official files, never redrawn; the height is automatic so that the proportion never changes. */
.b-official-logo { display: block; max-width: 200px; min-width: 120px; height: auto; }
.b-official-symbol { display: block; width: 40px; height: auto; }
.b-nav__brand .b-official-symbol { display: none; } /* shown only in the tablet rail */

/* =====================================================================
   Barcode scan input (USB scanner, camera or typing)
   ===================================================================== */
/* The same height as the other fields (--control-height, feature 030): 40px with a mouse, 48px on touch
   and on the counter screens. The camera button fills the height of the field, over its border. */
.b-scan {
  display: flex; align-items: stretch;
  height: var(--control-height);
  background: var(--color-surface); border: 2px solid var(--color-border-input); border-radius: var(--radius);
  transition: border-color var(--transition);
}
.b-scan__icon { display: flex; align-items: center; padding: 0 var(--space-3); font-size: 1.25rem; color: var(--color-primary); }
.b-scan__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 var(--space-2) 0 0;
  font-size: var(--text-base); font-family: var(--font-mono);
}
.b-scan__input::placeholder { font-family: var(--font-ui); color: var(--gray-600); }
.b-scan .b-scan__camera {
  min-width: var(--control-height); min-height: 0; height: calc(100% + 4px); margin: -2px -2px -2px 0;
  padding-top: 0; padding-bottom: 0; border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 767.98px) {
  /* The camera is the reader of the phone (DESIGN-SYSTEM §6.3). */
  .b-scan .b-scan__camera { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
}
.b-scan:focus-within { border-color: var(--color-primary); } /* no ring: the field keeps its size (feature 028) */
.b-scan__status { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); min-height: 1.5em; }
/* A reading only changes the colour of the border: the field keeps its size (feature 028). The field is
   always focused on the counter screens, so the reading colour must win over the focus colour. */
.b-scan.b-scan--success { border-color: var(--color-success); }
.b-scan--success + .b-scan__status { color: var(--color-success); font-weight: var(--weight-semibold); }
.b-scan.b-scan--error { border-color: var(--color-danger); animation: b-shake 240ms; }
.b-scan--error + .b-scan__status { color: var(--color-danger); font-weight: var(--weight-semibold); }
@keyframes b-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .b-scan--error { animation: none; } }

/* "Ready to scan" indicator (USB scanner) */
.b-ready { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-success); font-weight: var(--weight-semibold); }
.b-ready::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-success-base); box-shadow: 0 0 0 3px var(--color-success-bg); }

/* =====================================================================
   Status badges (always icon + text; never color alone)
   ===================================================================== */
.b-status {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.2em 0.7em; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; white-space: nowrap;
  border: 1px solid currentColor; background: var(--color-surface);
}
.b-status--available { color: var(--status-available); background: var(--color-success-bg); }
.b-status--on-loan { color: var(--status-on-loan); background: var(--color-primary-subtle); }
.b-status--overdue   { color: var(--status-overdue);   background: var(--color-danger-bg); }
.b-status--on-hold  { color: var(--status-on-hold);  background: var(--color-warning-bg); }
.b-status--awaiting { color: var(--status-awaiting); background: var(--color-info-bg); }
.b-status--maintenance { color: var(--status-maintenance); background: #f3ece9; }
.b-status--missing { color: var(--status-missing); background: #f5eef1; }
.b-status--withdrawn    { color: var(--status-withdrawn);    background: var(--gray-100); }

/* Category tag (same color as the label stripe) */
.b-category-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.2em; padding: 0.15em 0.5em; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; color: #fff;
}
.b-category-tag--dark { color: var(--gray-900); }

/* =====================================================================
   Work card / list item
   ===================================================================== */
.b-work {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.b-work__cover { width: 64px; height: 88px; object-fit: cover; border-radius: var(--radius-sm); background: var(--gray-100); }
.b-work__title { font-weight: var(--weight-bold); margin: 0; line-height: 1.3; }
.b-work__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin: 2px 0 0; }
@media (max-width: 575.98px) {
  .b-work { grid-template-columns: 56px 1fr; }
  .b-work__cover { width: 56px; height: 76px; }
  .b-work__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
  .b-work__actions .btn { flex: 1; }
}

/* =====================================================================
   Responsive table → cards on phones
   Usage: <table class="table b-responsive-table"> with data-label on each <td>
   ===================================================================== */
@media (max-width: 767.98px) {
  .b-responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .b-responsive-table, .b-responsive-table tbody, .b-responsive-table tr, .b-responsive-table td { display: block; width: 100%; }
  .b-responsive-table tr {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  }
  .b-responsive-table > :not(caption) > * > * { border: 0; padding: var(--space-1) 0; }
  .b-responsive-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold);
  }
}

/* =====================================================================
   Dashboard: stats
   ===================================================================== */
.b-stat {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1);
  text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-1); height: 100%;
}
.b-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.b-stat__value { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.b-stat--danger { border-left: 6px solid var(--color-danger-base); }
.b-stat--danger .b-stat__value { color: var(--color-danger); }
a.b-stat:hover { border-color: var(--color-primary); }

/* Progress bar (accessioning) */
.b-progress { height: 12px; background: var(--gray-100); border-radius: var(--radius-pill); overflow: hidden; }
.b-progress > span { display: block; height: 100%; background: var(--color-success-base); border-radius: var(--radius-pill); }

/* =====================================================================
   Scan toasts — announced through aria-live
   ===================================================================== */
.b-toasts { position: fixed; z-index: 1090; right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); width: min(420px, calc(100vw - 2 * var(--space-4))); }
@media (max-width: 767.98px) { .b-toasts { left: var(--space-4); right: var(--space-4); bottom: calc(var(--bottomnav-height) + var(--space-3)); width: auto; } }
.b-toast {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: var(--space-3) var(--space-4); border-left: 6px solid var(--color-info-base);
}
.b-toast i { font-size: 1.4rem; line-height: 1.2; }
.b-toast--success { border-left-color: var(--color-success-base); } .b-toast--success i { color: var(--color-success); }
.b-toast--error    { border-left-color: var(--color-danger-base); }  .b-toast--error i { color: var(--color-danger); }
.b-toast--warning  { border-left-color: var(--iasd-warm); }    .b-toast--warning i { color: var(--color-warning-text); }

/* "SET ASIDE FOR" callout (return with a hold) */
.b-callout {
  background: var(--color-warning); color: var(--gray-900); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); font-size: var(--text-xl); font-weight: var(--weight-bold);
  display: flex; align-items: center; gap: var(--space-3);
}

/* Modal becomes a bottom sheet on phones */
@media (max-width: 575.98px) {
  .modal-dialog.b-sheet { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: none; }
  .modal-dialog.b-sheet .modal-content { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* Native <dialog> (no Bootstrap JS): centred card; bottom sheet on phones */
.b-dialog {
  border: 0; border-radius: var(--radius-lg); padding: var(--space-5);
  width: min(36rem, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-5));
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .25));
}
.b-dialog::backdrop { background: rgba(0, 0, 0, .45); }
@media (max-width: 575.98px) {
  .b-dialog { margin: auto 0 0; width: 100%; max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
}

/* Only on phones and tablets: narrow screen with touch (feature 006, "Manter conectado") */
.b-mobile-only { display: none; }
@media (pointer: coarse) and (max-width: 991.98px) { .b-mobile-only { display: block; } }

/* Field to check in the review (RF-AC-19): low confidence from the AI */
.b-field--check { border-color: var(--iasd-warm); box-shadow: 0 0 0 .15rem rgba(255, 169, 45, .35); }

/* Dashboard indicator (DESIGN-SYSTEM §8, features 019 and 029): a card with the label on top and the
   number beside an icon in a circle; the alert ones in the danger colour. */
.b-stat {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  background: var(--color-surface); border: 1px solid transparent; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); color: var(--color-text);
}
.b-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.b-stat__row { display: flex; align-items: center; gap: var(--space-3); }
.b-stat__icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-light); color: var(--color-primary); font-size: 1.25rem;
}
.b-stat__value { font-size: 2rem; font-weight: var(--weight-bold); line-height: 1.1; color: var(--color-text); }
.b-stat--alert .b-stat__icon { background: var(--color-danger-bg); color: var(--color-danger); }
.b-stat--alert .b-stat__value { color: var(--color-danger); }
a.b-stat:hover, a.b-stat:focus-visible { border-color: var(--color-primary); }

/* Alpine: hidden until initialised */
[x-cloak] { display: none !important; }

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity var(--transition); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* =====================================================================
   Creation Grid ("Grade da Criação", Brand Manual, p. 5–7)
   7 equal columns; the 7th (Sabbath column) is distinct and holds
   ONLY the official symbol, never text.
   Used for: login, splash screen and institutional printouts.
   ===================================================================== */
.b-creation-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 100vh; background: var(--color-surface);
}
.b-creation-grid__content { grid-column: 1 / span 6; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5); }
.b-creation-grid__sabbath {
  grid-column: 7; background: var(--iasd-division);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--space-6);
}
.b-creation-grid__sabbath .b-official-symbol { width: clamp(32px, 60%, 72px); }

/* =====================================================================
   Copy label (print) — see DESIGN-SYSTEM.md §13
   ===================================================================== */
.b-label {
  width: 66.7mm; height: 25.4mm; box-sizing: border-box;
  display: grid; grid-template-columns: 12mm 1fr; overflow: hidden;
  border: 0.2mm dashed #bbb; /* preview only */
  font-family: var(--font-ui); color: #000; background: #fff;
}
.b-label__stripe { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 9pt; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.06em; }
.b-label__stripe--dark { color: #000; }
.b-label__body { padding: 1.2mm 2mm; display: flex; flex-direction: column; justify-content: space-between; }
.b-label__call-number { font-size: 8pt; font-weight: 700; line-height: 1.1; }
.b-label__barcode { height: 9mm; background: repeating-linear-gradient(90deg, #000 0 0.35mm, #fff 0.35mm 0.7mm, #000 0.7mm 1.3mm, #fff 1.3mm 1.6mm); }
.b-label__footer { display: flex; justify-content: space-between; font-size: 7pt; line-height: 1; }
.b-label__accession { font-family: var(--font-mono); font-weight: 700; font-size: 8pt; }
@media print {
  .b-label { border: 0; }
  .b-nav, .b-bottomnav, .b-more, .b-toasts, .b-topbar__user, .b-footer { display: none !important; }
  .b-main { padding-bottom: 0; }
}

/* ---------- Person card (DESIGN-SYSTEM §9.2) ---------- */
.b-person { display: flex; gap: var(--space-3); align-items: center; }
.b-person__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--weight-bold);
}
.b-person__name { margin: 0; font-weight: var(--weight-bold); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.b-person__meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Main action of a screen (DESIGN-SYSTEM §6.3) ---------- */
/* At the end, always in sight: aligned right on tablets and desktops, wide above the bottom bar on phones. */
.b-action-footer {
  position: sticky; bottom: 0; z-index: 1000;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3);
  margin-top: var(--space-5); padding: var(--space-4) 0;
  background: var(--color-bg); border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) { .b-action-footer .btn { white-space: nowrap; } }
/* A footer with one form per button (the review of a loss, feature 042): the buttons behave as its direct children. */
.b-action-footer > form { display: contents; }
@media (max-width: 767.98px) {
  .b-action-footer { bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom)); }
  /* Stacked, the main action (last in the markup) on top. */
  .b-action-footer { flex-direction: column-reverse; gap: var(--space-2); }
  .b-action-footer .btn { width: 100%; }
  .b-action-footer .btn-lg { font-size: 1rem; } /* "Confirmar empréstimo (2 itens)" in one line inside a card */
}

/* =====================================================================
   Page patterns (DESIGN-SYSTEM §9.5, feature 026): list, form, record
   ===================================================================== */

/* List: the search and filters on the left, the main action always on the right. */
.b-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.b-toolbar__search { flex: 1 1 22rem; max-width: 36rem; }
.b-toolbar__search .form-text { margin-top: var(--space-1); }
.b-toolbar__search--filtered { max-width: 48rem; } /* the search and a filter side by side (feature 064) */
.b-toolbar__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Level with the search field, below its label (the label is one line of text and its margin). */
.b-toolbar__search ~ .b-toolbar__actions { padding-top: calc(var(--text-base) * var(--line-height-body, 1.5) + var(--space-1)); }
/* Filters or a short note on the left, when there is no search field. */
.b-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: var(--control-height); margin: 0; }
.b-toolbar__filters .form-check { margin: 0; }
@media (max-width: 767.98px) {
  .b-toolbar { flex-direction: column-reverse; align-items: stretch; }
  .b-toolbar__search { max-width: none; flex-basis: auto; }
  .b-toolbar__actions, .b-toolbar__search ~ .b-toolbar__actions { margin-left: 0; padding-top: 0; }
  .b-toolbar__actions .btn { width: 100%; }
}

/* Form: as wide as the content, fields grouped in sections, the actions in the footer (feature 057). */
.b-settings { max-width: 45rem; } /* one section at a time, in its tab (feature 059) */
.b-settings__number { max-width: 8rem; } /* a number of one to three digits (feature 051) */
/* A section is a card; its legend is the header of the card (feature 029). */
.b-form__section {
  border: 0; min-width: 0; margin: 0 0 var(--space-5);
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 0 var(--space-5) var(--space-1);
}
.b-form__section > legend {
  float: left; /* inside the box, like Bootstrap's reboot; the next element clears it */
  font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text);
  padding: var(--space-4) var(--space-5); margin: 0 calc(-1 * var(--space-5)) var(--space-5);
  width: calc(100% + 2 * var(--space-5)); border-bottom: 1px solid var(--color-border);
}
.b-form__section > legend ~ * { clear: left; } /* all of them: the first ones can be hidden inputs */
/* The grid of the work and of the copy (feature 057). Clearing the legend cancels the negative margin of the row,
   so the first fields would keep the gutter on top of the space below the legend. */
.b-form__section > .row { margin-bottom: var(--field-gap); }
.b-form__section > legend:has(+ .row.g-3) { margin-bottom: calc(var(--space-5) - 1rem); }
/* The title of a section that is not a fieldset (a heading over a fragment of fields). */
.b-form__heading {
  font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-primary);
  padding-bottom: var(--space-2); margin: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--color-border);
}
.b-form > .b-form__heading:first-child, .b-form__heading:first-of-type { margin-top: 0; }
.b-form__field { margin-bottom: var(--field-gap); }
.b-form__row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 768px) { .b-form__row { grid-template-columns: 1fr 1fr; } }
/* A group of radios or check boxes: its title looks like the label of a field. */
.b-form__group { border: 0; padding: 0; margin: 0 0 var(--field-gap); min-width: 0; }
.b-form__group > legend { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.b-form .b-action-footer { margin-top: 0; }

/* Record: the name with its situation and the actions, then the data in a grid. */
.b-record__header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4);
}
.b-record__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.b-record__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.b-record__data {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.b-record__data dt { font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.b-record__data dd { margin: 0; }
@media (max-width: 767.98px) {
  /* The main action (last in the markup, rightmost on desktops) comes first, full width. */
  .b-record__actions { margin-left: 0; width: 100%; flex-direction: column-reverse; }
  .b-record__actions .btn { width: 100%; }
  .b-record__data { grid-template-columns: 1fr; gap: 0; padding: var(--space-4); }
  .b-record__data dd { margin-bottom: var(--space-3); }
}

/* Record in a card: the profile card stacks each label above its value (feature 029). */
.b-card .b-record__data { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.b-record__data--stacked { grid-template-columns: 1fr; gap: 0; }
.b-record__data--stacked dt { font-size: var(--text-sm); }
.b-record__data--stacked dd { margin-bottom: var(--space-3); }
.b-record__profile { display: flex; align-items: center; gap: var(--space-4); }
.b-record__profile .b-record__title { font-size: var(--text-xl); }
/* A line under the name of the record: the Sabbath School class of a person (feature 044). */
.b-record__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* =====================================================================
   Card (feature 029): white, no border, soft shadow; a header with the title and the actions,
   a body, an optional footer. "__flush" holds a table that touches the edges.
   ===================================================================== */
.b-card {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5); min-width: 0;
}
.b-card__header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.b-card__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text); margin: 0; }
.b-card__header > .b-card__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.b-card__body { padding: var(--space-5); }
.b-card__body > :last-child { margin-bottom: 0; }
.b-card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
/* The list toolbar as the header of the card. */
.b-card__header.b-toolbar { align-items: flex-start; margin-bottom: 0; }
/* A table against the edges of the card; any text around it keeps the padding. */
.b-card__flush > :not(table) { margin: 0; padding: var(--space-4) var(--space-5); }
.b-card__flush > table { margin: 0; }
.b-card__flush > table > :not(caption) > * > :first-child { padding-left: var(--space-5); }
.b-card__flush > table > :not(caption) > * > :last-child { padding-right: var(--space-5); }
/* A wide table scrolls inside the card, never the page; on tablets the edge padding is smaller. */
.b-card__flush { overflow-x: auto; }
@media (max-width: 1199.98px) {
  .b-card__flush > table > :not(caption) > * > :first-child { padding-left: var(--space-4); }
  .b-card__flush > table > :not(caption) > * > :last-child { padding-right: var(--space-4); }
}
.b-card .table > thead th { background: var(--gray-50); }
/* A list in a card: rows divided by a line, against the edges (the works, the loans to choose). */
.b-card__list { list-style: none; margin: 0; padding: 0; }
.b-card__flush > .b-card__list { padding: 0; }
.b-card__list > li { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); }
.b-card__list > li:last-child { border-bottom: 0; }
.b-card__list > .b-work { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: none; }
.b-card__list > .b-work:last-child { border-bottom: 0; }
/* The pages of a list (web/pager.html, features 033 and 034): the range on the left, the buttons on the right. */
.b-pager { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; }

/* Steps of a workflow (the lending screen, feature 039): numbered, the current one highlighted, the done ones with a
   check. Text and number, never colour alone (DESIGN-SYSTEM §1.5). */
.b-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); padding: 0; }
.b-steps__item { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.b-steps__number {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-border-input); background: var(--color-surface); font-size: var(--text-sm);
}
.b-steps__item--current { color: var(--color-primary); }
.b-steps__item--current .b-steps__number { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.b-steps__item--done .b-steps__number { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.b-lending-review__name { font-size: var(--text-lg); }
.b-lending-review__items { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.b-lending-review__due { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); white-space: nowrap; }
/* On phones the old and the new due date of a renewal may not fit in one line. */
@media (max-width: 575.98px) { .b-lending-review__due { flex-wrap: wrap; white-space: normal; } }

/* A box inside a card (the chosen person on the lending screen). */
.b-panel { background: var(--gray-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
/* The sticky footer inside a card (the lending screen) takes the colour of the card. */
.b-card .b-action-footer { background: var(--color-surface); }
/* A card alone in a grid column: the gutter of the row already separates it. */
[class*="col"] > .b-card:only-child { margin-bottom: 0; }
/* A Bootstrap row used as a card (the filters of the reports and of the audit). */
.b-card.row { --bs-gutter-x: var(--space-3); }
.b-card .table > tbody > tr:last-child > * { border-bottom: 0; }
details.b-card > summary { list-style: none; cursor: pointer; }
details.b-card > summary::-webkit-details-marker { display: none; }
details.b-card > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; transition: transform var(--transition); }
details.b-card[open] > summary::after { transform: rotate(180deg); }
details.b-card:not([open]) > summary { border-bottom: 0; }
@media (max-width: 767.98px) {
  .b-card__header, .b-card__body, .b-card__footer, .b-card__flush > :not(table), .b-card__list > li { padding-left: var(--space-4); padding-right: var(--space-4); }
  .b-form__section { padding: 0 var(--space-4) var(--space-1); }
  .b-card__header.b-toolbar { align-items: stretch; } /* the main action full width, as outside a card */
  .b-form__section > legend { padding: var(--space-3) var(--space-4); margin: 0 calc(-1 * var(--space-4)) var(--space-4); width: calc(100% + 2 * var(--space-4)); }
  /* The rows of a responsive table are already cards: inside a card they get a margin. */
  .b-card__flush > table.b-responsive-table { padding: var(--space-3) var(--space-3) 0; }
  .b-card__flush > table.b-responsive-table > :not(caption) > * > * { padding-left: 0; padding-right: 0; }
}

/* A column that is not essential (DESIGN-SYSTEM §6.3): hidden on tablets, where the table sits next to the
   rail and has no room for it; shown in the cards of the phone and on desktops. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .b-responsive-table .b-col-secondary { display: none; }
}

/* Photos of a copy (feature 063): one slot for each photo, side by side while they fit. */
.b-photo-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.b-photo-slot { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.b-photo-slot__title { margin: 0; font-size: 1rem; font-weight: 600; }
.b-photo-slot__frame { display: flex; align-items: center; justify-content: center; height: 14rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-border); }
.b-photo-slot__frame--empty { flex-direction: column; gap: var(--space-2); color: var(--color-text-muted); }
.b-photo-slot__frame--empty .bi { font-size: 2rem; }
.b-photo-slot__image { max-width: 100%; max-height: 100%; object-fit: contain; }
.b-photo-slot__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; }
.b-photo-slot__input:focus-visible + .btn { outline: 2px solid currentColor; outline-offset: 2px; }
.b-photo-slot__sending { display: none; }
.htmx-request > .b-photo-slot__sending { display: inline; }
.htmx-request > .btn { opacity: 0.6; pointer-events: none; }