/* ---------------------------------
   KrushComics Django Admin

   Loaded ONLY by templates/admin/base_site.html, never by public pages.

   Django 6.1's admin stylesheets are written entirely against CSS custom
   properties, so almost all of the recolouring below is done by redefining
   those properties rather than by writing new rules. That keeps this file
   small, avoids broad selectors that could fight the admin's own layout,
   and means built-in widgets recolour themselves automatically.

   Colour values are the same ones used by core/css/site.css.
--------------------------------- */


/* ---------------------------------
   Palette

   Match the public site's charcoal and orange palette in every saved
   Django theme state. This stylesheet follows Django's theme styles.
--------------------------------- */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
    /* Public palette from core/css/site.css, without its layout reset.
       --krush-brand stays a deeper orange than the public accent because
       Django puts light text on it (buttons, module headings). */
    --krush-background: #0b0c0f;
    --krush-surface: #14161b;
    --krush-surface-raised: #1a1d23;
    /* Red accent. Previous orange: #b94d16 / #ff8a3d / #ffa766 /
       #9d3e10 / #2e1f15 */
    --krush-brand: #b42318;
    --krush-brand-text: #ff4f4f;
    --krush-accent: #ff7a7a;
    --krush-brand-dark: #8f1d14;
    --krush-brand-tint: #2e1517;
    --krush-on-brand: #fff5ed;
    --krush-text: #e6e8eb;
    --krush-muted: #969ca8;
    --krush-border: #22262e;

    --primary: var(--krush-brand);
    --secondary: var(--krush-brand);
    --primary-fg: var(--krush-on-brand);
    --accent: var(--krush-brand-text);

    --body-fg: var(--krush-text);
    --body-bg: var(--krush-background);
    --body-quiet-color: var(--krush-muted);
    --body-medium-color: var(--krush-text);
    --body-loud-color: var(--krush-text);

    --header-color: var(--krush-text);
    --header-branding-color: var(--krush-brand-text);
    --header-bg: var(--krush-surface);
    --header-link-color: var(--krush-on-brand);

    --breadcrumbs-bg: var(--krush-surface-raised);
    --breadcrumbs-fg: var(--krush-text);
    --breadcrumbs-link-fg: var(--krush-brand-text);

    --link-fg: var(--krush-brand-text);
    --link-hover-color: var(--krush-accent);
    --link-selected-fg: var(--krush-accent);

    --hairline-color: var(--krush-border);
    --border-color: var(--krush-border);
    --darkened-bg: var(--krush-surface);
    --selected-bg: var(--krush-surface-raised);
    --selected-row: var(--krush-brand-tint);

    --button-fg: var(--krush-on-brand);
    --button-bg: var(--krush-brand);
    --button-hover-bg: var(--krush-brand-dark);
    --default-button-bg: var(--krush-brand);
    --default-button-hover-bg: var(--krush-brand-dark);
    --close-button-bg: var(--krush-border);
    --close-button-hover-bg: var(--krush-surface-raised);
    --delete-button-bg: #b8203e;
    --delete-button-hover-bg: #9d1b35;

    --object-tools-fg: var(--krush-on-brand);
    --object-tools-bg: var(--krush-brand);
    --object-tools-hover-bg: var(--krush-brand-dark);

    /* Status colours retain their meaning on dark surfaces in every theme. */
    --error-fg: #ff8997;
    --message-debug-bg: var(--krush-surface-raised);
    --message-info-bg: var(--krush-surface-raised);
    --message-success-bg: #183b2a;
    --message-warning-bg: var(--krush-brand-tint);
    --message-error-bg: #48232b;
    --message-debug-icon: url("../../admin/img/icon-debug-dark.54c8a9312862.svg");
    --message-info-icon: url("../../admin/img/icon-info-dark.d45fe10cd8bd.svg");
    --message-success-icon: url("../../admin/img/icon-yes-dark.89c587634cdd.svg");
    --message-warning-icon: url("../../admin/img/icon-alert-dark.0feae5205d73.svg");
    --message-error-icon: url("../../admin/img/icon-no-dark.b8cdf102c9f0.svg");

    color-scheme: dark;
}

/* ---------------------------------
   Site-wide navbar

   Reproduces the public navbar's appearance from core/css/site.css. The
   public stylesheet is deliberately NOT loaded here -- it carries a global
   `* { margin: 0; padding: 0 }` reset that would break the admin's layout.

   Everything is scoped to #krush-admin-nav, the admin-only wrapper, so
   these rules cannot reach any other part of the admin.
--------------------------------- */

/* Same self-hosted font files as core/css/site.css. Only the navbar
   uses it; the rest of the admin keeps Django's own font stack. */
@font-face {
    font-family: "JetBrainsMono Nerd Font";
    src: url("../fonts/JetBrainsMonoNerdFont-Regular.e8920ccb1600.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrainsMono Nerd Font";
    src: url("../fonts/JetBrainsMonoNerdFont-Bold.f69965d882c5.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

#krush-admin-nav {
    background-color: var(--krush-background);

    border-bottom: 1px solid var(--krush-border);
}

#krush-admin-nav .navbar {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 24px;

    width: min(100% - 80px, 1240px);
    min-height: 60px;

    margin: 0 auto;

    font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
}

#krush-admin-nav .navbar .nav-brand {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-size: 16px;
    font-weight: 700;

    color: var(--krush-text);
}

#krush-admin-nav .navbar .nav-brand-prompt {
    color: var(--krush-brand-text);
}

#krush-admin-nav .navbar .nav-brand-cursor {
    display: inline-block;

    width: 0.55em;
    height: 1.1em;

    margin-left: -6px;

    background-color: var(--krush-brand-text);
}

#krush-admin-nav .navbar .nav-links {
    display: flex;

    gap: 4px;
}

#krush-admin-nav .navbar .nav-links a {
    padding: 6px 12px;

    font-size: 14px;

    color: var(--krush-muted);

    border-radius: 6px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

#krush-admin-nav .navbar .nav-links a:hover,
#krush-admin-nav .navbar .nav-links a:focus {
    color: var(--krush-text);

    background-color: var(--krush-surface);
}

#krush-admin-nav .navbar .nav-links a.is-active {
    color: var(--krush-brand-text);
}

/* Django underlines links via
   `a:not([role="button"], #header a, ...)`, which has a higher specificity
   than a plain `.navbar a`. These two selectors carry one id and two
   classes so they win without needing !important. The public navbar has no
   underline, so this keeps the two navbars looking the same. */
#krush-admin-nav .navbar a.nav-brand,
#krush-admin-nav .navbar .nav-links a {
    text-decoration: none;
}

/* Keyboard focus stays visible. */
#krush-admin-nav .navbar a.nav-brand:focus-visible,
#krush-admin-nav .navbar .nav-links a:focus-visible {
    outline: 2px solid var(--krush-brand-text);
    outline-offset: 3px;
}


/* ---------------------------------
   Responsive Navigation

   Mirrors the 720px breakpoint in core/css/site.css.
--------------------------------- */

@media (max-width: 720px) {

    #krush-admin-nav .navbar {
        flex-wrap: wrap;

        gap: 4px;

        width: min(100% - 32px, 1240px);

        padding: 14px 0 8px;
    }

    #krush-admin-nav .navbar .nav-links {
        width: 100%;

        overflow-x: auto;
    }

}


/* ---------------------------------
   Targeted patches

   Two places where Django reuses a variable in a context that the palette
   above would otherwise leave with poor contrast.
--------------------------------- */

/* Keep the many-to-many clear control readable on the orange heading. */
.selector-chosen .list-footer-display__clear {
    color: var(--krush-on-brand);
}

/* Override the calendar caption's hard-coded dark text for this palette. */
body .calendarbox h2,
body .calendar caption {
    background: var(--krush-brand-tint);
    color: var(--krush-brand-text);
}


/* ---------------------------------
   Form fields

   Django already paints inputs with --body-bg, --body-fg and --border-color,
   so they use charcoal backgrounds, pale text and neutral borders from the palette
   alone. Only the focus state is adjusted, to match the brand-coloured
   focus used by the search box on the public site.
--------------------------------- */

#content input:not([type]):focus,
#content input[type="text"]:focus,
#content input[type="password"]:focus,
#content input[type="email"]:focus,
#content input[type="url"]:focus,
#content input[type="number"]:focus,
#content input[type="tel"]:focus,
#content textarea:focus,
#content select:focus,
#content .vTextField:focus {
    border-color: var(--krush-brand-text);
}


/* ---------------------------------
   Rounding

   The public site uses generously rounded cards and controls. The admin is
   a denser interface, so it gets a smaller radius rather than the site's.
--------------------------------- */

#container .messagelist li {
    border-radius: 8px;
}

#container .button,
#container input[type="submit"],
#container input[type="button"],
#container .submit-row input,
#container .object-tools a {
    border-radius: 6px;
}


/* ---------------------------------
   Login Page

   The site navbar is omitted here (see templates/admin/base_site.html):
   Django narrows #container to a 480px card on this page. The colours still
   come from the palette above, with dark surfaces and an orange submit
   button. Only the card shape and shadow are adjusted.

   Nothing here touches authentication behaviour.
--------------------------------- */

.login #container {
    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.login #header {
    padding: 22px;
}

.login .submit-row input {
    width: 100%;

    padding: 12px;
}