/**
 * Override django-unfold timepicker/calendarbox z-index.
 * The package has a bug: .clockbox gets z-70 from a shared rule but is overridden to z-50
 * in the Timepicker section, causing it to appear under the modal-overlay (z-60).
 * See: https://github.com/unfoldadmin/django-unfold/pull/1773
 */
.clockbox,
.calendarbox .calendar {
    z-index: 70 !important;
}

/**
 * django-import-export diff colors for Unfold dark mode.
 * Unfold's template doesn't use .import-preview, so the default
 * import.css dark rules never match. Uses Unfold's --color-base-*
 * and --color-primary-* CSS variables where possible.
 */
html.dark tr.skip td {
    background-color: color-mix(in oklch, var(--color-base-500) 6%, transparent);
}

html.dark tr.new td {
    background-color: color-mix(in oklch, var(--color-primary-500) 12%, transparent);
}

html.dark tr.delete td {
    background-color: color-mix(in oklch, oklch(62.8% 0.2577 29.23) 10%, transparent);
}

html.dark tr.update td {
    background-color: color-mix(in oklch, var(--color-primary-300) 8%, transparent);
}

html.dark td ins {
    background: color-mix(in oklch, var(--color-primary-500) 22%, transparent) !important;
    text-decoration: none;
}

html.dark td del {
    background: color-mix(in oklch, oklch(62.8% 0.2577 29.23) 18%, transparent) !important;
}

.before\:capitalize::before {
    /* This looks bad by default, why would we put mobile-view field names into title case? */
    /*text-transform: capitalize;*/
    text-transform: none;
}

.eat-color-display {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    background: linear-gradient(45deg, transparent 43%, red 43%, red 57%, transparent 57%);
}