/**
 * Phone My Herd list (/m/my-herd): total header, grouped species rows,
 * animal rows, empty state.
 *
 * Loaded by pocket/my_herd.html through {% block page_css %}, right after
 * pocket.css. The confirm modal, danger buttons, and flash messages stay
 * in pocket.css because My Herd detail and import use them too.
 */

.pocket-ledger {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    overflow: hidden;
    box-shadow: var(--pocket-card-shadow);
}

/* The one green surface on the page: the herd's worth, in the ledger face. */
.pocket-herd-total {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pocket-space-md);
    background: linear-gradient(135deg, var(--pocket-active) 0%, var(--pocket-active-dark) 100%);
    color: var(--on-brand);
    border-radius: var(--pocket-radius-lg);
    padding: var(--pocket-space-lg);
    margin-bottom: var(--pocket-space-md);
    box-shadow: 0 6px 18px var(--brand-glow);
}

.pocket-total-label {
    display: block;
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-brand-85);
    margin-bottom: var(--pocket-space-xs);
}

.pocket-total-amount {
    display: block;
    font-family: var(--pocket-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--pocket-font-size-hero);
    font-weight: var(--pocket-font-weight-hero);
    color: var(--on-brand);
    line-height: 1;
    letter-spacing: -0.01em;
}

.pocket-total-count {
    display: block;
    font-size: var(--pocket-font-size-sm);
    color: var(--on-brand-85);
    margin-top: var(--pocket-space-xs);
}

.pocket-herd-total-main {
    flex: 1;
}

.pocket-herd-value,
.pocket-ledger-price {
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    color: var(--ink);
}

.pocket-missing-price {
    margin-top: var(--pocket-space-lg);
    overflow-wrap: anywhere;
}

.missing-price-list {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

/* Empty state actions */
.pocket-empty-actions {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-md);
    margin-top: var(--pocket-space-lg);
}

.pocket-empty-actions .pocket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pocket-space-sm);
}

/* Clickable ledger rows */
.pocket-ledger-row.clickable,
a.pocket-ledger-row {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.pocket-ledger-row.clickable:hover,
.pocket-ledger-row.clickable:active,
a.pocket-ledger-row:hover,
a.pocket-ledger-row:active {
    background-color: var(--pocket-bg);
}

/* Column label over the values: these are auction estimates, not book value. */
.pocket-herd-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pocket-space-md);
}

.pocket-herd-list-head-value {
    color: var(--pocket-text-muted);
    text-align: right;
    /* Sits over the value track: chevron 20px + gap 8px inside the row's 16px padding. */
    padding-right: 44px;
}

.pocket-herd-grouped {
    margin-bottom: var(--pocket-space-lg);
}

.pocket-species-group {
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-species-group:last-child {
    border-bottom: none;
}

/* Species row (tap to expand) */
/* name/age | M F chips | value | chevron, on one grid so values align. */
.pocket-species-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto calc(84 * var(--pocket-unit)) 20px;
    column-gap: var(--pocket-space-sm);
    align-items: center;
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    cursor: pointer;
    transition: background-color 0.15s;
    min-height: var(--pocket-row-height);
    /* A <button> (keyboard and screen reader): drawn as the row it was. */
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.pocket-species-row:active {
    background-color: var(--pocket-bg);
}

.pocket-species-group.expanded .pocket-species-row {
    background-color: var(--pocket-bg);
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-species-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pocket-species-age {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
}

.pocket-species-counts {
    display: contents;
}

/* M.F count badge - exotic ranch notation */
/* Compact: "2♂ 1♀" as two small tinted counters, not two pills. */
.pocket-mf-count {
    display: inline-flex;
    gap: 3px;
    font-size: var(--pocket-font-size-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pocket-mf-chip {
    padding: 1px 5px;
    border-radius: 6px;
    font-family: var(--pocket-font-numeric);
    line-height: 1.3;
    white-space: nowrap;
}

.pocket-mf-male {
    color: var(--male);
    background: var(--male-bg);
}

.pocket-mf-female {
    color: var(--female);
    background: var(--female-bg);
}

.pocket-species-value {
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    white-space: nowrap;
}

.pocket-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pocket-text-muted);
    transition: transform 0.2s ease;
}

.pocket-species-group.expanded .pocket-expand-icon {
    transform: rotate(180deg);
}

/* Individual animal rows (expanded view) */
.pocket-animal-list {
    background-color: var(--pocket-bg);
}

.pocket-animal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    padding-left: calc(var(--pocket-space-lg) + 12px);
    border-bottom: 1px solid var(--pocket-border-light);
    min-height: var(--pocket-target-min);
    min-width: 0;
    max-width: 100%;
}

.pocket-animal-row:last-child {
    border-bottom: none;
}

.pocket-animal-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pocket-animal-info .herd-list-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Medal sits beside the name, not between sex and price, so those
   two columns stay put on rows that have no pedigree. */
.pocket-animal-info > .pocket-pedigree-rank {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.pocket-animal-info .herd-list-primary {
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    color: var(--pocket-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pocket-animal-info .herd-list-secondary {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pocket-animal-details {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    flex-shrink: 0;
}

/* Tools (owner 2026-10-08): one row; the frequent ones (Sell, Analytics,
   Share) are text only and share the width, rarely used Clear all is a
   44px icon at the end. Icon plus label in four equal cells spilled at 390px. */
.pocket-herd-tools {
    display: flex;
    gap: var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-md);
}

.pocket-herd-tools .pocket-btn {
    box-sizing: border-box;
    flex: 1 1 0;
    align-self: stretch;
    min-height: var(--pocket-target-min);
    min-width: 0;
    padding: 6px 4px;
    gap: 4px;
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
}

.pocket-herd-tools .pocket-btn svg {
    flex-shrink: 0;
}

.pocket-herd-tools .pocket-btn-danger-text {
    color: var(--danger-text);
}

.pocket-herd-tools .pocket-herd-clear {
    flex: 0 0 44px;
}

/* Select mode (/m/my-herd?select=1, Exchange screen 3): tick rows, then Sell.
   Phone first at 390px: one column, 44px tap targets, 13px minimum text. */
.herd-select {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-md);
}

/* The title left, Select all right: the toolbar's ‹ My Herd is the way back (no Cancel, goal 4). */
.herd-select-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pocket-space-sm);
}

.herd-select-title {
    margin: 0;
    font: 700 22px 'Barlow Condensed', 'Arial Narrow', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.herd-select-link {
    min-height: var(--pocket-target-min);
    padding: 0;
    border: 0;
    background: none;
    color: var(--pocket-active);
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.herd-select-head .herd-select-link:last-child {
    justify-self: end;
}

/* The form holds only the list and the Sell bar; head, chips (the shared scrolling row) and tip sit
   outside it, in the same 12px column. */
.herd-select-form {
    display: contents;
}

.herd-select > .pocket-chips,
.herd-select > .pocket-got-it-card {
    margin-bottom: 0;
}

.herd-select-list {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    overflow: hidden;
    box-shadow: var(--pocket-card-shadow);
}

.herd-select-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pocket-space-md);
    min-height: 64px;
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    border-bottom: 1px solid var(--pocket-border);
    cursor: pointer;
}

.herd-select-row:last-child {
    border-bottom: 0;
}

.herd-select-row[hidden] {
    display: none;
}

/* An animal already in a live listing: shown, not tickable (the checkbox is disabled). */
.herd-select-row-listed {
    cursor: not-allowed;
    opacity: 0.6;
}

.herd-select-listed {
    color: var(--pocket-text-primary);
    font-weight: 600;
}

.herd-select-row:has(input:checked) {
    background: var(--pocket-active-soft);
}

/* A round tick: the whole row is the 44px+ tap target (the label). */
.herd-select-check {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin: 0;
    border: 2px solid var(--pocket-border);
    border-radius: 50%;
    background: var(--pocket-card-bg);
    display: grid;
    place-content: center;
}

.herd-select-check:checked {
    border-color: var(--pocket-active);
    background: var(--pocket-active);
}

.herd-select-check:checked::before {
    content: '';
    width: 12px;
    height: 7px;
    border: solid var(--on-brand);
    border-width: 0 0 2.5px 2.5px;
    transform: translateY(-2px) rotate(-45deg);
}

.herd-select-id,
.herd-select-value {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.herd-select-value {
    align-items: flex-end;
}

.herd-select-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
}

.herd-select-meta {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.herd-select-price {
    font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
    font-size: var(--pocket-font-size-base);
    font-weight: 700;
    white-space: nowrap;
}