/* Shared table feedback for administration, salon and customer views. */
:root {
    --portal-row-highlight: #edf5fc;
    --portal-link-color: #075985;
}

table tbody > tr,
table tbody > tr > :is(td, th) {
    transition: background-color 140ms ease;
}

@media (hover: hover) {
    table tbody > tr:not([hidden]):hover,
    table tbody > tr:not([hidden]):hover > :is(td, th) {
        background-color: var(--portal-row-highlight);
    }
}

table tbody > tr:not([hidden]):focus-within,
table tbody > tr:not([hidden]):focus-within > :is(td, th) {
    background-color: var(--portal-row-highlight);
}

.portal-customer-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    color: var(--portal-link-color);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}
.portal-customer-name > span:first-child { min-width: 0; }
.portal-customer-name > span[aria-hidden] { flex-shrink: 0; text-decoration: none; }
.portal-customer-name:hover { color: #0369a1; }
.portal-customer-name:focus-visible {
    outline: 2px solid var(--portal-link-color);
    outline-offset: 4px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    table tbody > tr,
    table tbody > tr > :is(td, th) { transition: none; }
}