/*
 * The bar the admin and the browsable API share: dark in both themes, like the site's
 * menu, with the Site / API / Admin tabs. js/area_theme.js puts
 * .theme-light or .theme-dark on <html> from the theme admin/js/theme.js keeps. On the API
 * page, which loads REST framework's Bootstrap 3 instead of admin/css/base.css, this also
 * draws the admin's header layout and a dark page body. Sizes are in px because Bootstrap 3
 * sets the root font size to 10px, so rem would differ between the two pages.
 */

/* the bar's colours: dark in both themes, like the site's menu; the fallbacks are the
   admin's own teal, for a page whose script did not run */

.theme-light,
.theme-dark {
    --area-bar-bg: #212529;
    --area-bar-fg: #dee2e6;
    --area-bar-border: #373b3e;
    --area-title: #f5dd5d;
    --area-tab-border: rgba(255, 255, 255, 0.2);
    --area-tab-bg: rgba(255, 255, 255, 0.06);
    --area-tab-hover: rgba(255, 255, 255, 0.15);
    --area-current-bg: #f8f9fa;
    --area-current-fg: #212529;
    --area-underline: rgba(255, 255, 255, 0.25);
}

/* the admin's own header, recoloured; its links, user tools and theme toggle read these */

#header {
    --header-bg: var(--area-bar-bg, #417690);
    --header-link-color: var(--area-bar-fg, #ffffff);
    --header-color: var(--area-bar-fg, #ffffcc);
    border-bottom: 1px solid var(--area-bar-border, transparent);
}

#header #site-name a:link,
#header #site-name a:visited {
    color: var(--area-title, #f5dd5d);
}

#header #user-tools a,
#header #logout-form button {
    border-bottom-color: var(--area-underline, rgba(255, 255, 255, 0.25));
}

#branding {
    align-items: center;
}

/* the tabs, on both pages */

.area-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.area-tabs a,
#header .area-tabs a {
    padding: 4px 14px;
    border: 1px solid var(--area-tab-border, rgba(255, 255, 255, 0.25));
    border-radius: 999px;
    background: var(--area-tab-bg, rgba(255, 255, 255, 0.08));
    color: var(--area-bar-fg, #ffffff);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.area-tabs a:hover,
.area-tabs a:focus-visible,
#header .area-tabs a:hover,
#header .area-tabs a:focus-visible {
    background: var(--area-tab-hover, rgba(255, 255, 255, 0.2));
    color: var(--area-bar-fg, #ffffff);
    text-decoration: none;
}

.area-tabs a:focus-visible,
#header .area-tabs a:focus-visible {
    outline: 2px solid var(--area-title, #f5dd5d);
    outline-offset: 2px;
}

/* the page you are on */
.area-tabs a[aria-current="page"],
#header .area-tabs a[aria-current="page"] {
    border-color: var(--area-current-bg, #ffffff);
    background: var(--area-current-bg, #ffffff);
    color: var(--area-current-fg, #264b5d);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* the admin header's layout, on the API page */

.area-header {
    /* what admin/css/dark_mode.css's theme toggle reads */
    --header-link-color: var(--area-bar-fg, #ffffff);
    --header-bg: var(--area-bar-bg, #417690);

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 40px;
    border-bottom: 1px solid var(--area-bar-border, transparent);
    background: var(--header-bg);
    color: var(--area-bar-fg, #ffffcc);
    font-family: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    /* Bootstrap 3's 1.43 makes the bar 2px taller than the admin's */
    line-height: normal;
}

.area-header .area-site-name,
.area-header .area-user-tools {
    line-height: normal;
}

.area-header .area-branding {
    display: flex;
    align-items: center;
}

.area-header .area-site-name,
.area-header .area-site-name:hover {
    margin: 0 20px 0 0;
    color: var(--area-title, #f5dd5d);
    font-size: 24px;
    font-weight: 300;
    text-decoration: none;
}

.area-header .area-user-tools,
.area-header .area-user-tools button {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.area-header .area-user-tools strong {
    font-weight: 600;
}

.area-header .area-user-tools a,
.area-header .area-user-tools form button {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--area-underline, rgba(255, 255, 255, 0.25));
    background: none;
    color: var(--area-bar-fg, #ffffff);
    text-decoration: none;
    cursor: pointer;
}

.area-header .area-user-tools a:hover,
.area-header .area-user-tools form button:hover {
    border-bottom: 0;
    text-decoration: none;
}

.area-header .area-user-tools form {
    display: inline;
}

.area-header .base-svgs {
    display: none;
}

/* admin/css/dark_mode.css sizes the toggle's icons in rem */
.area-header .theme-toggle svg {
    width: 16px;
    height: 16px;
}

.area-header .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* the API page's body in the dark theme; the API template sets body.api-page */

/* admin/css/dark_mode.css asks the browser for its dark colours whenever the system is
   dark, and admin/css/base.css, which turns that back off in light mode, is not loaded there */
html.theme-light {
    color-scheme: light;
}

.theme-dark body.api-page {
    background: #121212;
    color: #eeeeee;
}

/* the header and the buttons keep their own colours */
.theme-dark .api-page a:not(.btn):not(.area-header a),
.theme-dark .api-page a:not(.btn):not(.area-header a):hover {
    color: #81d4fa;
}

.theme-dark .api-page h1,
.theme-dark .api-page h2,
.theme-dark .api-page h3 {
    color: #ffffff;
}

.theme-dark .api-page .breadcrumb {
    background: #212121;
}

.theme-dark .api-page .breadcrumb > .active {
    color: #d0d0d0;
}

.theme-dark .api-page .prettyprint,
.theme-dark .api-page .well,
.theme-dark .api-page .modal-content,
.theme-dark .api-page .dropdown-menu {
    background: #212121;
    border-color: #353535;
    color: #eeeeee;
}

.theme-dark .api-page .dropdown-menu > li > a {
    color: #eeeeee;
}

.theme-dark .api-page .dropdown-menu > li > a:hover {
    background: #353535;
}

.theme-dark .api-page .pln { color: #eeeeee; }
.theme-dark .api-page .str,
.theme-dark .api-page .atv { color: #ff8a80; }
.theme-dark .api-page .lit { color: #81d4fa; }
.theme-dark .api-page .kwd,
.theme-dark .api-page .prettyprint .tag { color: #9fa8da; }

.theme-dark .api-page .nav-tabs {
    border-bottom-color: #353535;
}

.theme-dark .api-page .nav-tabs > li.active > a,
.theme-dark .api-page .nav-tabs > li.active > a:hover {
    background: #212121;
    border-color: #353535 #353535 transparent;
    color: #eeeeee;
}

.theme-dark .api-page .form-control {
    background: #121212;
    border-color: #353535;
    color: #eeeeee;
}

.theme-dark .api-page .btn-default {
    background: #333333;
    border-color: #353535;
    color: #eeeeee;
}