:root {
    --ws-page-bg: #e5e0d6;
    --planner-panel-border: #d4cdc0;
}

[data-bs-theme="dark"] {
    --planner-page-bg: var(--bs-body-bg);
    --planner-panel-border: var(--bs-border-color);
}

/* The main stylesheet also sets body background-color directly. */
body {
    background-color: var(--planner-page-bg, var(--ws-page-bg));
}

.mating-planner {
    max-width: 1040px;
    color: var(--bs-body-color);
}

.mating-planner [hidden] { display: none !important; }
.mating-planner .min-width-0 { min-width: 0; }
.mating-planner .planner-banner { display: block; max-width: 100%; max-height: 130px; width: auto; height: auto; margin-inline: auto; border-radius: .75rem; }
.mating-planner .planner-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); }
.mating-planner .planner-heading-light h1,
.mating-planner .planner-heading-light p { color: #f8f9fa !important; }
.mating-planner h1 { font-size: clamp(1.2rem, 3vw, 1.45rem); font-weight: 650; letter-spacing: -.035em; }
.mating-planner .planner-panel { padding: 1rem; border: 1px solid var(--planner-panel-border); border-radius: 1rem; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(48, 42, 30, .075); }
.mating-planner .planner-section-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.mating-planner .planner-section-heading h2 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.mating-planner .planner-step { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.65rem; height: 1.65rem; font-size: .85rem; font-weight: 700; border-radius: 50%; color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
.mating-planner .form-control, .mating-planner .form-select { min-height: 46px; font-size: 1rem; border-radius: .5rem; }
.mating-planner .form-label { font-size: .875rem; font-weight: 600; }
.mating-planner #mare-search, .mating-planner #planner-stallion { min-height: 34px; padding-block: .2rem; }
.mating-planner #mare-search { min-width: 0; padding-inline: .5rem; }
.mating-planner #planner-stallion { padding-left: .5rem; }
.mating-planner #mare-search-button { min-height: 34px; padding-block: .2rem; flex-shrink: 0; }
.mating-planner .planner-results { max-height: clamp(10rem, 30vh, 18rem); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--bs-border-color); border-radius: .65rem; }
.mating-planner .planner-results li + li { border-top: 1px solid var(--bs-border-color); }
.mating-planner .planner-result { display: flex; gap: .65rem; align-items: center; justify-content: space-between; padding: .5rem .75rem; width: 100%; min-height: 48px; line-height: 1.2; border: 0; background: var(--bs-body-bg); color: var(--bs-body-color); text-align: left; }
.mating-planner .planner-result:hover { background: var(--bs-tertiary-bg); }
.mating-planner .planner-result:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -3px; background: var(--bs-primary-bg-subtle); }
.mating-planner .planner-result-copy { min-width: 0; overflow-wrap: anywhere; }
.mating-planner .planner-result-name { display: inline; font-size: .95rem; font-weight: 600; }
.mating-planner .planner-result-title { display: block; }
.mating-planner .planner-result-meta, .mating-planner .planner-result-parents { color: var(--bs-secondary-color); font-size: .78rem; }
.mating-planner .planner-result-meta { display: inline-block; margin-left: .35rem; }
.mating-planner .planner-result-parents { display: block; margin-top: .1rem; }
.mating-planner .planner-result-action { flex-shrink: 0; pointer-events: none; }
.mating-planner .planner-confirmed { padding: 1.15rem; border-radius: .65rem; background: var(--bs-success-bg-subtle); border: 1px solid var(--bs-success-border-subtle); overflow-wrap: anywhere; }
.mating-planner .planner-confirmation-label { font-size: .75rem; font-weight: 700; color: var(--bs-success-text-emphasis); }
.mating-planner #mare-change { min-height: 40px; }
.mating-planner .planner-details { padding-block: 1rem; }
.mating-planner .planner-details .form-label { margin: 0; line-height: 1.2; }
.mating-planner .planner-details .form-control, .mating-planner .planner-details .form-select { min-width: 0; min-height: 34px; padding-block: .2rem; }
.mating-planner .planner-details .form-control { padding-inline: .5rem; }
.mating-planner .planner-details .form-select { padding-left: .5rem; }
.mating-planner .planner-detail-field .invalid-feedback, .mating-planner .planner-detail-field .form-text { grid-column: 2; }
.mating-planner .planner-detail-field:last-child { margin-bottom: 0 !important; }
.mating-planner .planner-details-fields { display: grid; gap: .5rem; }
.mating-planner .planner-detail-field { display: grid; grid-template-columns: minmax(5rem, 30%) minmax(0, 1fr); align-items: center; column-gap: .65rem; min-width: 0; }
.mating-planner .planner-review { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); border-radius: 1rem; }
.mating-planner .planner-pair { font-size: 1rem; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.mating-planner .planner-submit { min-height: 34px; flex-shrink: 0; padding: .2rem .75rem; }
.mating-planner .planner-add-link { display: inline-flex; align-items: center; min-height: 36px; }

@media (max-width: 575.98px) {
    .mating-planner { padding-inline: .25rem; }
    .mating-planner .planner-panel { padding: 1rem; border-radius: .8rem; }
    .mating-planner .planner-review { flex-direction: column; align-items: stretch; gap: .5rem; border-radius: .8rem; }
    .mating-planner .planner-submit { width: 100%; }
    .mating-planner .planner-results { max-height: 16rem; }
    .mating-planner .planner-result { padding: .5rem .65rem; gap: .5rem; }
}