/* All classes/ids with "mera-" prefix are defined in our own templates.
 * All other classes/ids are from Django admin templates.
 */

body {
    font-family: Inter, "Inter Placeholder", sans-serif !important;
    background: url("mera-background-alt.jpg") no-repeat center center fixed !important;
    background-repeat: no-repeat !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    background-blend-mode: overlay !important;
    background-size: cover !important;
    height: 100vh;
    width: 100vw;
}

#branding {
    width: 3em;
}

#branding img {
    border-radius: 10px;
}

.submit-row .deletelink {
    position: relative;
    color: transparent !important;
    padding: 12px 40px !important;
    border: none !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-size: 16px !important;
    font-family: "Inter Placeholder", sans-serif !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 0;
}

.submit-row .deletelink::after {
    content: "Delete";
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.breadcrumbs {
    display: none;
}

:root {
    --mera-filestorage-background: #1d1d1d;
    --mera-brand-color: #049ffc;
    --mera-brand-color-alt: #0447c2;
    --mera-button-color: #3a3a3a;
    --mera-header-color: #0a0a0acc;
    --primary: var(--mera-brand-color-alt);
    --header-bg: var(--mera-brand-color);
    /* Used by Django */
}

/* copied from: https://github.com/django/django/blob/86661f2449fb0903f72b3522c68e146934013377/django/contrib/admin/static/admin/css/dark_mode.css */
:root {
    --primary: #264b5d;
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #d0d0d0;
    --body-medium-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: black;
    /* original: var(--primary) */

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;

    color-scheme: dark;
}

/* Hide the theme toggle button because we're forcing dark mode */
.theme-toggle {
    display: none;
}

#header {
    background-color: var(--mera-header-color);
}

#header a,
#header a:hover,
#user-tools,
#logout-form button {
    color: #0c78bb !important;
    text-decoration: none !important;
    border: none !important;
    font-weight: normal !important;
}

#container {
    border: 0 !important;
    ;
    border-radius: 45 !important;
}

#site-name a {
    color: white !important;
    font-family: cursive;
}

#content-start.content {
    width: 60vw;
}

#toggle-nav-sidebar {
    background-color: transparent !important;
    border: none !important;
}

.readonly img {
    width: 60vw;
}

caption {
    background-color: var(--mera-header-color) !important;
}

caption h1,
h2,
h3,
h4,
h5,
p,
a {
    color: #cacaca !important;
}

.fieldset-heading {
    background-color: var(--mera-button-color) !important;
    border: 0px var(--mera-button-color) !important;
}

.fieldset-heading {
    background-color: var(--mera-header-color) !important;
}

#changelist-filter-header {
    background-color: var(--mera-button-color) !important;
    border: 0px var(--mera-button-color) !important;
}

.module .aligned {
    background-color: var(--mera-filestorage-background)
}

.field-download_file a {
    color: var(--mera-brand-color) !important;
}

.inline-heading {
    background-color: var(--mera-header-color) !important;
    border: 0px var(--mera-header-color) !important;
}

.collapse summary {
    background-color: var(--mera-header-color) !important;
    border: 0px var(--mera-header-color) !important;
}

.collapse summary h1,
h2,
h3,
h4,
h5,
p,
a {
    color: #cacaca !important;
    border: none;
}

/* copied from main call-to-action button on https://mera.fit */
input[type=submit] {
    background-color: var(--mera-button-color) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 2rem !important;
    height: 40px !important;
    border-radius: 20px;
    /* TODO */
    cursor: pointer !important;
    font-size: 1rem !important;
}

input[type=submit]:hover {
    background-color: var(--mera-brand-color-alt) !important;
}

#nav-sidebar {
    background: none !important;
    border: none !important;
}

/* Progress Charts */
.mera-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 1000px) {
    .mera-progress-grid {
        grid-template-columns: 1fr;
    }
}

.mera-chart-card {
    margin-bottom: 24px;
    border: 1px solid #555;
    padding: 12px;
    border-radius: 6px;
    background: #1f1f1f;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.mera-chart-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1.05em;
    color: #fff;
}

.mera-no-data {
    color: #aaa;
}

.mera-svg-wrapper {
    width: 100%;
    overflow-x: auto;
}

.mera-chart-card svg {
    width: 100%;
    height: auto;
    display: block;
}