.container-xl { max-width: 1200px; }
.table td, .table th { vertical-align: middle; }
.ki-clickable-row {
    cursor: pointer;
}

    .ki-clickable-row:hover {
        background-color: rgba(98, 105, 118, 0.12);
    }

    .ki-clickable-row[role="link"]:focus {
        outline: 2px solid var(--tblr-primary, #206bc4);
        outline-offset: -2px;
    }

/* Tom Select on Tabler inputs
   -------------------------------------------------------------------------
   The Color pickers on Dog/Puppy Add and Edit (and the Kennel Settings breed
   and coat-type selects) enhance a <select class="form-select"> with Tom
   Select. Tom Select copies the source element's classes onto the .ts-wrapper
   it generates, so the wrapper carries the real Tabler input chrome and the
   inner .ts-control is what holds the text.

   tom-select.bootstrap5.css (loaded in _Layout) already strips the inner
   border/background for that case. These rules only bridge the handful of
   values it hardcodes from stock Bootstrap to Tabler's, since Tabler renames
   the --bs-* custom properties to --tblr-*. Without them the control sits a
   couple of pixels shorter than a neighbouring .form-control such as Markings,
   and focus/validation render in Bootstrap blue rather than the Tabler theme. */

.ts-wrapper.form-select,
.ts-wrapper.form-control {
    /* A plain <select class="form-select"> gets width:100% for free, which is
       what makes it fill its Bootstrap column (e.g. matching Breed exactly on
       Dog Add/Edit). Tom Select's own wrapper doesn't reliably inherit that -
       left alone it can size to its content instead, leaving Color visibly
       narrower than the select above it even though both sit in an identical
       col-md-6. Restore the same block/full-width behavior explicitly. */
    display: block;
    width: 100%;
}

.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
    /* Tabler's input padding (.4375rem), not Bootstrap's (.375rem) - this is
       what makes the height line up with Markings and the other inputs.
       padding-right is deliberately left to the plugin: it forces its own
       !important value to reserve room for the caret, so the shorthand here
       cannot push text under the arrow. Don't add a padding-right override. */
    padding: 0.4375rem 0.75rem;
    min-height: 0;
    font-size: inherit;
    line-height: inherit;
}

.ts-wrapper.single.form-select .ts-control,
.ts-wrapper.single.form-control .ts-control {
    /* An empty single-select renders Tom Select's inline input/placeholder
       instead of a selected .item. Center the inner content and reserve the
       same control box as a normal Tabler select so Color does not collapse
       shorter when blank on Dog/Puppy forms (or any other single-select using
       the same shared enhancement path). */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: calc(var(--tblr-body-line-height, 1.4285714286) * 1em + 0.875rem + 2px);
    height: calc(var(--tblr-body-line-height, 1.4285714286) * 1em + 0.875rem + 2px);
}

.ts-wrapper.single.form-select .ts-control > input,
.ts-wrapper.single.form-control .ts-control > input,
.ts-wrapper.single.form-select .ts-control > .item,
.ts-wrapper.single.form-control .ts-control > .item {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

/* The dropdown panel itself (the popped-open option list) - nothing above
   touches it, so until now it rendered with whatever tom-select.bootstrap5.css
   ships from its unpinned CDN build (see the file header comment). That's
   unreliable to depend on: without an explicit opaque background the next
   row's text (e.g. Identification Type below Color on Dog Add/Edit) can show
   through; without z-index it can lose the stacking order to sibling fields;
   without a capped height + internal scroll a long option list (e.g. every
   breed color) has nowhere to go but push the page around instead of
   scrolling in place. .ts-wrapper is position:relative from the plugin's own
   CSS, so top:100% here reliably opens the panel flush under the control
   regardless of which control on the page it is - this isn't scoped to Color,
   it's the same .form-select/.form-control enhancement path every Tom Select
   instance in the app uses (Puppy Color, Kennel Settings' breed/coat-type
   pickers, etc.), so all of them get the same correction. */
.ts-wrapper.form-select .ts-dropdown,
.ts-wrapper.form-control .ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 0.125rem;
    background-color: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, rgba(0, 0, 0, 0.15));
    border-radius: var(--tblr-border-radius, 4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    overflow: hidden;
}

.ts-wrapper.form-select .ts-dropdown .ts-dropdown-content,
.ts-wrapper.form-control .ts-dropdown .ts-dropdown-content {
    /* The scrollbar lives here, inside the panel, instead of on the page -
       a long list (Color's full breed-color set) scrolls in place rather
       than growing the dropdown past the viewport or the row below it. */
    max-height: 15rem;
    overflow-y: auto;
}

.ts-wrapper.form-select .ts-dropdown .option,
.ts-wrapper.form-control .ts-dropdown .option {
    /* Same horizontal padding as the closed .ts-control above, and an
       explicit line-height so option rows are evenly spaced and never
       collapse into/overlap one another - this is what "readable, vertically
       spaced options" comes from, not any per-option positioning. */
    padding: 0.4375rem 0.75rem;
    line-height: var(--tblr-body-line-height, 1.4285714286);
    white-space: normal;
}

/* Draw focus on the wrapper, which owns the visible border, instead of ringing
   the borderless inner control. */
.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.25);
}

.ts-wrapper.form-select.focus .ts-control,
.ts-wrapper.form-control.focus .ts-control {
    box-shadow: none;
}

/* Validation. ASP.NET unobtrusive validation marks the original <select> with
   .input-validation-error; Tom Select hides that element but leaves it as the
   wrapper's previous sibling, so the state can still be reflected. .is-invalid
   is matched too for anything styled the Bootstrap way. */
select.input-validation-error + .ts-wrapper.form-select,
select.input-validation-error + .ts-wrapper.form-control,
select.is-invalid + .ts-wrapper.form-select,
select.is-invalid + .ts-wrapper.form-control,
.ts-wrapper.form-select.is-invalid,
.ts-wrapper.form-control.is-invalid {
    border-color: var(--tblr-danger, #d63939);
}

/* Small circular icon badge used before a card-title heading, e.g. the
   Puppy Details Placement tab's Buyer & Status / Balance Summary cards. */
.placement-summary-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
}
.page-tools-training-menu {
    top: 0;
    left: 100%;
    margin-left: 0.25rem;
}

@media (max-width: 575.98px) {
    .page-tools-training-menu.show {
        position: static;
        width: 100% !important;
        max-height: calc(100vh - 2rem) !important;
    }
}

/* Nested flyout submenu inside a top navbar dropdown (e.g. Reports & Documents >
   Inspections > AKC). Same positioning approach as .page-tools-training-menu - the
   parent .nav-submenu supplies position:relative via Bootstrap's own .dropend class. */
.nav-submenu-menu {
    top: 0;
    left: 100%;
    margin-left: 0.25rem;
}

@media (max-width: 575.98px) {
    .nav-submenu-menu.show {
        position: static;
        width: 100% !important;
    }
}

/* Report footer styling lives in Pages/Shared/_ReportFooter.cshtml so it also
   applies on print pages that render with Layout = null. */