/* WCAG 2.2 AA polish on top of django-unfold.
 *
 * Loaded via UNFOLD["STYLES"]. Three things only:
 *
 *   1. prefers-reduced-motion — strip all transitions/animations for
 *      users who request reduced motion (vestibular disorders, focus).
 *   2. focus-visible — render a 3px brand-green ring with a 2px
 *      offset, beating the WCAG 2.2 success criterion 2.4.13
 *      "Focus Appearance" minimum (2px outline, 3:1 contrast).
 *   3. forced-colors — make sure the sidebar separators don't disappear
 *      in Windows high-contrast mode.
 */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:where(a, button, input, select, textarea, summary, [tabindex]):not(#nav-filter):not(#searchbar):focus-visible {
    outline: 3px solid rgb(22 163 74) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Both admin search boxes sit inside an Unfold wrapper that already shows a
 * focus state on the OUTER div (focus-within ring). A ring on the input too is
 * a DOUBLE indicator — so suppress the input's own outline/ring and let the
 * wrapper own the cue.
 *   #nav-filter — the sidebar app/model search
 *   #searchbar  — the per-list changelist search (the q box)
 * Excluded from the focus-visible rule above AND hard-suppressed here so neither
 * our WCAG ring nor Unfold's transparent input:focus outline shows on them. */
#nav-filter:focus,
#nav-filter:focus-visible,
#searchbar:focus,
#searchbar:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):not(#nav-filter):focus-visible {
        outline: 3px solid CanvasText !important;
    }
    .border-base-200,
    .border-t,
    .border-b,
    [class*="border-base-"] {
        border-color: CanvasText !important;
    }
}

/* ----- Action icons (add, change, delete, view) -------------------------
 *
 * Stock Unfold renders changelist action links as bare grey icons. We turn
 * them into 32×32 circular buttons with the brand-green fill (matches the
 * sidebar SITE_SYMBOL color) and a white icon. Hover deepens the green;
 * focus-visible inherits the global ring.
 *
 * Selectors target the Django-admin class names (.addlink, .changelink,
 * .deletelink, .viewlink) wherever they appear — sidebar app list,
 * changelist toolbar, and inline tabular rows.
 */
:where(a.addlink, a.changelink, a.deletelink, a.viewlink, a.historylink) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    color: #ffffff !important;
    transition:
        background-color 150ms ease,
        transform 150ms ease;
    line-height: 1;
}

:where(a.addlink, a.changelink, a.deletelink, a.viewlink, a.historylink)
    .material-symbols-outlined,
:where(a.addlink, a.changelink, a.deletelink, a.viewlink, a.historylink)
    .material-symbols-rounded {
    color: #ffffff !important;
    font-size: 18px;
    line-height: 1;
}

a.addlink {
    background-color: rgb(22 163 74); /* green-600 */
}
a.addlink:hover {
    background-color: rgb(21 128 61); /* green-700 */
    transform: scale(1.05);
}

a.changelink {
    background-color: rgb(37 99 235); /* blue-600 */
}
a.changelink:hover {
    background-color: rgb(29 78 216); /* blue-700 */
    transform: scale(1.05);
}

a.viewlink,
a.historylink {
    background-color: rgb(75 85 99); /* gray-600 */
}
a.viewlink:hover,
a.historylink:hover {
    background-color: rgb(55 65 81); /* gray-700 */
    transform: scale(1.05);
}

a.deletelink {
    background-color: rgb(220 38 38); /* red-600 */
}
a.deletelink:hover {
    background-color: rgb(185 28 28); /* red-700 */
    transform: scale(1.05);
}

/* Reduced-motion users: keep the color hover, drop the scale animation. */
@media (prefers-reduced-motion: reduce) {
    :where(a.addlink, a.changelink, a.deletelink, a.viewlink, a.historylink):hover {
        transform: none !important;
    }
}