/**
 * Shared semantic utilities (no Tailwind).
 * Replace phantom utility classnames used in JS builders.
 */

/* Sex indicators — theme-invariant */
.bw-sex-m,
.bw-sex-male {
    color: var(--sex-male, #2196f3);
}

.bw-sex-f,
.bw-sex-female {
    color: var(--sex-female, #e91e63);
}

.bw-sex-icon {
    margin-right: 4px;
    font-style: normal;
}

/* Collar color — left-edge vertical bar on table rows (matches kennel ID collar rail) */
.data-table tbody tr.bw-collar-row > td:first-child,
table.data-table tbody tr.bw-collar-row > td:first-child,
.detail-table tbody tr.bw-collar-row > td:first-child,
table.detail-table tbody tr.bw-collar-row > td:first-child {
    box-shadow: inset 4px 0 0 0 var(--bw-collar-bar, transparent);
}

.bw-collar-row-card,
.den-ops-animal-card.bw-collar-row,
.bw-collar-bar-host,
.animal-item.bw-collar-row {
    border-left: 4px solid var(--bw-collar-bar, transparent);
    padding-left: 0.5rem;
}

/* Inline mini bar (detail fields, chips, den summary) */
.bw-collar-swatch,
.bw-collar-bar-inline {
    display: inline-block;
    width: 4px;
    height: 1.1em;
    border-radius: 1px;
    vertical-align: -0.15em;
    margin-right: 0.4em;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

.bw-collar-swatch--empty {
    background: transparent;
    outline: 1px dashed rgba(0, 0, 0, 0.25);
}

.bw-collar-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}

/* Layout helpers */
.bw-grid {
    display: grid;
    gap: var(--spacing-md, 1rem);
}

.bw-grid-cols-1 {
    grid-template-columns: 1fr;
}

.bw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bw-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .bw-md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bw-md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bw-flex {
    display: flex;
}

.bw-flex-col {
    display: flex;
    flex-direction: column;
}

.bw-items-center {
    align-items: center;
}

.bw-justify-center {
    justify-content: center;
}

.bw-justify-between {
    justify-content: space-between;
}

.bw-gap-sm {
    gap: var(--spacing-sm, 0.5rem);
}

.bw-gap-md {
    gap: var(--spacing-md, 1rem);
}

.bw-text-muted {
    color: var(--text-muted, #6b7280);
}

.bw-text-secondary {
    color: var(--text-secondary, #4b5563);
}

.bw-fixed-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.bw-thumb-sm {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius, 8px);
    background: var(--surface-secondary, #f3f4f6);
}

.bw-thumb-md {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius, 8px);
    background: var(--surface-secondary, #f3f4f6);
}

.bw-thumb-lg {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius, 8px);
    background: var(--surface-secondary, #f3f4f6);
}

.bw-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #6b7280);
    background: var(--surface-secondary, #f3f4f6);
    border-radius: var(--radius, 8px);
}

.bw-thumb-placeholder .material-icons {
    font-size: 1.5rem;
    color: var(--text-muted, #6b7280);
}

.bw-gallery {
    display: grid;
    gap: var(--spacing-sm, 0.5rem);
}

.bw-gallery-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bw-gallery-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bw-gallery-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bw-gallery-item {
    position: relative;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    cursor: pointer;
}

.bw-gallery-item img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    display: block;
    border-radius: var(--radius, 8px);
}

.bw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    padding: 1rem;
}

.bw-lightbox.bw-hidden {
    display: none !important;
}

.bw-lightbox__inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.bw-lightbox__close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.bw-lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.bw-lightbox__caption {
    position: absolute;
    bottom: -2.5rem;
    left: 0;
    color: #fff;
    font-size: 0.875rem;
}

.bw-text-warning {
    color: var(--warning-color, #f59e0b);
}

.bw-text-error {
    color: var(--error-color, #ef4444);
}

.bw-text-critical {
    color: var(--critical-color, #c62828);
}

.bw-surface-muted {
    background: var(--surface-secondary, #f3f4f6);
}

.bw-rounded {
    border-radius: var(--radius, 8px);
}

.bw-border {
    border: 1px solid var(--border-color, #d1d5db);
}

.bw-p-md {
    padding: var(--spacing-md, 1rem);
}

.bw-mt-sm {
    margin-top: var(--spacing-sm, 0.5rem);
}

.bw-mt-md {
    margin-top: var(--spacing-md, 1rem);
}

.bw-w-full {
    width: 100%;
}

.bw-max-w-lg {
    max-width: 32rem;
}

.bw-hidden {
    display: none !important;
}

/* Media assign / dialog panels */
.bw-dialog-panel {
    background: var(--background, #ffffff);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: var(--radius, 8px);
    padding: var(--spacing-lg, 1.5rem);
    max-width: 480px;
    width: 90%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.bw-dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: var(--spacing-md, 1rem);
}

/* Signature canvas: white ink surface is intentional for contrast */
.bw-signature-canvas {
    background: #ffffff;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: var(--radius, 8px);
    touch-action: none;
}