/**
 * Phone add-animal form (/m/my-herd/add): selects, textareas, sex chips,
 * optional fields (the sticky submit bar is pocket.css's). The My Herd detail edit form uses
 * the same controls, so pocket/my_herd_detail.html links this sheet too.
 *
 * Loaded through {% block page_css %}, right after pocket.css. Inputs and
 * labels shared with login stay in pocket.css.
 */

.pocket-form-actions {
    display: flex;
    gap: var(--pocket-space-sm);
    margin-top: var(--pocket-space-md);
}

.pocket-form-actions .pocket-btn {
    flex: 1;
}

.pocket-add-animal {
    padding: 0;
}

/* Select / Dropdown styling */
.pocket-select {
    width: 100%;
    min-height: var(--pocket-control-height);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-field);
    border: 1px solid var(--pocket-border-input);
    border-radius: var(--pocket-radius-md);
    background: var(--pocket-card-bg);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--pocket-text-primary);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--pocket-space-md) center;
    padding-right: calc(var(--pocket-space-lg) + 20px);
}

.pocket-select:focus {
    outline: none;
    border-color: var(--pocket-active);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Textarea styling */
.pocket-textarea {
    width: 100%;
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-field);
    font-family: var(--pocket-font-family);
    border: 1px solid var(--pocket-border-input);
    border-radius: var(--pocket-radius-md);
    background: var(--pocket-card-bg);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--pocket-text-primary);
    resize: vertical;
    min-height: 80px;
}

.pocket-textarea:focus {
    outline: none;
    border-color: var(--pocket-active);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.pocket-textarea::placeholder {
    color: var(--pocket-text-muted);
}

/* Sex Chips (M/F toggle) */
.pocket-sex-chips {
    display: flex;
    gap: var(--pocket-space-sm);
}

.pocket-sex-chip {
    flex: 1;
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-base);
    font-weight: 500;
    border-radius: var(--pocket-radius-md);
    border: 2px solid var(--pocket-border);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    min-height: var(--pocket-target-min);
}

.pocket-sex-chip.pocket-sex-female {
    border-color: var(--pocket-border);
}

.pocket-sex-chip.pocket-sex-male {
    border-color: var(--pocket-border);
}

.pocket-sex-chip:active {
    transform: scale(0.98);
}

/* Optional Fields Collapsible */
.pocket-optional-fields {
    margin-top: var(--pocket-space-lg);
    margin-bottom: var(--pocket-space-lg);
}

.pocket-optional-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-base);
    font-weight: 500;
    color: var(--pocket-text-secondary);
    background: var(--pocket-bg);
    border: 1px solid var(--pocket-border);
    border-radius: var(--pocket-radius-md);
    cursor: pointer;
    transition: background 0.15s;
}

.pocket-optional-toggle:hover {
    background: var(--pocket-border-light);
}

.pocket-optional-toggle svg {
    transition: transform 0.2s;
}

.pocket-optional-toggle.open svg {
    transform: rotate(180deg);
}

.pocket-optional-content {
    padding-top: var(--pocket-space-lg);
}

/* Form with sticky submit button */
.pocket-add-form {
    padding-bottom: 80px;
}

.pocket-sex-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.pocket-sex-chip {
    position: relative;
}

.pocket-sex-chip.pocket-sex-female:has(input:checked) {
    border-color: var(--pocket-female);
    background: var(--pocket-female-bg);
    color: var(--pocket-female);
}

.pocket-sex-chip.pocket-sex-male:has(input:checked) {
    border-color: var(--pocket-male);
    background: var(--pocket-male-bg);
    color: var(--pocket-male);
}

/* Add Animal (docs/features/POCKET_ADD_ANIMAL.md): the market bar, the sections, How you got them,
   More details. What shows for a sex comes from Python (``hidden`` on the fieldset); which kind's
   fields show follows the checked "How you got them" radio. */
.pocket-add-animal [hidden] {
    display: none !important;
}

.pocket-add-bar {
    position: sticky;
    top: var(--pocket-top-chrome);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pocket-space-md);
    min-height: var(--pocket-target-min);
    margin-bottom: var(--pocket-space-lg);
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    border-radius: var(--pocket-radius-md);
    background: var(--pocket-header-bg);
    color: var(--pocket-nav-active-text);
}

.pocket-add-bar-subject {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 500;
}

.pocket-add-bar-each {
    font-size: var(--pocket-font-size-xs);
}

.pocket-add-bar-market {
    flex: none;
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
    text-align: right;
}

.pocket-add-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pocket-add-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pocket-space-md);
}

.pocket-add-stepper {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
}

.pocket-add-stepper .pocket-btn {
    min-width: var(--pocket-target-min);
    min-height: var(--pocket-target-min);
}

.pocket-add-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pocket-space-sm);
}

.pocket-add-kinds .pocket-chip {
    justify-content: center;
    min-height: var(--pocket-target-min);
    white-space: normal;
    text-align: center;
}

/* A kind's fields stay hidden until their kind is picked; the hint goes once one is. */
.pocket-add-form [data-kinds] {
    display: none;
}

.pocket-add-form:has(input[name="acquisition"][value="ranch"]:checked) [data-kinds~="ranch"],
.pocket-add-form:has(input[name="acquisition"][value="auction"]:checked) [data-kinds~="auction"],
.pocket-add-form:has(input[name="acquisition"][value="broker"]:checked) [data-kinds~="broker"],
.pocket-add-form:has(input[name="acquisition"][value="born"]:checked) [data-kinds~="born"],
.pocket-add-form:has(input[name="acquisition"][value="other"]:checked) [data-kinds~="other"] {
    display: revert;
}

.pocket-add-form:has(input[name="acquisition"]:checked) .pocket-add-kind-hint {
    display: none;
}

/* Born here sets every age from its birth date (the ages and their help line). */
.pocket-add-form:has(input[name="acquisition"][value="born"]:checked) .herd-add-age {
    display: none;
}

.pocket-add-price-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pocket-space-md);
}

.pocket-add-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pocket-space-md);
}

.pocket-add-form:has(input[name="acquisition"][value="born"]:checked) .pocket-add-pair[data-kinds~="born"] {
    display: grid;
}

.pocket-add-note:empty {
    display: none;
}

/* The price note is a .pocket-alert; with no tone it sits on the soft fill. */
.pocket-add-note {
    background: var(--pocket-active-soft);
}

.pocket-add-more-summary {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-xs);
    min-height: var(--pocket-target-min);
    justify-content: center;
    cursor: pointer;
}

.pocket-add-more-title {
    font-weight: 600;
}

.pocket-add-more[open] .pocket-add-more-summary {
    margin-bottom: var(--pocket-space-md);
}

.herd-add-rows {
    width: 100%;
    border-collapse: collapse;
}

.herd-add-rows th {
    text-align: left;
    color: var(--table-label);
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    padding: 0 0.25rem 0.25rem;
}

.herd-add-rows td {
    padding: 0.25rem;
}

.herd-add-row-number {
    color: var(--table-label);
    font-size: var(--pocket-font-size-xs);
    width: 1.5rem;
}

.pocket-input-small {
    width: 70px;
    text-align: center;
}

/* The Added screen (pocket/my_herd_added.html): the value, what was paid, the facts and the next steps. */
.pocket-added-subject {
    margin: 0 0 var(--pocket-space-md);
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
}

.pocket-added-total {
    margin: 0;
    font-size: var(--pocket-font-size-hero);
    font-weight: var(--pocket-font-weight-hero);
}

.pocket-added-compare {
    margin-top: var(--pocket-space-md);
    padding-top: var(--pocket-space-md);
    border-top: 1px solid var(--pocket-border);
}

.pocket-added-compare p,
.pocket-added-facts dd {
    margin: 0;
}

.pocket-added-figure {
    font-size: var(--pocket-font-size-xl);
    font-weight: 700;
}

.pocket-added-facts {
    margin: 0;
}

.pocket-added-facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--pocket-space-md);
    min-height: var(--pocket-target-min);
    align-items: center;
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-added-facts dt {
    color: var(--pocket-text-secondary);
}

.pocket-added-facts dd {
    font-weight: 600;
    text-align: right;
}

.pocket-added-animals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pocket-space-sm);
    margin: var(--pocket-space-md) 0 0;
    padding: 0;
    list-style: none;
}

.pocket-added-animals a {
    display: inline-flex;
    align-items: center;
    min-height: var(--pocket-target-min);
    padding: 0 var(--pocket-space-md);
}

.pocket-added-actions {
    flex-direction: column;
}