/*
 * MyPigeons.net design system - the one place the look is defined.
 *
 * Loaded after bootstrap.min.css and mypigeons.css, so everything here wins.
 * mypigeons.css still holds page layouts (the pedigree tree, the pigeon list
 * grid, the tracker map...); this file holds the shared visual language:
 *
 *   1. Tokens       colour, type, radius, elevation (light + dark)
 *   2. Bootstrap    its own variables pointed at the tokens
 *   3. Components   buttons, fields, cards, tables, badges, alerts, lists,
 *                   menus, modals, tabs - one look each, on every page
 *   4. App pieces   header, sidebar, stat tiles, dashboard band, photos
 *
 * Rules of thumb when adding UI:
 *   - corners: 8px for controls, 12px for containers, 16px for big panels,
 *     fully round only for tags/chips and avatars;
 *   - one filled primary button per area; everything else is .btn-outline-secondary
 *     (the neutral white button) or .btn-link; red only for destructive actions;
 *   - colours come from the tokens below, not new hex values.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ 1. tokens */

:root,
[data-bs-theme="light"] {
  --ds-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ds-primary: #2456d1;
  --ds-primary-rgb: 36, 86, 209;
  --ds-primary-hover: #1c46ad;
  --ds-primary-soft: #eaf0fc;
  --ds-primary-text: #1d47ad;
  --ds-primary-text-rgb: 29, 71, 173;
  --ds-primary-fill: #2456d1;
  --ds-primary-fill-hover: #1c46ad;
  --ds-navy: #0f2244;
  --ds-navy-2: #183463;
  --ds-band: #dbe5f1;
  --ds-cock: #3a69a8;
  --ds-cock-soft: rgba(58, 105, 168, 0.14);
  --ds-hen: #b8517f;
  --ds-hen-soft: rgba(184, 81, 127, 0.14);

  --ds-ink: #1f2329;
  --ds-ink-2: #454a52;
  --ds-ink-3: #5c6168;

  --ds-surface: #faf9f6;
  --ds-surface-2: #f4f3ef;
  --ds-surface-3: #ebe9e3;
  --ds-page: #e8e6df;
  --ds-line: #d6d3ca;
  --ds-line-strong: #c4c0b6;

  --ds-success: #167a4e;
  --ds-success-soft: #e5f4ec;
  --ds-warning: #9a5b00;
  --ds-warning-soft: #fdf1dc;
  --ds-danger: #c2343f;
  --ds-danger-soft: #fceaec;
  --ds-danger-fill: #c2343f;
  --ds-info: #1d5fa8;
  --ds-info-soft: #e7f0fb;

  --ds-r-sm: 8px;
  --ds-r-md: 12px;
  --ds-r-lg: 16px;

  --ds-shadow-1: 0 1px 2px rgba(40, 35, 25, 0.06);
  --ds-shadow-2: 0 6px 16px rgba(15, 23, 42, 0.11), 0 2px 4px rgba(15, 23, 42, 0.07);
  --ds-shadow-3: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
  --ds-focus: 0 0 0 3px rgba(var(--ds-primary-rgb), 0.22);

  --ds-photo-bg: #ebe9e3;
  --bs-body-bg-rgb: 250, 249, 246;
  --bs-success-rgb: 22, 122, 78;
  --bs-danger-rgb: 194, 52, 63;
  --bs-tertiary-bg-rgb: 244, 243, 239;
  --bs-secondary-bg-rgb: 235, 233, 227;
  --bs-body-color-rgb: 31, 35, 41;
  --bs-emphasis-color-rgb: 31, 35, 41;
}

[data-bs-theme="dark"] {
  --ds-primary: #4f7ff0;
  --ds-primary-rgb: 79, 127, 240;
  --ds-primary-hover: #6a93f3;
  --ds-primary-soft: rgba(79, 127, 240, 0.16);
  --ds-primary-text: #9dbbfa;
  --ds-primary-text-rgb: 157, 187, 250;
  --ds-primary-fill: #3567d6;
  --ds-primary-fill-hover: #2c5bc4;
  --ds-navy: #0c1830;
  --ds-navy-2: #15294d;
  --ds-band: #233247;
  --ds-cock: #8fb3d9;
  --ds-cock-soft: rgba(143, 179, 217, 0.2);
  --ds-hen: #dc94b6;
  --ds-hen-soft: rgba(220, 148, 182, 0.2);

  --ds-ink: #d9dce1;
  --ds-ink-2: #aab0b9;
  --ds-ink-3: #9aa1ab;

  --ds-surface: #1e2228;
  --ds-surface-2: #23272e;
  --ds-surface-3: #2a2f37;
  --ds-page: #121418;
  --ds-line: #343a43;
  --ds-line-strong: #3d434c;

  --ds-success: #5cc995;
  --ds-success-soft: rgba(92, 201, 149, 0.14);
  --ds-warning: #f0b45a;
  --ds-warning-soft: rgba(240, 180, 90, 0.14);
  --ds-danger: #f2828b;
  --ds-danger-soft: rgba(242, 130, 139, 0.14);
  --ds-danger-fill: #c93a46;
  --ds-info: #8bb8f0;
  --ds-info-soft: rgba(139, 184, 240, 0.14);

  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ds-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45);
  --ds-shadow-3: 0 18px 44px rgba(0, 0, 0, 0.6);

  --ds-photo-bg: #232933;
  --bs-body-bg-rgb: 30, 34, 40;
  --bs-success-rgb: 92, 201, 149;
  --bs-danger-rgb: 242, 130, 139;
  --bs-tertiary-bg-rgb: 35, 39, 46;
  --bs-secondary-bg-rgb: 42, 47, 55;
  --bs-body-color-rgb: 217, 220, 225;
  --bs-emphasis-color-rgb: 217, 220, 225;
}

/* --------------------------------------------------------------- 2. bootstrap */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--ds-font);
  --bs-body-font-family: var(--ds-font);
  --bs-primary: var(--ds-primary);
  --bs-primary-rgb: var(--ds-primary-rgb);
  --bs-link-color: var(--ds-primary-text);
  --bs-link-color-rgb: var(--ds-primary-text-rgb);
  --bs-link-hover-color: var(--ds-primary-hover);
  --bs-body-color: var(--ds-ink);
  --bs-emphasis-color: var(--ds-ink);
  --bs-secondary-color: var(--ds-ink-2);
  --bs-body-bg: var(--ds-surface);
  --bs-secondary-bg: var(--ds-surface-3);
  --bs-tertiary-bg: var(--ds-surface-2);
  --bs-border-color: var(--ds-line);
  --bs-border-radius: var(--ds-r-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--ds-r-md);
  --bs-border-radius-xl: var(--ds-r-lg);
  --bs-box-shadow-sm: var(--ds-shadow-1);
  --bs-box-shadow: var(--ds-shadow-2);
  --bs-focus-ring-color: rgba(var(--ds-primary-rgb), 0.22);

  --app-bg: var(--ds-page);
  --app-ring: var(--ds-line);
  --app-shadow: var(--ds-shadow-1);
  --app-shadow-hover: var(--ds-shadow-2);
  --app-accent-text: var(--ds-primary-text);
  --app-cock: var(--ds-cock);
  --app-cock-bg: var(--ds-cock-soft);
  --app-hen: var(--ds-hen);
  --app-hen-bg: var(--ds-hen-soft);
  --app-control-border: var(--ds-line-strong);
  --app-field-border: var(--ds-line-strong);
}

body {
  font-family: var(--ds-font);
  background: var(--ds-page);
  color: var(--ds-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 650;
  letter-spacing: -0.015em;
}

.text-muted,
.text-secondary {
  color: var(--ds-ink-2) !important;
}

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

::selection {
  background: rgba(var(--ds-primary-rgb), 0.18);
}

/* -------------------------------------------------------------- 3. components */

/* Buttons. One shape: 8px corners, 600 weight, icon and label on one line. */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 0.95rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-border-radius: var(--ds-r-sm);
  --bs-btn-focus-box-shadow: var(--ds-focus);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  letter-spacing: -0.005em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-sm {
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-padding-y: 0.32rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-border-radius: 7px;
  gap: 0.35rem;
}

.btn-lg {
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-border-radius: 10px;
}

.btn.w-100,
.btn.d-block {
  display: flex;
}

.btn-primary {
  --bs-btn-bg: var(--ds-primary-fill);
  --bs-btn-border-color: var(--ds-primary);
  --bs-btn-hover-bg: var(--ds-primary-fill-hover);
  --bs-btn-hover-border-color: var(--ds-primary-hover);
  --bs-btn-active-bg: var(--ds-primary-fill-hover);
  --bs-btn-active-border-color: var(--ds-primary-hover);
  --bs-btn-disabled-bg: var(--ds-primary-fill);
  --bs-btn-disabled-border-color: var(--ds-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-outline-primary {
  --bs-btn-color: var(--ds-primary-text);
  --bs-btn-border-color: rgba(var(--ds-primary-rgb), 0.45);
  --bs-btn-hover-color: var(--ds-primary-text);
  --bs-btn-hover-bg: var(--ds-primary-soft);
  --bs-btn-hover-border-color: var(--ds-primary);
  --bs-btn-active-color: var(--ds-primary-text);
  --bs-btn-active-bg: var(--ds-primary-soft);
  --bs-btn-active-border-color: var(--ds-primary);
  background: var(--ds-surface);
}

/* The neutral button: white, a quiet border, dark text. Secondary, light and
   their outline versions all become this, so "the other button" looks the
   same everywhere. */
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-outline-light,
.btn-outline-dark {
  --bs-btn-color: var(--ds-ink);
  --bs-btn-bg: var(--ds-surface);
  --bs-btn-border-color: var(--ds-line-strong);
  --bs-btn-hover-color: var(--ds-ink);
  --bs-btn-hover-bg: var(--ds-surface-2);
  --bs-btn-hover-border-color: var(--ds-line-strong);
  --bs-btn-active-color: var(--ds-ink);
  --bs-btn-active-bg: var(--ds-surface-3);
  --bs-btn-active-border-color: var(--ds-line-strong);
  --bs-btn-disabled-color: var(--ds-ink-3);
  --bs-btn-disabled-bg: var(--ds-surface);
  --bs-btn-disabled-border-color: var(--ds-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.btn-danger {
  --bs-btn-bg: var(--ds-danger);
  --bs-btn-border-color: var(--ds-danger);
  --bs-btn-hover-bg: #a52a34;
  --bs-btn-hover-border-color: #a52a34;
}

.btn-outline-danger {
  --bs-btn-color: var(--ds-danger);
  --bs-btn-border-color: rgba(194, 52, 63, 0.4);
  --bs-btn-hover-color: var(--ds-danger);
  --bs-btn-hover-bg: var(--ds-danger-soft);
  --bs-btn-hover-border-color: var(--ds-danger);
  --bs-btn-active-color: var(--ds-danger);
  --bs-btn-active-bg: var(--ds-danger-soft);
  background: var(--ds-surface);
}

.btn-success {
  --bs-btn-bg: var(--ds-success);
  --bs-btn-border-color: var(--ds-success);
}

.btn-link {
  --bs-btn-color: var(--ds-primary-text);
  --bs-btn-hover-color: var(--ds-primary-hover);
  font-weight: 600;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-close {
  border-radius: var(--ds-r-sm);
  opacity: 0.55;
}

.btn-close:focus {
  box-shadow: var(--ds-focus);
}

/* Fields. */
.form-control,
.form-select {
  border-color: var(--ds-line-strong);
  border-radius: var(--ds-r-sm);
  min-height: 40px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background-color: var(--ds-surface);
  color: var(--ds-ink);
}

.form-control-sm,
.form-select-sm {
  min-height: 34px;
  border-radius: 7px;
}

textarea.form-control {
  min-height: 80px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus);
}

.form-check-input:checked {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.form-label,
.col-form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ds-ink);
  margin-bottom: 0.35rem;
}

/* Plain <label>s above a field (many forms never got .form-label) look the
   same as the ones that did. Labels wrapping their own control, buttons and
   checkbox labels keep their own look. */
main label:not(.form-check-label):not(.btn):not(.form-label):not(:has(input, select, textarea)),
.modal label:not(.form-check-label):not(.btn):not(.form-label):not(:has(input, select, textarea)) {
  display: inline-block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ds-ink);
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--ds-ink-3);
}

.input-group-text {
  background: var(--ds-surface-2);
  border-color: var(--ds-line-strong);
  color: var(--ds-ink-3);
}

.input-group > :first-child {
  border-top-left-radius: var(--ds-r-sm);
  border-bottom-left-radius: var(--ds-r-sm);
}

.input-group > :last-child {
  border-top-right-radius: var(--ds-r-sm);
  border-bottom-right-radius: var(--ds-r-sm);
}

/* Cards: 12px corners, a hairline edge and a soft shadow. Headers are plain
   titles on the card, not a grey band. */
.card {
  --bs-card-border-radius: var(--ds-r-md);
  --bs-card-inner-border-radius: calc(var(--ds-r-md) - 1px);
  --bs-card-border-color: var(--ds-line);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 0.85rem;
  --bs-card-cap-padding-x: 1.1rem;
  --bs-card-spacer-x: 1.1rem;
  --bs-card-spacer-y: 1rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-1);
  background: var(--ds-surface);
}

.card.border-0 {
  border: 1px solid var(--ds-line) !important;
}

.card .card {
  box-shadow: none;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ds-line);
  font-weight: 650;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-header .fas,
.card-header .fa-solid {
  color: var(--ds-ink-2);
}

.card-footer {
  background: var(--ds-surface-2);
  border-top: 1px solid var(--ds-line);
}

.card-title {
  font-weight: 650;
}

.shadow-sm {
  box-shadow: var(--ds-shadow-1) !important;
}

/* Tables: always a rounded, bordered panel with a quiet header row, the
   same on every page whether or not it sits in a card. */
main .table {
  --bs-table-bg: var(--ds-surface);
  --bs-table-striped-bg: var(--ds-surface-2);
  --bs-table-hover-bg: var(--ds-surface-2);
  --bs-table-border-color: var(--ds-line);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
  font-size: 0.9375rem;
}

main .table > :not(caption) > * > * {
  padding: 0.7rem 0.9rem;
  border-width: 0 0 1px;
  border-color: var(--ds-line);
  vertical-align: middle;
}

main .table > tbody > tr:last-child > *,
main .table > tfoot > tr:last-child > * {
  border-bottom-width: 0;
}

main .table > thead > tr > *,
main .table > thead > tr > th {
  background: var(--ds-surface-2);
  color: var(--ds-ink-2);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
}

main .table-bordered > :not(caption) > * {
  border-width: 0;
}

main .table-bordered > :not(caption) > * > * {
  border-left-width: 0;
  border-right-width: 0;
}

main .table-responsive {
  border-radius: var(--ds-r-md);
}

main .table-responsive > .table {
  margin-bottom: 0;
}

.card-body > .table:last-child,
.card-body > .table-responsive:last-child > .table {
  margin-bottom: 0;
}

/* Badges: small status labels are soft-tinted rounded rectangles; pills stay
   for tags and counts. */
.badge {
  font-weight: 650;
  letter-spacing: 0.01em;
  border-radius: 6px;
  padding: 0.32em 0.6em;
}

.badge.rounded-pill {
  border-radius: 999px;
}

.badge.text-bg-primary,
.badge.bg-primary {
  background-color: var(--ds-primary-soft) !important;
  color: var(--ds-primary-text) !important;
}

.badge.text-bg-success,
.badge.bg-success {
  background-color: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}

.badge.text-bg-danger,
.badge.bg-danger {
  background-color: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

.badge.text-bg-warning,
.badge.bg-warning {
  background-color: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
}

.badge.text-bg-info,
.badge.bg-info {
  background-color: var(--ds-info-soft) !important;
  color: var(--ds-info) !important;
}

.badge.text-bg-secondary,
.badge.bg-secondary,
.badge.text-bg-light,
.badge.bg-light {
  background-color: var(--ds-surface-3) !important;
  color: var(--ds-ink-2) !important;
}

/* Counter badges on the header bell stay solid red so they read at a glance. */
.app-header__badge {
  background: var(--ds-danger-fill);
}

/* Alerts: a tinted panel with a matching edge, no saturated fills. */
.alert {
  border-radius: var(--ds-r-md);
  border: 1px solid transparent;
  font-size: 0.9375rem;
}

.alert-info,
.alert-primary {
  --bs-alert-bg: var(--ds-info-soft);
  --bs-alert-color: var(--ds-ink);
  --bs-alert-border-color: rgba(29, 95, 168, 0.18);
  --bs-alert-link-color: var(--ds-info);
}

.alert-success {
  --bs-alert-bg: var(--ds-success-soft);
  --bs-alert-color: var(--ds-ink);
  --bs-alert-border-color: rgba(22, 122, 78, 0.2);
  --bs-alert-link-color: var(--ds-success);
}

.alert-warning {
  --bs-alert-bg: var(--ds-warning-soft);
  --bs-alert-color: var(--ds-ink);
  --bs-alert-border-color: rgba(154, 91, 0, 0.2);
  --bs-alert-link-color: var(--ds-warning);
}

.alert-danger {
  --bs-alert-bg: var(--ds-danger-soft);
  --bs-alert-color: var(--ds-ink);
  --bs-alert-border-color: rgba(194, 52, 63, 0.2);
  --bs-alert-link-color: var(--ds-danger);
}

/* List groups inside cards run edge to edge; standalone ones are panels. */
.list-group {
  --bs-list-group-border-color: var(--ds-line);
  --bs-list-group-border-radius: var(--ds-r-md);
  --bs-list-group-action-hover-bg: var(--ds-surface-2);
  --bs-list-group-action-active-bg: var(--ds-surface-3);
  --bs-list-group-bg: var(--ds-surface);
}

/* Menus. */
.dropdown-menu {
  --bs-dropdown-border-radius: var(--ds-r-md);
  --bs-dropdown-border-color: var(--ds-line);
  --bs-dropdown-box-shadow: var(--ds-shadow-3);
  --bs-dropdown-link-hover-bg: var(--ds-surface-2);
  --bs-dropdown-link-active-bg: var(--ds-primary-soft);
  --bs-dropdown-link-active-color: var(--ds-primary-text);
  --bs-dropdown-item-padding-y: 0.45rem;
  --bs-dropdown-font-size: 0.9375rem;
  padding: 0.35rem;
  box-shadow: var(--ds-shadow-3);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 7px;
  cursor: pointer;
}

.dropdown-item .fas,
.dropdown-item .fa-solid {
  color: var(--ds-ink-2);
}

.dropdown-item.text-danger .fas {
  color: currentColor;
}

/* Modals. */
.modal {
  --bs-modal-border-radius: var(--ds-r-lg);
  --bs-modal-inner-border-radius: calc(var(--ds-r-lg) - 1px);
  --bs-modal-border-color: var(--ds-line);
  --bs-modal-box-shadow: var(--ds-shadow-3);
  --bs-modal-header-border-color: var(--ds-line);
  --bs-modal-footer-border-color: var(--ds-line);
}

.modal-content {
  box-shadow: var(--ds-shadow-3);
}

.modal-title {
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-footer {
  justify-content: flex-end;
  background: var(--ds-surface-2);
}

/* Tabs: a quiet segmented control, the active tab a white raised pill. The
   heavy white frame around the track is gone. */
.nav-underline {
  --tab-track: rgba(15, 23, 42, 0.06);
  --tab-active-bg: var(--ds-surface);
  box-shadow: none;
  margin: 0 0 1.25rem;
  border: 1px solid var(--ds-line);
}

.nav-underline .nav-link {
  color: var(--ds-ink-2);
  font-weight: 600;
}

.nav-underline .nav-link:hover,
.nav-underline .nav-link:focus-visible {
  color: var(--ds-ink);
  background: rgba(15, 23, 42, 0.04);
}

.nav-underline .nav-link.active,
.nav-underline .nav-link.active:hover {
  color: var(--ds-primary-text);
  background: var(--tab-active-bg);
  box-shadow: var(--ds-shadow-1), 0 0 0 1px var(--ds-line);
}

.nav-underline .nav-link .badge {
  background: rgba(15, 23, 42, 0.07) !important;
  color: var(--ds-ink-2) !important;
}

.nav-underline .nav-link.active .badge {
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary-text) !important;
}

[data-bs-theme="dark"] .nav-underline {
  --tab-track: var(--ds-surface-2);
  --tab-active-bg: var(--ds-surface-3);
}

/* Progress bars. */
.progress {
  border-radius: 999px;
  background: var(--ds-surface-3);
}

/* Toasts. */
.toast {
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-3);
}

/* --------------------------------------------------------------- 4. app pieces */

/* Header and sidebar. */
.app-header {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.app-header__title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-header__add {
  background: var(--ds-primary-fill);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-weight: 600;
}

.app-header__add:hover {
  background: var(--ds-primary-fill-hover);
  color: #fff;
}

#navDrawer.offcanvas {
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-line);
}

#navDrawer .list-group-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  color: var(--ds-ink-2);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

#navDrawer .list-group-item i {
  color: var(--ds-ink-2);
  font-size: 1rem;
}

#navDrawer .list-group-item:hover:not(.active) {
  background: var(--ds-surface-2);
  color: var(--ds-ink);
}

#navDrawer .list-group-item.active {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-text);
  font-weight: 650;
}

#navDrawer .list-group-item.active i {
  color: var(--ds-primary);
}

#navDrawer .list-group-item .badge {
  margin-left: auto;
  background: var(--ds-surface-3) !important;
  color: var(--ds-ink-2) !important;
  font-weight: 600;
}

#navDrawer .nav-drawer__group {
  color: var(--ds-ink-3);
}

#navDrawer hr {
  border-color: var(--ds-line);
  opacity: 1;
}

.bottom-tab-bar {
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-line);
}

.bottom-tab-bar__item i {
  font-size: 1.35rem;
}

.bottom-tab-bar__item.active {
  color: var(--ds-primary-text);
}

footer {
  background: transparent;
  border-top: 1px solid var(--ds-line);
}

/* Page notes. */
.page-intro {
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-primary);
  box-shadow: none;
}

.feature-note {
  background: linear-gradient(0deg, var(--ds-primary-soft), var(--ds-primary-soft)), var(--ds-surface);
  border-color: rgba(var(--ds-primary-rgb), 0.25);
}

/* Icon badges on stat tiles and card headers: one quiet tinted square
   instead of a different pastel circle per tile. */
.stat-icon-badge {
  border-radius: 10px;
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary) !important;
}

.stat-icon-badge-lg {
  border-radius: 16px;
}

/* Stat numbers read as numbers: tabular, tight, in ink rather than a colour
   per tile. */
.stat-tile-value,
.card .display-4,
.card .display-5,
.card h4.text-primary,
.card h4.text-success,
.card h4.text-secondary,
.card .fs-5.fw-bold {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Dashboard band: the brand's navy with a soft light, not a blue-to-purple
   gradient. */
.dash-hero {
  background: var(--ds-band);
  color: var(--ds-ink);
  border: 1px solid var(--ds-line);
  box-shadow: none;
  border-radius: var(--ds-r-lg);
}

.dash-hero__icon {
  color: var(--ds-primary);
  opacity: 0.18;
}

.dash-hero__link {
  color: var(--ds-primary-text);
}

.dash-hero__eyebrow {
  letter-spacing: 0.08em;
  color: var(--ds-ink-2);
  opacity: 1;
}

/* Photos of birds without one: the bird glyph on a quiet tile, the same in
   every size and theme. The SVG has no background of its own so the tile
   colour can follow the theme. */
img[src*="pigeon-placeholder.svg"] {
  background: var(--ds-photo-bg);
  object-fit: contain !important;
}

/* Dashboard quick actions: the same quiet icon square as the stat tiles. */
.dash-action-tile__icon {
  border-radius: 12px !important;
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary) !important;
}

/* Empty states sit in a card like the rest of the content, unless already inside one. */
.empty-state {
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 2rem 1.5rem;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-1);
}

.empty-state__text,
.empty-state__action {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.card .empty-state {
  margin: 1rem auto;
  padding: 1rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.empty-state__icon {
  border-radius: 18px;
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
}

/* Search pills and filter buttons share the field look. */
.search-pill__input,
.filter-button {
  border-radius: var(--ds-r-sm);
}

/* Containers from the page layouts snapped to the same two radii: 12px for
   panels and cards, 8px for the controls inside them. */
.entity-card,
.dash-action-tile,
.filter-drawer,
.tag-manager,
.pwa-install-banner,
.settings-nav,
.offspring-row {
  border-radius: var(--ds-r-md) !important;
}

.search-pill__input,
.filter-button,
.entity-card__media img,
.offspring-photo {
  border-radius: var(--ds-r-sm) !important;
}

.entity-card,
.dash-action-tile,
.list-toolbar {
  border: 1px solid var(--ds-line);
}

/* Bootstrap colours .text-primary with the button blue, which is too dim
   for text on the dark surface; text takes the text shade of it. */
.text-primary {
  color: rgba(var(--ds-primary-text-rgb), var(--bs-text-opacity, 1)) !important;
}

/* Sex icons carry text-primary / text-danger in the markup; here they take
   the muted sex colours instead of the full button blue and alert red. */
.fa-mars.text-primary {
  color: var(--app-cock) !important;
}

.fa-venus.text-danger {
  color: var(--app-hen) !important;
}

#pigeonList:not(.card-grid--compact) > .entity-card {
  border-radius: var(--ds-r-md) !important;
}

/* Focus that is visible on every control. */
:focus-visible {
  outline: 2px solid rgba(var(--ds-primary-rgb), 0.6);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
}

/* ---------- Help & feedback chat (/support/, /admin/support/{id}/) ----------
   One card: the thread scrolls, the composer stays at the bottom. The
   viewer's own messages are brand-blue bubbles on the right, the other
   side's are neutral on the left. */
.support-page { max-width: 760px; }
.support-page__intro { margin-bottom: 1rem; }

.support-chat {
  display: flex;
  flex-direction: column;
  height: max(360px, calc(100dvh - 300px));
  max-width: 760px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-1);
  overflow: hidden;
}
.support-chat__thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.support-chat__empty {
  margin: auto;
  max-width: 34ch;
  text-align: center;
  color: var(--ds-ink-3);
}
.support-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 85%;
}
.support-msg--mine {
  align-self: flex-end;
  align-items: flex-end;
}
.support-msg__bubble {
  padding: 0.55rem 0.85rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--ds-surface-3);
  color: var(--ds-ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.support-msg--mine .support-msg__bubble {
  border-radius: 14px 14px 4px 14px;
  background: var(--ds-primary-fill);
  color: #fff;
}
.support-msg__meta {
  margin-top: 0.2rem;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  color: var(--ds-ink-3);
}
.support-msg__meta a { color: var(--ds-primary-text); }
.support-msg__ua { cursor: help; }

.support-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--ds-line);
  background: var(--ds-surface-2);
}
.support-chat__composer textarea {
  resize: none;
  min-height: 40px;
  max-height: 200px;
}
.support-chat__composer .btn { flex: 0 0 auto; height: 40px; }

.support-inbox { max-width: 760px; }
.support-inbox__name { font-weight: 600; color: var(--ds-ink); }
.support-inbox__row--unread .support-inbox__name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--ds-danger-fill);
  vertical-align: 0.1em;
}
.support-inbox__snippet {
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Floating "Help & feedback" bubble (include/footer.php) ----------
   Bottom right, under the header, tab bar and modals (z-index 1020). On a
   phone it sits above the bottom tab bar. Toasts move up so they never land
   on top of it. */
.chat-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ds-primary-fill);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: var(--ds-shadow-2);
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.chat-fab:hover,
.chat-fab:focus-visible {
  background: var(--ds-primary-fill-hover);
  color: #fff;
  transform: translateY(-2px);
}
.chat-fab__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ds-danger-fill);
  border: 2px solid var(--ds-surface);
}
.chat-fab ~ #appToasts { bottom: 88px; }

@media (max-width: 991.98px) {
  .chat-fab {
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
  .chat-fab ~ #appToasts { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  .chat-fab { display: none !important; }
}

/* ---------- Admin uploads (/admin/uploads/) ---------- */
.admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.admin-photo {
  margin: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
}
.admin-photo__img {
  display: block;
  aspect-ratio: 1;
  background: var(--ds-photo-bg);
}
.admin-photo__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-photo figcaption {
  padding: 0.45rem 0.6rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
}
.admin-photo__pigeon {
  font-weight: 600;
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-photo__fancier { color: var(--ds-ink-2); }
.admin-photo__when { color: var(--ds-ink-3); font-size: 0.75rem; }

.admin-scan {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.admin-scan__thumb {
  flex: 0 0 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-3);
  color: var(--ds-ink-3);
  font-size: 1.6rem;
  overflow: hidden;
}
.admin-scan__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-scan__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- "Continue with Google" on the login and signup cards ---------- */
.auth-google__button {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
/* Google's button is a light iframe; on a dark page the browser would paint
   an opaque white box behind it unless the schemes match. */
.auth-google__button iframe { color-scheme: light; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--ds-ink-3);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--ds-line);
}

/* ---------- Privacy and terms pages ---------- */
.legal-page {
  max-width: 760px;
  padding-top: 2rem;
  padding-bottom: 3rem;
  line-height: 1.6;
}
.legal-page h1 { margin-bottom: 0.25rem; }
.legal-page h2 { font-size: 1.15rem; margin-top: 2rem; }
.legal-page__updated { color: var(--ds-ink-3); margin-bottom: 2rem; }

/* ---------- Pedigree sheet on the pedigree page (www/css/pedigree-sheet.css) ----------
   The sheet keeps print colours in its own file; on screen it takes the app's
   surfaces and ink, and in dark mode becomes a dark page. .ps.ps-screen, not
   .ps-screen: pedigree-sheet.css loads after this file and sets them on .ps. */
.pedigree-sheet-wrap { padding: 0; }
.ps.ps-screen {
  --ps-paper: var(--ds-surface);
  --ps-ink: var(--ds-ink);
  --ps-ink-2: var(--ds-ink-2);
  --ps-ink-3: var(--ds-ink-2);
  --ps-muted: var(--ds-ink-3);
  --ps-faint: var(--ds-ink-3);
  --ps-line: var(--ds-line-strong);
  --ps-rule: var(--ds-line);
  --ps-cock: var(--ds-cock);
  --ps-hen: var(--ds-hen);
  font-family: var(--ds-font);
}
.ps-screen .ps-more,
.ps-screen .ps-add { color: var(--ds-primary-text); border-color: var(--ds-primary-text); }
.ps-screen .ps-add:hover { background: var(--ds-primary-fill); border-color: var(--ds-primary-fill); color: #fff; }
[data-bs-theme="dark"] .ps.ps-screen {
  --ps-conn: #5d6673;
  --ps-tint0: #1d3326;
  --ps-tint1: #1c2a40;
  --ps-tint2: #3a3418;
  --ps-tint3: #2e2440;
  --ps-tint4: #3d2129;
  --ps-tint5: #193538;
}

/* ---------- Pedigree Customize form (include/partials/pedigreeCustomize.php) ---------- */
.ped-customize-panel { --bs-offcanvas-width: 420px; }
.ped-customize__heading {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ped-customize__heading:not(:first-of-type) { margin-top: 0.5rem; }
.ped-customize__logo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ped-customize__logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  max-width: 100%;
  height: 120px;
  padding: 6px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: #fff;
}
.ped-customize__logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ped-customize__status { min-height: 1.25rem; }

/* ---------- Family tree (pigeons/pedigree.php, ftNode/ftOffspring) ----------
   Left to right: parents, the bird, then offspring grouped by mate. Every
   connector is drawn by the item it leads to: a stub on its left, and half of
   the vertical that joins it to its siblings. */
.ft-scroll { overflow-x: auto; padding: 1.25rem 1rem; }
.ft { display: inline-flex; align-items: center; min-width: 100%; }
.ft-node {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-width: 230px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ds-line-strong);
  border-left-width: 4px;
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface);
  color: var(--ds-ink);
  text-decoration: none;
  line-height: 1.3;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ft-node:hover { color: var(--ds-ink); box-shadow: var(--ds-shadow-2); }
.ft-node.ft-cock { border-left-color: var(--ds-cock); }
.ft-node.ft-hen { border-left-color: var(--ds-hen); }
.ft-node.ft-nosex { border-left-color: var(--ds-line-strong); }
.ft-node__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-node__name i { margin-right: 0.3rem; }
.ft-node__ring { font-size: 0.8rem; color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-node__meta { font-size: 0.75rem; color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-node--self { border-color: var(--ds-primary-fill); box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), 0.2); min-width: 180px; }
.ft-node--self .ft-node__name { font-size: 1.05rem; }
.ft-node--archived { border-style: dashed; border-left-style: solid; background: transparent; }
.ft-node--empty { border-style: dashed; border-left-width: 1px; background: transparent; color: var(--ds-ink-3); font-size: 0.85rem; justify-content: center; min-height: 48px; }

.ft-parents { position: relative; display: flex; flex-direction: column; padding-right: 28px; }
.ft-parent { position: relative; padding: 6px 0; }
.ft-parent::before,
.ft-parent::after,
.ft-parents::after,
.ft-children::before,
.ft-children > .ft-item::before,
.ft-children > .ft-item::after { content: ""; position: absolute; border: 0 solid var(--ds-line-strong); }
.ft-parent::before { right: -14px; width: 14px; top: 50%; border-top-width: 2px; }
.ft-parent::after { right: -14px; border-left-width: 2px; }
.ft-parent:first-child::after { top: 50%; bottom: 0; }
.ft-parent:last-child::after { top: 0; bottom: 50%; }
.ft-parents::after { right: 0; width: 14px; top: 50%; border-top-width: 2px; }

.ft-item { position: relative; display: flex; align-items: center; }
.ft-children { position: relative; display: flex; flex-direction: column; padding-left: 28px; }
.ft-children::before { left: 0; width: 14px; top: 50%; border-top-width: 2px; }
.ft-children > .ft-item { padding: 5px 0; }
.ft-children > .ft-item::before { left: -14px; width: 14px; top: 50%; border-top-width: 2px; }
.ft-children > .ft-item::after { left: -14px; top: 0; bottom: 0; border-left-width: 2px; }
.ft-children > .ft-item:first-child::after { top: 50%; }
.ft-children > .ft-item:last-child::after { bottom: 50%; }
.ft-children > .ft-item:only-child::after { display: none; }

.ft-mate {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface-2);
  font-size: 0.8rem;
  white-space: nowrap;
}
.ft-mate a,
.ft-mate > span:first-child { color: var(--ds-ink-2); text-decoration: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ft-mate a:hover { color: var(--ds-primary-text); }
.ft-mate__x { color: var(--ds-ink-3); font-weight: 700; }
.ft-mate__count { min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: 0.72rem; font-weight: 600; text-align: center; }

/* ---------- Pigeon overview (pigeons/pedigree.php, Overview tab) ----------
   Photo on the left, everything about the bird on the right; one column on
   a phone. */
.pv-grid { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.pv-photo { display: block; aspect-ratio: 1; border-radius: var(--ds-r-md); overflow: hidden; background: var(--ds-photo-bg); border: 1px solid var(--ds-line); }
.pv-photo img { width: 100%; height: 100%; object-fit: contain; }
.pv-photo--empty { position: relative; display: flex; align-items: center; justify-content: center; }
.pv-photo--empty img { width: 70%; height: 70%; object-fit: contain; opacity: 0.5; }
.pv-photo--empty .btn { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ds-surface); }
.pv-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.pv-strip img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-line); }

.pv-head { margin-bottom: 1rem; }
.pv-name { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pv-name i { margin-right: 0.35rem; }
.pv-ring { font-size: 1rem; margin-top: 0.15rem; }
.pv-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.6rem; }
.pv-status { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: 0.75rem; font-weight: 600; }
.pv-status--active { background: var(--ds-success-soft); color: var(--ds-success); }
[data-bs-theme="dark"] .pv-status--active { background: rgba(22, 122, 78, 0.25); color: #7fd6a8; }

.pv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

.pv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 0 0 1.5rem; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); overflow: hidden; background: var(--ds-line); }
.pv-fact { padding: 0.65rem 0.85rem; background: var(--ds-surface); }
.pv-fact dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-ink-3); }
.pv-fact dd { margin: 0.1rem 0 0; font-weight: 600; color: var(--ds-ink); overflow-wrap: anywhere; }

.pv-section { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink-3); }
.pv-parents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.pv-parent { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--ds-line); border-left: 4px solid var(--ds-cock); border-radius: var(--ds-r-sm); background: var(--ds-surface); color: var(--ds-ink); text-decoration: none; text-align: left; }
.pv-parent--dam { border-left-color: var(--ds-hen); }
.pv-parent:hover { color: var(--ds-ink); box-shadow: var(--ds-shadow-2); }
.pv-parent img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--ds-photo-bg); }
.pv-parent > .fa-chevron-right { margin-left: auto; color: var(--ds-ink-3); font-size: 0.8rem; }
.pv-parent__text { display: flex; flex-direction: column; min-width: 0; }
.pv-parent__label { font-size: 0.75rem; color: var(--ds-ink-3); }
.pv-parent__label i { margin-right: 0.25rem; }
.pv-parent__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-parent__meta { font-size: 0.8rem; color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-parent--empty { border-style: dashed; border-left-style: dashed; border-left-width: 1px; background: transparent; cursor: pointer; }
.pv-parent--empty .pv-parent__name { color: var(--ds-primary-text); }
.pv-text { margin-bottom: 1.5rem; white-space: normal; line-height: 1.55; }
.pv-updated { margin: 1rem 0 0; font-size: 0.8rem; color: var(--ds-ink-3); }

@media (max-width: 767.98px) {
  .pv-grid { grid-template-columns: 1fr; gap: 1rem; }
  .pv-photo { aspect-ratio: 4 / 3; }
  .pv-head { text-align: center; }
  .pv-badges { justify-content: center; }
  .pv-actions .btn { flex: 1 1 0; }
  .pv-parents { grid-template-columns: 1fr; }
}

/* ---------- Add / edit pigeon dialog (pigeons/editpigeon.php) ----------
   The whole dialog scrolls (not just its body), so search dropdowns are
   never cut off; the buttons stay pinned at the bottom. */
.pe-dialog .modal-body { padding-bottom: 0.5rem; }
.pe-dialog .modal-footer { position: sticky; bottom: 0; z-index: 3; background: var(--bs-modal-bg, var(--ds-surface)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.pe-title-ring { color: var(--ds-ink-2); font-weight: 500; }
.pe-hint { color: var(--ds-ink-2); font-size: 0.9rem; }
.pe-optional { color: var(--ds-ink-3); font-weight: 400; font-size: 0.85em; }
.pe-photo { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.pe-photo img { width: 72px; height: 72px; flex: none; border-radius: var(--ds-r-sm); object-fit: cover; border: 1px solid var(--ds-line); background: var(--ds-photo-bg); }
.pe-photo img.pe-photo--empty { object-fit: contain; padding: 8px; opacity: 0.55; }
.pe-hatched { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pe-hatched .pe-year { width: 7.5rem; }
.pe-hatched input[type="date"] { width: auto; flex: 1 1 10rem; }
.pe-sex .btn-check:checked + .pe-sex--cock { background: var(--ds-cock); border-color: var(--ds-cock); color: #fff; }
.pe-sex .btn-check:checked + .pe-sex--hen { background: var(--ds-hen); border-color: var(--ds-hen); color: #fff; }
.pe-ring-check:empty { display: none; }

/* Picker dropdowns (js/mypigeons.js showModalOpts). */
.ts-dropdown { z-index: 1060; }
.ts-dropdown .dropdown-input { margin: 0; }
.pick-opt { line-height: 1.3; padding: 1px 0; }
.pick-opt__title { font-weight: 600; color: var(--ds-ink); }
.pick-opt__ring { font-weight: 400; color: var(--ds-ink-2); margin-left: 0.25rem; }
.pick-opt__meta { font-size: 0.8rem; color: var(--ds-ink-3); }
.pick-opt--archived .pick-opt__title { font-weight: 500; }
.pick-opt--none { color: var(--ds-ink-3); }
.pick-new { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 999px; background: var(--ds-primary-soft); color: var(--ds-primary-text); font-size: 0.72rem; font-weight: 600; }
.ts-dropdown .create { color: var(--ds-primary-text); }
.ts-dropdown .create.active { background: var(--ds-primary-soft); }
.ts-wrapper.multi .ts-control > .tag-item { background: none; padding: 0; margin: 0 4px 3px 0; display: inline-flex; align-items: center; }
.ts-wrapper.multi .ts-control > .tag-item .remove { border-left: 0; margin-left: 2px; padding: 0 4px; color: var(--ds-ink-3); }
.ts-dropdown .option .tag-badge { font-size: 0.8rem; }

/* ---------- Sortable table headers (table[data-sortable], js/mypigeons.js) ---------- */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.th-sort:hover { color: var(--ds-primary-text); }
.th-sort__icon { font-size: 0.8em; opacity: 0.35; }
th[aria-sort] .th-sort__icon { opacity: 1; color: var(--ds-primary-text); }
.ts-wrapper.is-invalid .ts-control { border-color: var(--bs-form-invalid-border-color, #dc3545); }

/* ---------- Training dialog (trainings/edittraining.php) ---------- */
.tr-birds { display: flex; flex-direction: column; height: 100%; }
.tr-birds__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.tr-birds__count { font-size: 0.85rem; color: var(--ds-ink-2); }
.tr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.tr-tags__label { font-size: 0.8rem; color: var(--ds-ink-3); }
.tr-tag { border: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-ink-2); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.tr-tag.is-on { outline: 2px solid var(--ds-primary-fill); outline-offset: 1px; }
.tr-birds__tools { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.tr-list { max-height: 420px; overflow-y: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.tr-bird { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--ds-line); cursor: pointer; margin: 0; }
.tr-bird:last-of-type { border-bottom: 0; }
.tr-bird:hover { background: var(--ds-surface-2); }
.tr-bird .form-check-input { margin: 0; flex: none; }
.tr-bird__text { display: flex; flex-direction: column; min-width: 0; }
.tr-bird__name { font-weight: 600; color: var(--ds-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-bird__name i { margin-right: 0.25rem; }
.tr-bird__ring { font-weight: 400; color: var(--ds-ink-2); }
.tr-bird__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--ds-ink-3); }
.tr-bird__meta .tag-badge { font-size: 0.7rem; }
@media (max-width: 991.98px) { .tr-list { max-height: 55vh; } }