/* Pharmacy BI look for the Django admin: the palette of the platform console
   (pharmacy-bi static/css/theme.css) mapped onto the admin's own colour
   variables, so no admin markup has to change. */
:root,
html[data-theme="light"] {
    --primary: #32634a;
    --secondary: #17362f;
    --accent: #a5d4ad;
    --primary-fg: #fffefa;
    --body-fg: #203631;
    --body-bg: #f4f6ef;
    --body-quiet-color: #586a61;
    --body-loud-color: #17362f;
    --header-color: #f1f4ec;
    --header-branding-color: #f1f4ec;
    --header-bg: #17362f;
    --header-link-color: #b8c9be;
    --breadcrumbs-fg: #b8c9be;
    --breadcrumbs-link-fg: #f1f4ec;
    --breadcrumbs-bg: #27443e;
    --link-fg: #32634a;
    --link-hover-color: #17362f;
    --link-selected-fg: #17362f;
    --hairline-color: #e2eae3;
    --border-color: #c9d6cb;
    --error-fg: #9c463b;
    --message-success-bg: #e8f0e7;
    --message-warning-bg: #fff9f1;
    --message-error-bg: #f6e4e0;
    --darkened-bg: #edf1e9;
    --selected-bg: #e8f0e7;
    --selected-row: #fff9f1;
    --button-fg: #fffefa;
    --button-bg: #32634a;
    --button-hover-bg: #17362f;
    --default-button-bg: #32634a;
    --default-button-hover-bg: #17362f;
    --close-button-bg: #586a61;
    --close-button-hover-bg: #203631;
    --delete-button-bg: #9c463b;
    --delete-button-hover-bg: #7d352c;
    --object-tools-fg: #fffefa;
    --object-tools-bg: #586a61;
    --object-tools-hover-bg: #32634a;
    --font-family-primary: "IBM Plex Sans", "IBM Plex Sans Arabic", Inter,
        "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --font-family-monospace: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo,
        Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #52b788;
        --secondary: #0a1612;
        --accent: #74c69d;
        --primary-fg: #0e1d17;
        --body-fg: #e8f0ea;
        --body-bg: #0e1d17;
        --body-quiet-color: #9db3a6;
        --body-loud-color: #ffffff;
        --header-color: #e8f0ea;
        --header-branding-color: #e8f0ea;
        --header-bg: #0a1612;
        --header-link-color: #cfe0d6;
        --breadcrumbs-fg: #8aa496;
        --breadcrumbs-link-fg: #cfe0d6;
        --breadcrumbs-bg: #162b23;
        --link-fg: #74c69d;
        --link-hover-color: #b9e0bd;
        --link-selected-fg: #b9e0bd;
        --hairline-color: #2a443a;
        --border-color: #3b5a4d;
        --error-fg: #f08a7e;
        --message-success-bg: #1d4a37;
        --message-warning-bg: #2a2218;
        --message-error-bg: #3a1f1b;
        --darkened-bg: #162b23;
        --selected-bg: #1d4a37;
        --selected-row: #2a2218;
        --button-fg: #0e1d17;
        --button-bg: #52b788;
        --button-hover-bg: #74c69d;
        --default-button-bg: #52b788;
        --default-button-hover-bg: #74c69d;
        --close-button-bg: #3b5a4d;
        --close-button-hover-bg: #4d6e60;
        --delete-button-bg: #f08a7e;
        --delete-button-hover-bg: #f3a096;
        --object-tools-fg: #e8f0ea;
        --object-tools-bg: #3b5a4d;
        --object-tools-hover-bg: #4d6e60;
    }
}

html[data-theme="dark"] {
    --primary: #52b788;
    --secondary: #0a1612;
    --accent: #74c69d;
    --primary-fg: #0e1d17;
    --body-fg: #e8f0ea;
    --body-bg: #0e1d17;
    --body-quiet-color: #9db3a6;
    --body-loud-color: #ffffff;
    --header-color: #e8f0ea;
    --header-branding-color: #e8f0ea;
    --header-bg: #0a1612;
    --header-link-color: #cfe0d6;
    --breadcrumbs-fg: #8aa496;
    --breadcrumbs-link-fg: #cfe0d6;
    --breadcrumbs-bg: #162b23;
    --link-fg: #74c69d;
    --link-hover-color: #b9e0bd;
    --link-selected-fg: #b9e0bd;
    --hairline-color: #2a443a;
    --border-color: #3b5a4d;
    --error-fg: #f08a7e;
    --message-success-bg: #1d4a37;
    --message-warning-bg: #2a2218;
    --message-error-bg: #3a1f1b;
    --darkened-bg: #162b23;
    --selected-bg: #1d4a37;
    --selected-row: #2a2218;
    --button-fg: #0e1d17;
    --button-bg: #52b788;
    --button-hover-bg: #74c69d;
    --default-button-bg: #52b788;
    --default-button-hover-bg: #74c69d;
    --close-button-bg: #3b5a4d;
    --close-button-hover-bg: #4d6e60;
    --delete-button-bg: #f08a7e;
    --delete-button-hover-bg: #f3a096;
    --object-tools-fg: #e8f0ea;
    --object-tools-bg: #3b5a4d;
    --object-tools-hover-bg: #4d6e60;
}

body { font-size: 15px; }

#header { padding: 14px 24px; }
#branding h1 { font-weight: 750; }
#branding h1 a:link, #branding h1 a:visited { color: var(--header-branding-color); }

/* Brand mark, as in the platform console sidebar. */
#site-name a::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-inline-end: 10px;
    vertical-align: middle;
    border-radius: 9px;
    background: var(--primary);
}

.module {
    border: 1px solid var(--hairline-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.module caption, .module h2, .module h3 {
    background: var(--primary);
    color: var(--primary-fg);
    font-weight: 650;
}
.module caption a:link, .module caption a:visited { color: var(--primary-fg); }

.button, input[type=submit], input[type=button], .submit-row input, a.button {
    border-radius: 8px;
    font-weight: 600;
}
.object-tools a:link, .object-tools a:visited { border-radius: 999px; }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
    border-radius: 8px;
    border-color: var(--border-color);
    background: var(--body-bg);
    color: var(--body-fg);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
    outline-offset: 0;
}

thead th, thead th a:link, thead th a:visited {
    color: var(--body-quiet-color);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
#changelist table thead th { background: var(--darkened-bg); }
#changelist-filter { border-radius: 12px; overflow: hidden; }

.login #container {
    border: 1px solid var(--hairline-color);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(25, 51, 41, .1);
}