/*
 * Moving Box Tracker — custom style layer.
 *
 * Loaded after the vendored, unmodified bootstrap.min.css. It supplies only the
 * pieces Bootstrap does not ship — the fixed bottom navigation "dock", the small
 * status dot, the avatar, and a handful of utility helpers — plus the few button
 * and form-control size variants the UI relies on. Keeping these here (rather
 * than editing the vendored Bootstrap) means Bootstrap can be re-vendored by
 * dropping in a new bootstrap.min.css with no merge.
 *
 * No build step: this file is hand-authored and served directly from /static.
 */

/* ── App shell ─────────────────────────────────────────────────────────────
 * The UI is a single, centered mobile column. Content clears the sticky navbar
 * at the top and the fixed dock at the bottom.
 */
.app-container {
  max-width: 28rem;
  margin-inline: auto;
}

/* Reserve space at the bottom of chromed pages so the fixed dock never covers
 * the last of the content. */
body.has-dock {
  padding-bottom: 5rem;
}

/* ── Bottom dock (fixed tab bar) ───────────────────────────────────────────
 * Four equal-width primary sections, icon over label, fixed to the viewport
 * bottom. Replaces the daisyUI `dock` component.
 */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  height: 4rem;
  background-color: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

.dock > a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.25rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-size: 0.75rem;
}

.dock > a:hover {
  color: var(--bs-body-color);
}

.dock > a.dock-active {
  color: var(--bs-primary);
}

.dock-label {
  line-height: 1;
}

/* ── Status dot ────────────────────────────────────────────────────────────
 * A small filled circle used to signal a box's packing status. Colour comes
 * from a Bootstrap text-* colour on the element (e.g. `text-success`).
 */
.status {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
}

/* ── Avatar ────────────────────────────────────────────────────────────────
 * Circular identity badge. The placeholder variant centers initials over a
 * caller-supplied background colour.
 */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: #fff;
  font-weight: 600;
}

/* ── Button size / shape variants Bootstrap lacks ──────────────────────────*/

/* Transparent button used for icon-only secondary actions. */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--bs-body-color);
}

.btn-ghost:hover {
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
}

/* Extra-small button, a notch below .btn-sm. */
.btn-xs {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.4rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: 0.25rem;
}

/* Square and circular icon buttons keep equal width/height. */
.btn-square {
  aspect-ratio: 1 / 1;
  padding-inline: 0;
}

.btn-circle {
  aspect-ratio: 1 / 1;
  padding-inline: 0;
  border-radius: 50%;
}

/* ── Form-control size / numeric variants ──────────────────────────────────*/

/* Extra-small text input to match the compact dimension fields. */
.form-control-xs,
.form-select-xs {
  min-height: calc(1.5em + 0.25rem + 2px);
  padding: 0.125rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}

/* ── Badge size variant ────────────────────────────────────────────────────*/
.badge-sm {
  padding: 0.2em 0.45em;
  font-size: 0.7em;
}

/* ── Box attribute colours ─────────────────────────────────────────────────
 * Fragile and heavy indicators appear on list cards, detail, edit, and stats.
 * Keep their colours semantic and consistent across every icon usage.
 */
.box-attr-fragile {
  color: #7c3aed;
}

.box-attr-heavy {
  color: #dc2626;
}

/* ── Small typographic / layout helpers ────────────────────────────────────*/

/* Tabular figures keep numeric columns (box numbers, dimensions) aligned. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Brand/display heading. The custom display typeface was dropped with the rest
 * of the web fonts; this keeps the heading distinct using the system stack. */
.display-font {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sub-small text sizes Bootstrap does not provide as utilities. */
.text-xs {
  font-size: 0.75rem;
}

.text-2xs {
  font-size: 0.625rem;
}

/* Allow a flex child to shrink below its content width so siblings can truncate. */
.min-w-0 {
  min-width: 0;
}

/* Fixed narrow width for the inline dimension inputs (L × W × H). */
.w-dim {
  width: 4rem;
}

/* Subtle press feedback on tappable cards. */
.press {
  transition: transform 0.06s ease;
}

.press:active {
  transform: scale(0.99);
}

/* ── Native <progress> bar ─────────────────────────────────────────────────
 * Bootstrap styles only its div-based .progress; this styles the native
 * <progress> element used on the Stats screen, where value/max come straight
 * from the view model (no precomputed percentage needed).
 */
progress.progressbar {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

progress.progressbar::-webkit-progress-bar {
  background-color: var(--bs-secondary-bg);
  border-radius: 0.25rem;
}

progress.progressbar::-webkit-progress-value {
  background-color: var(--bs-success);
  border-radius: 0.25rem;
}

progress.progressbar::-moz-progress-bar {
  background-color: var(--bs-success);
  border-radius: 0.25rem;
}