/* Theme-aware styling for changelist "Reports" panels and the inline tip
   callouts. Replaces hard-coded `background:#eaf4fc; color:#0c3c5c` inline
   styles that were nearly invisible against the light admin theme and
   ignored dark mode entirely. Everything here is driven by Django admin's
   own CSS custom properties, which the admin redefines per theme, so these
   adapt to light / dark / system automatically. */

.admin-callout {
    /* var(--darkened-bg) fallback for the (rare) browser without color-mix */
    background: var(--darkened-bg);
    background: color-mix(in srgb, var(--primary) 12%, var(--body-bg));
    color: var(--body-fg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 3px;
    padding: 10px 14px;
}

.admin-callout a {
    color: var(--link-fg);
}

.admin-callout--flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Warning / over-limit variant (was inline #fdecea / #f5c2c0). */
.admin-callout--danger {
    background: var(--darkened-bg);
    background: color-mix(in srgb, var(--error-fg, #ba2121) 14%, var(--body-bg));
    border-left-color: var(--error-fg, #ba2121);
}
.admin-callout--danger strong { color: var(--error-fg, #ba2121); }

/* messagelist gives its <li> a coloured left bar + its own bg; when the <li>
   is one of our callouts, our styling should win. */
ul.messagelist li.admin-callout {
    background: var(--darkened-bg);
    background: color-mix(in srgb, var(--primary) 12%, var(--body-bg));
    color: var(--body-fg);
    padding: 10px 14px;
}

/* Report forms sitting inside a .module "Reports" box on a changelist. The
   .module's own <h2> header bar is already high-contrast in both themes;
   this just lays the form rows out and separates them. */
.report-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
}

.report-form + .report-form {
    border-top: 1px solid var(--hairline-color);
}

.report-form > label:first-child {
    min-width: 170px;
    font-weight: 600;
    color: var(--body-fg);
}

.report-form input[type="date"],
.report-form select {
    color: var(--body-fg);
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 3px 6px;
}