@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: Inter, system-ui, sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
  }
}

@layer utilities {
  .pt-safe { padding-top: env(safe-area-inset-top); }
  .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
  .pl-safe { padding-left: env(safe-area-inset-left); }
  .pr-safe { padding-right: env(safe-area-inset-right); }
  /* Fixed elements that sit flush above the bottom tab bar: 56px is the
     tab link's min-height, the inset is the nav's pb-safe. */
  .bottom-above-tabs { bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* Select mode (PC-130). body[data-select-active] is set by
   library_select_controller while Select mode is on: the batch action
   bar replaces the bottom tab bar, row checkboxes are revealed, and
   selected rows get the amber left-border + tint treatment. The
   attribute is removed entirely when inactive. No slide animation —
   the bar appears/disappears instantly (prefers-reduced-motion safe). */
.bf-batch-action-bar { display: none; }
body[data-select-active] .bf-batch-action-bar { display: block; }
body[data-select-active] [data-test-id="bottom-tab-bar"] { display: none; }

.bf-select-checkbox { display: none; }
[data-select-active] .bf-select-checkbox { display: inline-block; }

/* PC-192: the mockup's amber check-square (library.jsx). A native
   <input type="checkbox"> restyled with appearance:none rather than a
   role=checkbox span — Playwright's .check() needs a real control, and the
   native element keeps the keyboard/AT model for free. :indeterminate is
   driven by the select-all box when only some of the page's rows are
   selected. */
.bf-select-checkbox {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 6px;
  border: 2px solid #D4C9B5; /* bf-dividerDeep */
  background: transparent;
  cursor: pointer;
}
.bf-select-checkbox:checked {
  border-color: #854F0B; /* bf-amber */
  background-color: #854F0B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
}
.bf-select-checkbox:indeterminate {
  border-color: #854F0B; /* bf-amber */
  background-color: #854F0B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
}

/* PC-192: the Select-all header row, revealed with the rest of Select mode.
   Mirrors .bf-batch-action-bar's hide/show pair. */
.bf-select-header { display: none; }
[data-select-active] .bf-select-header { display: flex; }

/* PC-192: the Select pill becomes "Done" in Select mode — amber outline per
   the mockup, and a CSS-only label swap so there is no JS text mutation for a
   Turbo snapshot to restore out of sync. */
[data-select-active] [data-test-id="library-select-pill"] {
  background-color: transparent;
  color: #854F0B; /* bf-amber */
  border: 1px solid #854F0B;
}
[data-select-active] [data-library-select-target="selectLabel"] { display: none; }
[data-library-select-target="doneLabel"] { display: none; }
[data-select-active] [data-library-select-target="doneLabel"] { display: inline; }

[data-select-active] [data-book-row][data-selected="true"] {
  border-left: 2px solid #854F0B; /* bf-amber */
  background-color: rgba(133, 79, 11, 0.08);
}

@keyframes bf-sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes bf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bf-slide-in-from-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .bf-anim-sheet-slide-up      { animation: bf-sheet-slide-up 220ms cubic-bezier(0.32, 0.72, 0, 1); }
  .bf-anim-fade-in             { animation: bf-fade-in 160ms ease-out; }
  .bf-anim-slide-in-from-right { animation: bf-slide-in-from-right 220ms cubic-bezier(0.32, 0.72, 0, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .bf-anim-sheet-slide-up,
  .bf-anim-fade-in,
  .bf-anim-slide-in-from-right { animation: bf-fade-in 120ms ease-out; }
}

/* PC-185 (folds in PC-152): barcode scanning is a phone feature (rear,
   autofocus camera). On pointer-fine devices the front webcam can't focus
   on a barcode, so hide every scan affordance and show an explanatory note.
   Plain classes so they always compile regardless of content scanning. */
.scan-affordance { display: none; }
.scan-desktop-note { display: block; }

@media (pointer: coarse) {
  .scan-affordance { display: flex; }
  .scan-desktop-note { display: none; }
}