/*
 * Xignifi Admin – minimal overrides for django-unfold.
 * Unfold handles all core styling via Tailwind.
 * Only add rules here that fix a specific visual gap.
 */

/* Global ND4 theme color overrides across login/admin actions. */
:root {
    --xig-theme-500: 117 86 231;
    --xig-theme-600: 107 77 227;
    --xig-theme-700: 100 69 223;
    --xig-theme-800: 83 58 185;
    --xig-theme-soft: 235 231 255;
}

/*
 * This file is unlayered, so it outranks Unfold's @layer'ed Tailwind utilities
 * regardless of specificity. Skip anchors that declare text-white (e.g. the
 * red delete button, primary action links) or they'd get purple-on-red text.
 */
body a:not([class*="text-white"]) {
    color: rgb(var(--xig-theme-700));
}

body a:not([class*="text-white"]):hover,
body a:not([class*="text-white"]):focus {
    color: rgb(var(--xig-theme-800));
}

/*
 * Do NOT add a blanket recolor for bg-primary-* utilities here. The purple
 * branding comes from UNFOLD["COLORS"]["primary"] in settings, and Unfold
 * relies on shade differences (e.g. the bg-primary-900 "Run" button on the
 * bg-primary-600 actions bar); flattening them makes buttons invisible.
 * Same for bare button[type="submit"]: Unfold uses icon-only submit buttons
 * (e.g. the changelist search lens) that must stay transparent.
 * These rules only cover classic Django admin widgets Unfold doesn't restyle.
 */
body .button.default,
body .submit-row input.default {
    background-color: rgb(var(--xig-theme-700)) !important;
    border-color: rgb(var(--xig-theme-700)) !important;
    /* Forced dark background must always come with readable text. */
    color: rgb(255 255 255) !important;
}

body .button.default:hover,
body .button.default:focus,
body .submit-row input.default:hover,
body .submit-row input.default:focus {
    background-color: rgb(var(--xig-theme-800)) !important;
    border-color: rgb(var(--xig-theme-800)) !important;
}

/* Subtle 3D depth on solid action buttons (primary + danger), scoped to
   button/anchor/input elements so container divs like the actions bar stay flat. */
body button[class^="bg-primary"],
body button[class*=" bg-primary"],
body a[class^="bg-primary"],
body a[class*=" bg-primary"],
body button[class*=" bg-red-"],
body a[class*=" bg-red-"],
body .button.default,
body .submit-row input.default {
    box-shadow:
        0 1px 2px rgba(2, 6, 23, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(2, 6, 23, 0.2);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

body button[class^="bg-primary"]:hover,
body button[class*=" bg-primary"]:hover,
body a[class^="bg-primary"]:hover,
body a[class*=" bg-primary"]:hover,
body button[class*=" bg-red-"]:hover,
body a[class*=" bg-red-"]:hover,
body .button.default:hover,
body .submit-row input.default:hover {
    transform: translateY(-1px);
    box-shadow:
        0 3px 6px rgba(2, 6, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(2, 6, 23, 0.2);
}

body button[class^="bg-primary"]:active,
body button[class*=" bg-primary"]:active,
body a[class^="bg-primary"]:active,
body a[class*=" bg-primary"]:active,
body button[class*=" bg-red-"]:active,
body a[class*=" bg-red-"]:active,
body .button.default:active,
body .submit-row input.default:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(2, 6, 23, 0.35);
}

body input:focus,
body textarea:focus,
body select:focus {
    border-color: rgb(var(--xig-theme-600));
    box-shadow: 0 0 0 2px rgba(var(--xig-theme-soft), 0.95);
    outline: none;
}

/* Form-field borders on change/add forms only (scoped to .change-form) */
body.change-form .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body.change-form .form-row textarea,
body.change-form .form-row select {
    border: 1px solid rgb(var(--color-base-300));
    border-radius: 0.5rem;
}

body.change-form .form-row input:focus,
body.change-form .form-row textarea:focus,
body.change-form .form-row select:focus {
    border-color: rgb(var(--color-primary-500));
    box-shadow: 0 0 0 2px rgba(var(--color-primary-500), 0.12);
    outline: none;
}

/* Dark mode form-field borders */
@media (prefers-color-scheme: dark) {
    body.change-form .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    body.change-form .form-row textarea,
    body.change-form .form-row select {
        border-color: rgb(var(--color-base-700));
    }
}