/* Osmose brand theme for Django admin — primary #6a3e1c */

:root,
html[data-theme="light"] {
    --primary: #6a3e1c;
    --secondary: #4f2d13;
    --accent: #b8834f;
    --primary-fg: #fff;

    --header-color: #fff;
    --header-branding-color: var(--primary-fg);
    --header-bg: var(--primary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #f3e4d5;
    --breadcrumbs-bg: var(--secondary);

    --link-fg: #6a3e1c;
    --link-hover-color: #3d220d;
    --link-selected-fg: var(--secondary);

    --selected-row: #f7ede3;
    --error-fg: #a30000;

    --message-success-bg: #d1fae5;
    --message-warning-bg: #fef3c7;
    --message-error-bg: #fde8e8;

    --button-bg: var(--primary);
    --button-hover-bg: var(--secondary);
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: var(--primary);
    --delete-button-bg: #a30000;
    --delete-button-hover-bg: #820000;
}

html[data-theme="dark"] {
    --primary: #6a3e1c;
    --secondary: #8a5a33;
    --header-bg: #4f2d13;
    --link-fg: #e0b48a;
    --link-hover-color: #f3d3b3;
    --selected-row: #3d2a1c;
    --error-fg: #e5484d;
    --message-success-bg: #064e3b;
    --message-warning-bg: #451a03;
    --message-error-bg: #450a0a;
    --delete-button-bg: #a30000;
    --delete-button-hover-bg: #c62828;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #6a3e1c;
        --secondary: #8a5a33;
        --header-bg: #4f2d13;
        --link-fg: #e0b48a;
        --link-hover-color: #f3d3b3;
        --selected-row: #3d2a1c;
        --error-fg: #e5484d;
        --message-success-bg: #064e3b;
        --message-warning-bg: #451a03;
        --message-error-bg: #450a0a;
        --delete-button-bg: #a30000;
        --delete-button-hover-bg: #c62828;
    }
}

/* Status colors, available for admin `classes` hooks */
.osmose-status-success { color: #047857; }
.osmose-status-error { color: #a30000; }
.osmose-status-warning { color: #b45309; }

/* Logo: brown on transparent, so it sits on a light pill to stay visible on the brown header */
#header #site-name a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    height: 32px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 6px;
    padding: 2px 6px;
}

.login-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--body-fg);
    font-size: 1.1rem;
    text-align: center;
}

.brand-logo-login {
    height: 72px;
    background: transparent;
    padding: 0;
}

.login #content {
    padding-top: 10px;
}

.submit-row input[type="submit"] {
    background: var(--primary);
}

.submit-row input[type="submit"]:hover,
.submit-row input[type="submit"]:focus {
    background: var(--button-hover-bg);
}