/*
 * MovieHit admin theme.
 *
 * THE DESIGN RECORD — every later change to the admin is bound by this.
 *
 *   Identity    Django's own: a flat header in Django's blue with the site
 *               name in Django's yellow. No logo mark, no gradients.
 *
 *   Layout      One primitive, everywhere: Django's module — a captioned,
 *               bordered box of rows. Home figures, recent activity,
 *               analytics rankings and maintenance groups are all modules.
 *               No stat-card grids, no shortcut tiles.
 *
 *   Type        The platform's UI face for words (what Django uses: native,
 *               nothing to download) and the platform's monospace, with
 *               tabular figures, for data — counts, ids, scores, addresses.
 *               Sentence case throughout; no all-caps labels.
 *
 *   Colour      Django's blues for structure and links. Yellow only for the
 *               site name and the current item. Status is four muted
 *               text-on-tint pairs; nothing else is coloured. Every pair
 *               below was checked against WCAG 2.1 AA (4.5:1; 3:1 for the
 *               large bold site name) in both themes.
 *
 *   Depth       Borders, not shadows. A shadow means "this floats above the
 *               page" — popovers, tooltips, dialogs — and nothing else.
 *
 *   Motion      None, except instant colour changes on hover and focus.
 *
 *   Corners     4px, as Django; 6px on modules.
 *
 * --mh-theme is checked by base_site.html: if this file never arrives, a
 * banner explains why the admin looks unstyled.
 */

:root,
html[data-theme="light"] {
    --mh-theme: 1;

    --font-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

    --primary: #417690;
    --secondary: #264b5d;
    --accent: #f5dd5d;
    --primary-fg: #ffffff;

    --body-fg: #1d2327;
    --body-bg: #f4f5f6;
    --body-quiet-color: #5a646d;
    --body-medium-color: #3a434a;
    --body-loud-color: #101417;

    --header-color: #ffffff;
    --header-branding-color: #f5dd5d;
    --header-bg: #417690;
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #5a646d;
    --breadcrumbs-link-fg: #2a6788;
    --breadcrumbs-bg: #ffffff;

    --link-fg: #2a6788;
    --link-hover-color: #1b4a63;
    --link-selected-fg: #1b4a63;

    --hairline-color: #e3e6e9;
    --border-color: #c9cfd4;

    --error-fg: #a32117;
    --message-success-bg: #e4f3e9;
    --message-warning-bg: #fbf0d6;
    --message-error-bg: #fbe8e6;

    --darkened-bg: #f2f4f5;
    --selected-bg: #e4edf2;
    --selected-row: #fff6c4;

    --button-fg: #ffffff;
    --button-bg: #417690;
    --button-hover-bg: #346178;
    --default-button-bg: #264b5d;
    --default-button-hover-bg: #1b3a48;
    --close-button-bg: #5a646d;
    --close-button-hover-bg: #454e56;
    --delete-button-bg: #a32117;
    --delete-button-hover-bg: #861b13;

    --object-tools-fg: #ffffff;
    --object-tools-bg: #417690;
    --object-tools-hover-bg: #264b5d;

    --mh-surface: #ffffff;
    --mh-caption: #f2f4f5;
    --mh-floating: 0 8px 24px rgba(16, 24, 32, 0.18);
    --mh-focus: #2a6788;

    --mh-success: #17663a;  --mh-success-bg: #e4f3e9;
    --mh-warning: #7c4a03;  --mh-warning-bg: #fbf0d6;
    --mh-danger:  #a32117;  --mh-danger-bg:  #fbe8e6;
    --mh-info:    #1d5a94;  --mh-info-bg:    #e6eef9;
    --mh-neutral: #454e56;  --mh-neutral-bg: #eceff1;
    --mh-current-fg: #1d2327;

    --mh-chart-primary: #417690;
    --mh-chart-amber:   #b7791f;
    --mh-chart-green:   #2e8555;
    --mh-chart-blue:    #3b6fb6;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #2d6481;
        --secondary: #1d3c4b;
        --body-fg: #e4e7ea;
        --body-bg: #111315;
        --body-quiet-color: #a3acb4;
        --body-medium-color: #c8cdd2;
        --body-loud-color: #ffffff;
        --header-bg: #264b5d;
        --breadcrumbs-fg: #a3acb4;
        --breadcrumbs-link-fg: #8cc5e0;
        --breadcrumbs-bg: #191c1f;
        --link-fg: #8cc5e0;
        --link-hover-color: #b6dcee;
        --link-selected-fg: #b6dcee;
        --hairline-color: #2a2f34;
        --border-color: #3a4147;
        --error-fg: #f3a39a;
        --message-success-bg: #15301f;
        --message-warning-bg: #382909;
        --message-error-bg: #3b1613;
        --darkened-bg: #1f2327;
        --selected-bg: #1d3340;
        --selected-row: #353016;
        --button-bg: #2d6481;
        --button-hover-bg: #377596;
        --default-button-bg: #2d6481;
        --default-button-hover-bg: #377596;
        --close-button-bg: #454e56;
        --close-button-hover-bg: #57616a;
        --delete-button-bg: #a32117;
        --delete-button-hover-bg: #bd2a1e;
        --object-tools-bg: #2d6481;
        --object-tools-hover-bg: #377596;
        --mh-surface: #191c1f;
        --mh-caption: #1f2327;
        --mh-floating: 0 8px 28px rgba(0, 0, 0, 0.6);
        --mh-focus: #8cc5e0;
        --mh-success: #8fd9a8;  --mh-success-bg: #15301f;
        --mh-warning: #f2c46d;  --mh-warning-bg: #382909;
        --mh-danger:  #f3a39a;  --mh-danger-bg:  #3b1613;
        --mh-info:    #93c4ef;  --mh-info-bg:    #132b43;
        --mh-neutral: #c8cdd2;  --mh-neutral-bg: #262a2e;
        --mh-current-fg: #f3eab8;
        --mh-chart-primary: #5f9bb8;
        --mh-chart-amber:   #e3b25a;
        --mh-chart-green:   #6fc790;
        --mh-chart-blue:    #8cb8ec;
    }
}

html[data-theme="dark"] {
    --primary: #2d6481;
    --secondary: #1d3c4b;
    --body-fg: #e4e7ea;
    --body-bg: #111315;
    --body-quiet-color: #a3acb4;
    --body-medium-color: #c8cdd2;
    --body-loud-color: #ffffff;
    --header-bg: #264b5d;
    --breadcrumbs-fg: #a3acb4;
    --breadcrumbs-link-fg: #8cc5e0;
    --breadcrumbs-bg: #191c1f;
    --link-fg: #8cc5e0;
    --link-hover-color: #b6dcee;
    --link-selected-fg: #b6dcee;
    --hairline-color: #2a2f34;
    --border-color: #3a4147;
    --error-fg: #f3a39a;
    --message-success-bg: #15301f;
    --message-warning-bg: #382909;
    --message-error-bg: #3b1613;
    --darkened-bg: #1f2327;
    --selected-bg: #1d3340;
    --selected-row: #353016;
    --button-bg: #2d6481;
    --button-hover-bg: #377596;
    --default-button-bg: #2d6481;
    --default-button-hover-bg: #377596;
    --close-button-bg: #454e56;
    --close-button-hover-bg: #57616a;
    --delete-button-bg: #a32117;
    --delete-button-hover-bg: #bd2a1e;
    --object-tools-bg: #2d6481;
    --object-tools-hover-bg: #377596;
    --mh-surface: #191c1f;
    --mh-caption: #1f2327;
    --mh-floating: 0 8px 28px rgba(0, 0, 0, 0.6);
    --mh-focus: #8cc5e0;
    --mh-success: #8fd9a8;  --mh-success-bg: #15301f;
    --mh-warning: #f2c46d;  --mh-warning-bg: #382909;
    --mh-danger:  #f3a39a;  --mh-danger-bg:  #3b1613;
    --mh-info:    #93c4ef;  --mh-info-bg:    #132b43;
    --mh-neutral: #c8cdd2;  --mh-neutral-bg: #262a2e;
    --mh-current-fg: #f3eab8;
    --mh-chart-primary: #5f9bb8;
    --mh-chart-amber:   #e3b25a;
    --mh-chart-green:   #6fc790;
    --mh-chart-blue:    #8cb8ec;
}

/* ---------------------------------------------------------------- base -- */

body {
    background: var(--body-bg);
    font-family: var(--font-family-primary);
    font-size: 14px;
}

:focus-visible {
    outline: 2px solid var(--mh-focus);
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0;
}

/* Data reads in the monospace, with figures that line up. */
.mh-number,
.mh-score,
.mh-meter b,
#result_list td.field-id,
#result_list td.field-popularity,
#result_list td[class*="field-mh_rating"],
code {
    font-family: var(--font-family-monospace);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- header -- */

#header {
    min-height: 52px;
    padding: 0 24px;
    background: var(--header-bg);
    color: var(--header-color);
}

#branding #site-name {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
}

#site-name a.mh-brand,
#site-name a.mh-brand:link,
#site-name a.mh-brand:visited {
    color: var(--header-branding-color);
    text-decoration: none;
}

#site-name a.mh-brand:hover {
    text-decoration: underline;
}

#user-tools {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

#user-tools a,
#logout-form button {
    border-bottom: 0;
    color: #ffffff;
    text-transform: none;
}

#user-tools a:hover,
#logout-form button:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------- breadcrumbs -- */

ol.breadcrumbs,
div.breadcrumbs {
    padding: 10px 24px;
    border-bottom: 1px solid var(--hairline-color);
    background: var(--breadcrumbs-bg);
    color: var(--breadcrumbs-fg);
    font-size: 13px;
}

ol.breadcrumbs a,
div.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
}

/* ------------------------------------------------------------- sidebar -- */

#nav-sidebar {
    border-right: 1px solid var(--hairline-color);
    background: var(--mh-surface);
}

#nav-filter {
    margin: 6px 8px 10px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--body-bg);
}

#nav-sidebar .module {
    margin-bottom: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#nav-sidebar .module caption {
    padding: 10px 10px 4px;
    background: transparent;
    text-align: left;
}

#container #nav-sidebar .module caption a.section:link,
#container #nav-sidebar .module caption a.section:visited {
    color: var(--body-quiet-color);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}

#nav-sidebar th,
#nav-sidebar td {
    border: 0;
    background: transparent;
}

#nav-sidebar th a {
    color: var(--link-fg);
    font-size: 13.5px;
}

#nav-sidebar .current-model {
    background: var(--selected-row);
}

#nav-sidebar .current-model th a {
    color: var(--mh-current-fg);
    font-weight: 600;
}

#toggle-nav-sidebar {
    border-right: 1px solid var(--hairline-color);
    background: var(--mh-surface);
}

/* ------------------------------------------------------------- content -- */

#content {
    padding: 20px 24px 36px;
}

#content h1 {
    margin-bottom: 16px;
    color: var(--body-loud-color);
    font-size: 22px;
    font-weight: 600;
}

/* The one layout primitive: a captioned, bordered box of rows. */
.module {
    margin-bottom: 16px;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
    overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--hairline-color);
    background: var(--mh-caption);
    color: var(--body-loud-color);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

#container .module caption a.section:link,
#container .module caption a.section:visited {
    color: var(--body-loud-color);
    text-decoration: none;
}

.module table {
    width: 100%;
}

/* Django stripes rows with page colours that differ from a module's own
   surface; inside a module, rows share the surface. */
.module tr,
.module tr:nth-child(odd),
.module tr:nth-child(even) {
    background: transparent;
}

/* Django sets every table header in capitals; sentence case here. */
thead th,
tfoot td {
    letter-spacing: 0;
    text-transform: none;
}

.module th,
.module td {
    border-bottom: 1px solid var(--hairline-color);
}

.module tr:last-child th,
.module tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------- object tools -- */

.object-tools {
    margin-top: 0;
    margin-bottom: 10px;
}

.object-tools a:link,
.object-tools a:visited {
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--object-tools-bg);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.object-tools a:hover,
.object-tools a:focus {
    background: var(--object-tools-hover-bg);
}

/* ---------------------------------------------------- buttons, inputs -- */

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    padding: 7px 14px;
    border-radius: 4px;
    font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select,
.vTextField {
    padding: 6px 9px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--mh-surface);
    color: var(--body-fg);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mh-focus);
}

/* ------------------------------------------------------------ messages -- */

ul.messagelist li {
    margin: 0 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: var(--message-success-bg);
    color: var(--mh-success);
    font-size: 13.5px;
}

ul.messagelist li.warning {
    background-color: var(--message-warning-bg);
    color: var(--mh-warning);
}

ul.messagelist li.error {
    background-color: var(--message-error-bg);
    color: var(--mh-danger);
}

ul.messagelist li.info {
    background-color: var(--mh-info-bg);
    color: var(--mh-info);
}

/* ---------------------------------------------------------- change list -- */

#changelist {
    overflow: visible;
}

#changelist.module {
    border: 0;
    background: transparent;
}

#changelist .changelist-form-container {
    gap: 16px;
}

#toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
}

#toolbar #changelist-search {
    flex: 1 1 auto;
}

#searchbar {
    min-width: 260px;
}

#changelist .actions {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
    color: var(--body-quiet-color);
}

#changelist .results {
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
    overflow-x: auto;
}

#result_list {
    width: 100%;
    border-collapse: collapse;
}

#result_list thead th {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--mh-caption);
    color: var(--body-quiet-color);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

#result_list thead th .text a,
#result_list thead th .text span {
    padding: 9px 12px;
    color: var(--body-quiet-color);
}

#result_list thead th.sorted .text a {
    color: var(--body-loud-color);
}

#result_list tbody th,
#result_list tbody td {
    padding: 9px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--hairline-color);
    background: transparent;
    font-size: 13.5px;
    vertical-align: middle;
}

#result_list tbody tr:nth-child(even) {
    background: transparent;
}

#result_list tbody tr:hover {
    background: var(--darkened-bg);
}

#result_list tbody tr.selected,
#result_list tbody tr.selected:hover {
    background: var(--selected-row);
}

#result_list tbody tr:last-child th,
#result_list tbody tr:last-child td {
    border-bottom: 0;
}

html.mh-compact #result_list tbody th,
html.mh-compact #result_list tbody td {
    padding-top: 4px;
    padding-bottom: 4px;
}

tr.mh-clickable {
    cursor: pointer;
}

.paginator {
    margin-top: 10px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--body-quiet-color);
    font-size: 13px;
}

.paginator a:link,
.paginator a:visited {
    padding: 3px 8px;
    border-radius: 4px;
    background: transparent;
    color: var(--link-fg);
}

.paginator .this-page {
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--primary);
    color: #ffffff;
}

#changelist-filter {
    flex: 0 0 240px;
    align-self: flex-start;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
}

#changelist-filter:not(:has(details)):not(:has(h3)) {
    display: none;
}

#changelist-filter h2 {
    padding: 9px 14px;
    border-bottom: 1px solid var(--hairline-color);
    background: var(--mh-caption);
    color: var(--body-loud-color);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

#changelist-filter details {
    border-bottom: 1px solid var(--hairline-color);
}

#changelist-filter details:last-of-type {
    border-bottom: 0;
}

#changelist-filter details summary,
#changelist-filter h3 {
    margin: 0;
    padding: 9px 14px 5px;
    color: var(--body-medium-color);
    font-size: 13px;
    font-weight: 600;
}

#changelist-filter ul {
    margin: 0;
    padding: 0 8px 8px;
    border: 0;
}

#changelist-filter li a {
    display: block;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 13px;
}

#changelist-filter li.selected a {
    background: var(--selected-row);
    color: var(--mh-current-fg);
    font-weight: 600;
}

#changelist ul.toplinks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

#changelist ul.toplinks li {
    margin: 0;
    padding: 0;
}

#changelist ul.toplinks li a {
    padding: 3px 8px;
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    font-size: 12.5px;
}

/* ----------------------------------------------------------- views bar -- */

.mh-views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.mh-views-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

#container a.mh-chip,
#container a.mh-chip:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--mh-surface);
    color: var(--body-medium-color);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

#container a.mh-chip:hover {
    border-color: var(--link-fg);
    color: var(--link-fg);
}

#container a.mh-chip.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.mh-chip-icon {
    font-size: 10px;
}

.mh-chip-group {
    display: inline-flex;
    align-items: center;
}

.mh-chip-group .mh-chip {
    padding-right: 26px;
}

.mh-chip-delete {
    display: inline;
    margin: 0 0 0 -24px;
}

.mh-chip-delete button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--body-quiet-color);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.mh-chip-delete button:hover {
    background: var(--mh-danger-bg);
    color: var(--mh-danger);
}

.mh-chip-group .mh-chip.is-active + .mh-chip-delete button {
    color: #ffffff;
}

.mh-views-divider {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--border-color);
}

.mh-save-view {
    position: relative;
}

.mh-save-view summary {
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--link-fg);
    font-size: 13px;
    list-style: none;
    cursor: pointer;
}

.mh-save-view summary::-webkit-details-marker {
    display: none;
}

.mh-save-view summary:hover {
    text-decoration: underline;
}

/* Floats over the list, so it is the one thing here with a shadow. */
.mh-save-view form {
    position: absolute;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 250px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--mh-floating);
    background: var(--mh-surface);
}

.mh-check {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--body-medium-color);
    font-size: 13px;
}

.mh-density {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--mh-surface);
    color: var(--body-medium-color);
    font-size: 12.5px;
    cursor: pointer;
}

.mh-density:hover {
    border-color: var(--link-fg);
    color: var(--link-fg);
}

/* ------------------------------------------------------------- cells -- */

.mh-empty {
    color: var(--body-quiet-color);
}

.mh-poster {
    display: inline-block;
    flex: 0 0 auto;
    border: 1px solid var(--hairline-color);
    border-radius: 3px;
    background: var(--darkened-bg);
    object-fit: cover;
    vertical-align: middle;
}

.mh-poster-xs { width: 28px; height: 42px; }
.mh-poster-sm { width: 40px; height: 60px; }
.mh-poster-md { width: 56px; height: 84px; }
.mh-poster-lg { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border: 0; border-radius: 0; }

.mh-poster.is-empty {
    display: inline-grid;
    place-items: center;
    color: var(--body-quiet-color);
    font-size: 12px;
    font-weight: 600;
}

.mh-poster-lg.is-empty {
    display: grid;
    font-size: 36px;
}

.mh-film,
.mh-member {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    vertical-align: middle;
}

.mh-film-text,
.mh-member-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.mh-film-title,
.mh-member-name {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mh-film-title a,
.mh-member-name a {
    font-weight: 600;
}

.mh-film-text small,
.mh-member-text small {
    color: var(--body-quiet-color);
    font-size: 12px;
}

/* Members' avatars, drawn exactly as the site draws them: square, in the
   colours, background and lettering each member chose. */
.mh-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
    user-select: none;
    vertical-align: middle;
}

.mh-avatar-sm { width: 30px; height: 30px; font-size: 11px; }
.mh-avatar-md { width: 40px; height: 40px; font-size: 14px; }

.mh-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--mh-neutral-bg);
    color: var(--mh-neutral);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.mh-pill-success { background: var(--mh-success-bg); color: var(--mh-success); }
.mh-pill-warning { background: var(--mh-warning-bg); color: var(--mh-warning); }
.mh-pill-danger  { background: var(--mh-danger-bg);  color: var(--mh-danger); }
.mh-pill-info    { background: var(--mh-info-bg);    color: var(--mh-info); }
.mh-pill-accent  { background: var(--selected-row);  color: var(--mh-current-fg); }

.mh-pill-tiny {
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
}

.mh-when {
    color: var(--body-medium-color);
    white-space: nowrap;
}

.mh-score {
    display: inline-block;
    min-width: 32px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

.mh-score-success { background: var(--mh-success-bg); color: var(--mh-success); }
.mh-score-warning { background: var(--mh-warning-bg); color: var(--mh-warning); }
.mh-score-danger  { background: var(--mh-danger-bg);  color: var(--mh-danger); }

.mh-meter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.mh-meter-cells {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 2px;
}

.mh-meter-cells i {
    width: 5px;
    height: 13px;
    border-radius: 1px;
    background: var(--hairline-color);
}

.mh-meter-success .mh-meter-cells i.on { background: var(--mh-success); }
.mh-meter-warning .mh-meter-cells i.on { background: var(--mh-warning); }
.mh-meter-danger  .mh-meter-cells i.on { background: var(--mh-danger); }

.mh-meter b {
    color: var(--body-quiet-color);
    font-size: 12px;
    font-weight: 500;
}

.mh-muted {
    color: var(--body-quiet-color);
    font-size: 12.5px;
}

.mh-detail {
    max-width: 760px;
    max-height: 360px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    background: var(--darkened-bg);
    overflow: auto;
    font-size: 12px;
}

/* ------------------------------------------------------- change form -- */

fieldset.module {
    margin-bottom: 16px;
}

.form-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline-color);
}

.aligned label {
    color: var(--body-medium-color);
    font-weight: 600;
}

.help,
p.help,
div.help {
    color: var(--body-quiet-color);
    font-size: 12.5px;
}

.submit-row {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--mh-surface);
}

.errornote {
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--mh-danger-bg);
    color: var(--mh-danger);
}

/* ---------------------------------------------------------- home page -- */
/* Django's own shape: every app as one list on the left, a sidebar on the
   right with the figures, recent activity and recent actions. */

.dashboard #content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 20px;
    align-items: start;
    width: auto;
    max-width: 1180px;
}

/* Django 6 wraps the title in .titles-and-tools; each piece is placed
   explicitly, so nothing depends on the order Django writes them in. */
.dashboard #content > h1,
.dashboard #content > .titles-and-tools {
    grid-column: 1 / -1;
}

.dashboard #content > #content-main {
    grid-column: 1;
}

.dashboard #content > #content-related {
    grid-column: 2;
}

.dashboard #content > #content-main,
.dashboard #content > #content-related {
    float: none;
    width: auto;
    margin: 0;
}

.dashboard #content > br.clear {
    display: none;
}

.dashboard #content-main .module {
    margin: 0 0 14px;
}

.dashboard .module table th,
.dashboard .module table td {
    padding: 6px 12px;
    font-size: 13.5px;
}

.dashboard .module table td {
    width: 1%;
    white-space: nowrap;
}

.dashboard #content-main .module th a {
    font-weight: 500;
}

#content-related .module {
    margin: 0 0 14px;
}

#content-related .module h2 {
    padding: 9px 14px;
    font-size: 13.5px;
}

.mh-glance td {
    text-align: right;
}

.mh-glance td a {
    color: var(--body-loud-color);
    font-weight: 600;
}

.mh-recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mh-recent-list li {
    padding: 7px 14px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 13px;
    line-height: 1.45;
    list-style: none;
}

.mh-recent-list li:last-child {
    border-bottom: 0;
}

.mh-recent-list .mini {
    display: block;
    margin-top: 1px;
}

.mh-recent-list li.mh-recent-warning .mini { color: var(--mh-warning); }
.mh-recent-list li.mh-recent-danger .mini  { color: var(--mh-danger); }

.mh-caption-link {
    float: right;
    font-size: 12.5px;
    font-weight: 400;
}

#container #content-related a.mh-caption-link {
    color: var(--link-fg);
    text-decoration: none;
}

#container #content-related a.mh-caption-link:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .dashboard #content {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard #content > #content-related {
        grid-column: 1;
    }
}

/* ------------------------------------------------------ catalogue grid -- */

.mh-layout-switch {
    display: inline-flex;
    margin: 0 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

#container .mh-layout-switch a,
#container .mh-layout-switch a:visited {
    padding: 4px 14px;
    background: var(--mh-surface);
    color: var(--body-medium-color);
    font-size: 13px;
    text-decoration: none;
}

#container .mh-layout-switch a + a {
    border-left: 1px solid var(--border-color);
}

#container .mh-layout-switch a.is-active {
    background: var(--primary);
    color: #ffffff;
}

.mh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

#container a.mh-card,
#container a.mh-card:visited {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
    color: var(--body-fg);
    text-decoration: none;
    overflow: hidden;
}

#container a.mh-card:hover {
    border-color: var(--link-fg);
}

#container a.mh-card:hover .mh-card-title {
    text-decoration: underline;
}

.mh-card-poster {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--hairline-color);
}

.mh-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 10px 10px;
}

.mh-card-title {
    color: var(--body-loud-color);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}

.mh-card-meta {
    color: var(--body-quiet-color);
    font-size: 12px;
}

.mh-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
}

.mh-card-foot .mh-meter-cells i {
    width: 4px;
    height: 10px;
}

/* ----------------------------------------------------------------- login -- */

body.login {
    min-height: 100vh;
    background: var(--body-bg);
}

.login #container {
    margin-top: 12vh;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: var(--mh-surface);
    overflow: hidden;
}

.login #header {
    padding: 14px 20px;
}

.login #content {
    padding: 20px 24px 24px;
}

.login .submit-row {
    position: static;
    padding: 10px 0 0;
    border: 0;
    background: transparent;
}

.login .submit-row input {
    width: 100%;
    padding: 9px;
}

/* --------------------------------------------------------------- links -- */
/*
 * Django underlines content links with a:not(#header a, ...), whose :not()
 * carries an id's weight. These components carry their own affordance, so
 * the reset is id-weighted too. Links in tables still underline on hover.
 */
#container :is(.mh-film-title a, .mh-member-name a, .mh-glance a, .mh-recent-list a, .mha-rank a, #result_list a,
               #changelist-filter a, ol.breadcrumbs a, div.breadcrumbs a, .paginator a,
               a.mh-chip, a.mh-card, .mh-layout-switch a, .mha-ranges a) {
    text-decoration: none;
}

#container :is(.mh-film-title a, .mh-member-name a, .mh-glance a, .mh-recent-list a, .mha-rank a, #result_list a, ol.breadcrumbs a, div.breadcrumbs a):hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1024px) {
    #header { padding: 0 14px; }
    #content { padding: 14px; }
    ol.breadcrumbs, div.breadcrumbs { padding: 9px 14px; }
}

@media (max-width: 767px) {
    #searchbar { min-width: 0; width: 100%; }
}

/* Django gives every list in the sidebar its own margins; this one lines up
   with its heading. */
#content-related ul.mh-recent-list {
    margin: 0;
    padding: 0;
}

#content-related ul.mh-recent-list li {
    margin: 0;
    padding: 7px 14px;
}

/* "Log out" is a button; it reads at the same size as the links beside it. */
#logout-form button {
    font-size: inherit;
}

#content-related .mh-recent h2 {
    margin: 0;
}

/* ---------------------------------------------------- sideways scrolling -- */
/* A list wider than its box gets one scrollbar, pinned to the bottom of the
   screen while the list is in view (added by theme.js); the box's own
   scrollbar, which sits under the last row, is hidden. */
#changelist .results.mh-has-hscroll {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    scrollbar-width: none;
}

#changelist .results.mh-has-hscroll::-webkit-scrollbar {
    display: none;
}

#changelist .results:focus-visible {
    outline: 2px solid var(--mh-focus);
    outline-offset: 2px;
}

.mh-hscroll {
    position: sticky;
    bottom: 0;
    z-index: 25;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--hairline-color);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: var(--mh-surface);
}

.mh-hscroll[hidden] {
    display: none;
}

.mh-hscroll > div {
    height: 1px;
}

/* Drawn explicitly, so it shows on every system — including those whose
   scrollbars normally take no space until you scroll (macOS by default). */
.mh-hscroll {
    min-height: 12px;
}

/* Chrome ignores the custom scrollbar below once these standard properties
   are set, so only browsers without it (Firefox) get them. */
@supports not selector(::-webkit-scrollbar) {
    .mh-hscroll {
        scrollbar-color: var(--body-quiet-color) var(--mh-surface);
        scrollbar-width: auto;
    }
}

.mh-hscroll::-webkit-scrollbar {
    height: 12px;
}

.mh-hscroll::-webkit-scrollbar-track {
    background: var(--mh-surface);
}

.mh-hscroll::-webkit-scrollbar-thumb {
    border: 3px solid var(--mh-surface);
    border-radius: 6px;
    background: var(--body-quiet-color);
}

.mh-hscroll::-webkit-scrollbar-thumb:hover {
    background: var(--body-medium-color);
}