/*
 * Small CSS fixes on top of unfold's precompiled stylesheet.
 *
 * Changelist detail links (the list_display_links columns) get only the
 * `text-important` class from unfold - a slightly darker text with no other
 * affordance, so it is impossible to tell which column opens the detail.
 * Style them like every other link in our admin (see libs/helpers.py
 * ADMIN_LINK_CLASSES): primary color + underline. Colors come from the CSS
 * variables unfold generates from UNFOLD["COLORS"].
 */
#result_list a.text-important {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.dark #result_list a.text-important {
    color: var(--color-primary-500);
}

/*
 * "Today" / "Now" shortcuts next to date and time fields.
 *
 * unfold already loads Django's DateTimeShortcuts.js (unfold/widgets.py Media)
 * and re-inits it for newly added inline rows, so the shortcut link is injected
 * on every date/time input - unfold just hides it and keeps only the icon that
 * opens the picker:
 *
 *     .datetimeshortcuts               { font-size: 0 }
 *     .datetimeshortcuts a:first-child { display: none }
 *
 * The content team uses the one-click shortcut often (it is one of the few
 * things they missed from the old admin), so reveal it again. Scoped to
 * `.datetimeshortcuts`, i.e. only the link beside the field: the pickers keep
 * their own quick actions untouched (.calendar-shortcuts, .timelist).
 *
 * Labels come from Django's jsi18n catalog, so they follow the admin language
 * ("Dnes" / "Teraz" for the sk team), and the link sets the *server* time via
 * body[data-admin-utc-offset] - no timezone drift on a UTC server.
 *
 * NOTE: UNFOLD["STYLES"] is rendered ABOVE unfold's own stylesheet in
 * skeleton.html, so everything here has to win on specificity, never on source
 * order - hence the `body` prefixes.
 */
/*
 * unfold lays the group out row-reverse, which is invisible while it holds just
 * the icon but would push that icon left of the revealed label. Back to normal
 * order so the icon keeps the exact position it has today and the label simply
 * appears in front of it - the reading order the old admin had ("Today | icon").
 */
body .datetimeshortcuts {
    flex-direction: row;
}

body .datetimeshortcuts a:first-child {
    display: flex;
    /* The wrapper zeroes font-size to hide the "|" separator text nodes. */
    font-size: var(--text-xs);
    padding-inline: calc(var(--spacing) * 1.5);
    color: var(--color-primary-600);
}

body .datetimeshortcuts a:first-child:hover {
    color: var(--color-primary-700);
}

html.dark body .datetimeshortcuts a:first-child {
    color: var(--color-primary-500);
}

html.dark body .datetimeshortcuts a:first-child:hover {
    color: var(--color-primary-400);
}

/*
 * unfold pairs that hidden link with a Material Symbols "update" glyph
 * (`.datetimeshortcuts a:first-child:after`) - dead code while the link is
 * display:none, but it would render next to the revealed label. Drop it.
 */
body .datetimeshortcuts a:first-child::after {
    display: none;
}

/*
 * Django's timezone warning sits absolutely at right: 44px, i.e. just left of
 * what unfold assumes is an icon-only shortcut group. The revealed label makes
 * that group ~2x wider, so move the warning further left to keep it clear of
 * the label. It stays an icon that expands on hover, as unfold designed it.
 */
body .timezonewarning {
    right: calc(var(--spacing) * 24);
}

/*
 * ...but not on date-only fields.
 *
 * DateTimeShortcuts.init() appends the warning to every `vDateField` and every
 * `vTimeField` whose browser offset differs from body[data-admin-utc-offset].
 * The server runs UTC and the team sits in CET/CEST, so that is *always* true
 * for us: a red warning triangle inside every date input, for good, which
 * unfolds into a white bar over the whole field the moment the pointer brushes
 * it on its way to "Today" or the calendar icon.
 *
 * On a DateField the note is pure noise - a plain date is stored exactly as
 * typed, no timezone is applied to it. It earns its place only where the offset
 * really moves the value, i.e. on a DateTimeField, and there the time half
 * keeps it (a SplitDateTime used to carry the same warning twice, once per
 * half). Django has no setting for this and neither has unfold; the only other
 * switch is dropping body[data-admin-utc-offset] altogether, which would also
 * make the "Today"/"Now" shortcuts insert browser time instead of server time.
 *
 * The warning is appended after the input inside unfold's `relative` wrapper
 * (unfold/widgets/date.html), which is what the sibling combinator leans on.
 */
body .vDateField ~ .timezonewarning {
    display: none;
}

/*
 * Green section headings on the change forms.
 *
 * unfold renders every fieldset and inline heading as a light grey pill, and
 * the content team could not tell the sections apart on a long form ("zlieva sa
 * dokopy (sivá/biela)" - the old admin separated them with green). The pill is
 * dropped in templates/unfold/helpers/inline_heading.html, which tags the
 * heading with `admin-section-heading`; the colours are here.
 *
 * They picked this out of four variants (full green bar, tinted bar, left
 * stripe, this one): the label in brand green over a green rule. Three pixels
 * rather than two, which is what "a bit thicker" turned out to look like.
 *
 * Kept as real CSS on purpose. unfold ships a precompiled Tailwind build, so
 * utilities it never compiled - `border-l-4`, `dark:bg-primary-950/40` - are
 * silently inert, which is easy to mistake for a styling mistake.
 */
.admin-section-heading {
    color: var(--color-primary-700);
    border-bottom: 3px solid var(--color-primary-600);
}

html.dark .admin-section-heading {
    color: var(--color-primary-400);
    border-bottom-color: var(--color-primary-600);
}

/*
 * Telling staging apart from production.
 *
 * The content team keeps many admin windows open and mixed the environments up: the
 * badge in the header is 11px and unfold's label template has no larger size. It does
 * take a `class`, so templates/unfold/helpers/userlinks.html passes one and the size
 * lives here.
 *
 * The header bar itself is tinted outside production (classes come from
 * ENVIRONMENT_HEADER_CLASSES via unfold's `element_classes` hook, see
 * ReadmioAdminSite.each_context), so a coloured bar means "not production". Production
 * deliberately keeps the plain header - a permanent alarm colour on the environment
 * they use all day would stop registering.
 *
 * The `body` prefixes are needed: this stylesheet is loaded before unfold's, so the
 * utilities on those elements (bg-white, text-[11px]) are beaten on specificity only.
 */
body .admin-environment-badge {
    height: auto;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
}

body .admin-env-header--staging {
    /* A step lighter than the badge's own orange-100 pill, which would otherwise
       disappear into the bar. */
    background-color: #fff7ed;
    border-bottom-color: #fdba74;
}

html.dark body .admin-env-header--staging {
    /* Alpha over the page background, the same idiom unfold uses for its own dark tints. */
    background-color: rgb(249 115 22 / 16%);
    border-bottom-color: rgb(249 115 22 / 45%);
}

body .admin-env-header--local {
    background-color: #eff6ff;
    border-bottom-color: #93c5fd;
}

html.dark body .admin-env-header--local {
    background-color: rgb(59 130 246 / 16%);
    border-bottom-color: rgb(59 130 246 / 45%);
}

/*
 * On a tinted bar the badge gets a solid fill instead of unfold's pale pill, so the
 * environment is legible at a glance rather than being one more tinted thing in a
 * tinted bar. Production keeps unfold's pill: plain bar plus red pill is production,
 * tinted bar plus solid chip is not.
 */
body .admin-env-header--staging .admin-environment-badge {
    background-color: #ea580c;
    color: #fff;
}

body .admin-env-header--local .admin-environment-badge {
    background-color: #2563eb;
    color: #fff;
}

/*
 * Ctrl+F on a long change form.
 *
 * The save buttons sit in a bar sticking to the bottom of the viewport over the
 * last ~80px of the page (admin/submit_line.html: `lg:sticky lg:bottom-0` with a
 * translucent, blurred backdrop; the changelist pagination bar is built the same
 * way). Chrome only scrolls to a find-in-page match that is outside the viewport,
 * and a match under that bar counts as inside it - so searching the BookData story
 * text left the highlighted word behind the blur, with nothing to tell the reader
 * it had been found down there.
 *
 * scroll-padding shrinks the box every scroll aims at, find-in-page included, so a
 * match in that band gets scrolled clear of the bar instead. It belongs on the root
 * element, which is where the viewport's scrollport takes it from, and only from
 * `lg` up, the only place the bar is sticky at all - narrower than that it is an
 * ordinary block at the end of the page and covers nothing.
 */
@media (min-width: 64rem) {
    html {
        /* 64px bar inside a wrapper with 1rem of bottom padding; the rest is
           breathing room, so a match lands above the bar rather than against it. */
        scroll-padding-bottom: 6rem;
    }
}