/* Style overrides for the ADAPT theme (Aligning Discoveries Across Psychedelic Therapies)
 * Palette, typography and graphics follow https://adaptroadmap.org/
 */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300..800;1,300..800&family=Roboto+Slab:wght@300..700&display=swap');

:root {
    /* ADAPT brand palette (from adaptroadmap.org) */
    --adapt-teal-deep: #004f59;
    --adapt-teal-ada: #208083;   /* accessible teal: white text passes WCAG AA */
    --adapt-teal: #369da0;
    --adapt-teal-tint: #9acecf;
    --adapt-teal-wash: #e7f3f3;
    --adapt-slate: #404d57;
    --adapt-gray-shade: #4a545c;
    --adapt-gray: #6a7883;
    --adapt-navy: #112337;
    --adapt-purple: #472b74;
    --adapt-periwinkle: #6068b2;
    --adapt-orchid: #865991;
    --adapt-orchid-tint: #afb3d9;
    --adapt-burgundy: #890c58;
    --adapt-orange: #db592a;
    --adapt-orange-ada: #c63f0e;
    --adapt-orange-tint: #edac94;
    --adapt-ochre: #b78b20;

    --adapt-primary: var(--adapt-teal-ada);
    --adapt-primary-dark: var(--adapt-teal-deep);
    --adapt-accent: var(--adapt-teal);
    --adapt-highlight: var(--adapt-teal-wash);
    --adapt-spectrum: linear-gradient(90deg,
        var(--adapt-teal) 0%, var(--adapt-teal-ada) 20%, var(--adapt-purple) 40%,
        var(--adapt-periwinkle) 55%, var(--adapt-orchid) 68%, var(--adapt-orange) 84%, var(--adapt-ochre) 100%);

    --adapt-font-body: "Raleway", arial, sans-serif;
    --adapt-font-heading: "Roboto Slab", georgia, serif;

    /* redefining core XNAT colors */
    --XNAT-blue-100: var(--adapt-teal-wash);
    --XNAT-blue-200: #cfe7e7;
    --XNAT-blue-300: var(--adapt-teal-tint);
    --XNAT-blue-400: var(--adapt-teal);
    --XNAT-blue-500: var(--adapt-teal-ada);
    --XNAT-blue-600: #1a6b6e;
    --XNAT-blue-700: var(--adapt-teal-deep);

    --panel-header-bg: var(--adapt-teal-deep);
    --panel-header-highlight: var(--adapt-teal-ada);
    --highlight-color: var(--adapt-teal);
    --hover-bg: var(--adapt-highlight);
    --link-color: var(--adapt-teal-ada);
    --link-color-hover: var(--adapt-teal-deep);
    --link-color-reverse: #ffffff;
    --link-color-reverse-hover: var(--adapt-teal-tint);
    --primary-button-bg: var(--adapt-teal-ada);
    --primary-button-bg-hover: var(--adapt-teal-deep);
    --primary-button-border: var(--adapt-teal-deep);
    --message-color: var(--adapt-teal-ada);
}

html body {
    font-family: var(--adapt-font-body) !important;
    font-weight: 400;
    color: var(--adapt-navy);
}

h1, h2, h3,
body.xnat h1, body.xnat h2, body.xnat h3 {
    font-family: var(--adapt-font-heading);
    font-weight: 500;
}
h1, body.xnat h1 { color: var(--adapt-teal-deep); }

a { color: var(--link-color); }
a:hover { color: var(--link-color-hover); }

#user_bar a { color: #fff; }
#advanced-search-topnav a { color: var(--link-color-reverse) !important; }

/* user bar */
#user_bar {
    color: var(--text-color-reverse);
    background: var(--adapt-teal-deep);
}
#user_bar a:hover { color: var(--adapt-teal-tint); }

/* main nav */
#main_nav {
    background-color: var(--adapt-teal-deep);
    background-image: none;
    border-bottom: 4px solid transparent;
    border-image: var(--adapt-spectrum) 1;
    font-family: var(--adapt-font-body) !important;
    font-weight: 600;
}

#main_nav #nav-home {
    background-image: url('../images/adapt-icon.svg') !important;
    background-size: 26px !important;
}
#main_nav ul.nav > li,
#main_nav ul.nav > li:first-of-type { border: none; }
#main_nav ul.nav > li > a { color: #fff; padding: 0 16px; }
#main_nav ul.nav > li > a:hover,
#main_nav ul.nav > li.active > a { background-color: var(--adapt-teal-ada); }
#main_nav ul.nav ul { border-top: 1px solid var(--adapt-teal-deep); }
#main_nav ul.nav ul li a:hover { background-color: var(--adapt-highlight); }

#main_nav ul.nav table.data-table tr:hover,
#main_nav ul.nav table.data-table .item:hover {
    background: var(--hover-bg) !important;
}

/* site header logo */
#header_logo {
    background: url(../images/adapt-logo.svg) no-repeat left center;
    background-size: contain;
    display: block;
    height: 54px;
    width: 440px;
    max-width: 100%;
    margin: 6px 0;
}
#header_logo img {
    display: none;
}

/* footer */
#page_wrapper { padding: 0 0 2rem; }
#xnat_power {
    /* triangle band from the adaptroadmap.org footer, anchored bottom-left */
    background: url(../images/adapt-triangles-band.svg) no-repeat left bottom / auto 100%, var(--adapt-teal-deep);
    border: none;
    border-top: 4px solid transparent;
    border-image: var(--adapt-spectrum) 1;
    width: 100%;
    margin: 0;
    left: 0;
    padding: 20px 0;
}
#xnat_power small { color: var(--text-color-reverse); }
/* keep the triangle band clear of "Powered by" on narrower screens */
@media screen and (max-width: 1200px) {
    #xnat_power { background-size: auto 70%, auto; }
}
@media screen and (max-width: 800px) {
    #xnat_power { background-size: auto 45%, auto; }
}
/* no XNAT version on the login page */
body:has(#xnat-login) #xnat_power small { display: none; }
/* "Powered by XNATWorks" (link target set by scripts/adapt-footer.js) */
#xnat_power a img { display: none; }
#xnat_power a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    color: #fff;
    text-decoration: none;
}
#xnat_power a::before {
    content: 'Powered by';
    font: 700 11px/1 var(--adapt-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
}
#xnat_power a::after {
    content: '';
    width: 190px;
    height: 26px;
    background: url(../images/xnatworks-logo-white.png) no-repeat center / contain;
}

/* tab styles */
.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a em,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus,
.yui-skin-sam .yui-navset .yui-nav .selected a:hover {
    background: var(--adapt-teal-ada);
    border-color: var(--adapt-teal-ada);
}

.yui-skin-sam .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav,
#search_tabs.yui-navset.yui-navset-top > .wrangler {
    border-bottom: 5px solid var(--adapt-teal-ada) !important;
}

/* actions menu */
#actionsMenu > .bd > .first-of-type a {
    background: var(--adapt-teal-ada);
}
#actionsMenu li a:hover,
#actionsMenu li.yuimenuitem-hassubmenu > a:hover {
    background-color: var(--adapt-highlight);
}

/* panels (admin page) */
body.xnat .panel-default .panel-heading {
    background: var(--adapt-teal-deep);
}
body.xnat .panel-default .panel-heading h3,
body.xnat .panel-default .panel-heading .panel-title {
    font-family: var(--adapt-font-heading);
}
.xnat-nav-tabs li.tab.active { background: var(--adapt-teal-ada); }
.xnat-nav-tabs.side li.tab.active > a { border-left-color: var(--adapt-teal-ada); }

/* Login page customizations */
#xnat-login {
    position: relative;
    overflow: hidden;
    color: var(--text-color-reverse);
    min-height: calc(100vh - 130px); /* full height minus the "xnat_power" footer */
}
body:has(#xnat-login),
#xnat-login,
#xnat-login #page_wrapper,
#xnat-login #header {
    background: var(--adapt-teal-deep);
}
#xnat-login #page_wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
}
#xnat-login #header { background: transparent; }
#xnat-login #user_bar { background: transparent; }
#xnat-login #header_logo {
    background-image: url(../images/adapt-logo-white.svg);
    height: 70px;
    width: 572px;
    margin: 24px 0 8px;
}
#xnat-login a { color: var(--link-color-reverse); }
#xnat-login a:hover { color: var(--link-color-reverse-hover); }
#xnat-login h1,
#xnat-login h2,
#xnat-login h3 { color: #fff; }

/* decorative triangle clusters from adaptroadmap.org */
.adapt-login-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.adapt-login-art img {
    position: absolute;
    top: 50%;
    height: 78%;
    max-height: 640px;
    transform: translateY(-50%);
    opacity: .9;
}
.adapt-login-art-left { left: -110px; }
.adapt-login-art-right { right: -60px; }
@media screen and (max-width: 1280px) {
    .adapt-login-art img { opacity: .35; }
}
@media screen and (max-width: 900px) {
    .adapt-login-art { display: none; }
}

.login-box-container-fixed {
    color: var(--text-color);
    background-color: #fff;
    border: none;
    border-top: 5px solid transparent;
    border-image: var(--adapt-spectrum) 1;
    box-shadow: 0 12px 32px rgba(17, 35, 55, .35);
}
#xnat-login .login-box-container-fixed a { color: var(--link-color); }
#xnat-login .login-box-container-fixed a:hover { color: var(--link-color-hover); }
#xnat-login .login-box-container-fixed h3 { color: var(--adapt-teal-deep); }
.login-box-container-fixed label { font-weight: 600; color: var(--adapt-slate); }
.login-box-container-fixed input[type="text"],
.login-box-container-fixed input[type="password"] {
    border-radius: 3px;
}
.login-box-container-fixed input[type="text"]:focus,
.login-box-container-fixed input[type="password"]:focus {
    border-color: var(--adapt-teal);
    box-shadow: 0 0 0 2px rgba(54, 157, 160, .25);
    outline: none;
}
#loginButton,
.login-box-container-fixed [type="submit"] {
    background: var(--adapt-teal-ada);
    border-color: var(--adapt-teal-deep);
    color: #fff;
}
#loginButton:hover,
.login-box-container-fixed [type="submit"]:hover {
    background: var(--adapt-teal-deep);
}
/* OpenID provider links, shown as outlined buttons */
#login_auth_providers > div + div { border-bottom: none; }
#xnat-login #login_auth_providers a,
#xnat-login .adapt-other-providers a {
    display: block;
    margin: 0 0 10px;
    padding: 11px 18px;
    border: 1px solid var(--adapt-teal-ada);
    border-radius: 4px;
    background: #fff;
    color: var(--adapt-teal-deep);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
#xnat-login #login_auth_providers a:hover,
#xnat-login .adapt-other-providers a:hover {
    background: var(--adapt-highlight);
    color: var(--adapt-teal-deep);
}
#login_auth_providers a::before,
.adapt-other-providers a::before {
    content: '';
    display: inline-block;
    height: 16px;
    width: 16px;
    padding-right: 10px;
    background-image: url(../images/adapt-icon.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    margin-bottom: -2px;
}
fieldset.divider legend { margin: 0 auto; }

/* University Login as the primary action (layout applied by scripts/adapt-login.js) */
.adapt-primary-login #login_auth_providers { padding: 24px 20px 8px; }
#xnat-login #login_auth_providers .adapt-primary-provider a {
    margin: 0;
    padding: 15px 18px;
    border-color: var(--adapt-teal-deep);
    background: var(--adapt-teal-ada);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 79, 89, .25);
}
#xnat-login #login_auth_providers .adapt-primary-provider a:hover,
#xnat-login #login_auth_providers .adapt-primary-provider a:focus {
    background: var(--adapt-teal-deep);
    color: #fff;
}
.adapt-primary-provider a::before { display: none !important; }
.adapt-primary-provider a::after {
    content: '\2192';
    margin-left: 10px;
}

.adapt-other-toggle {
    display: block;
    margin: 4px auto 14px;
    padding: 6px 10px;
    border: none;
    background: none;
    color: var(--adapt-gray);
    font-size: 12px;
    cursor: pointer;
}
.adapt-other-toggle:hover,
.adapt-other-toggle:focus { color: var(--adapt-teal-deep); text-decoration: underline; }
.adapt-other-toggle::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s;
}
.adapt-other-toggle.open::after { transform: rotate(-135deg); margin-bottom: -1px; }
.adapt-other-options[hidden] { display: none !important; }
.adapt-other-options {
    border-top: 1px solid var(--border-color);
    background: var(--XNAT-gray-050);
}
.adapt-other-providers { padding: 16px 20px 6px; }
.adapt-other-options #login_form { border: none; }

/* other widgets */
body #accordion h3 {
    font-family: inherit !important;
}
body #accordion h3.active,
div.download-column h3 {
    background: var(--adapt-teal-ada) !important;
    border: 1px solid var(--adapt-teal-ada) !important;
}
body #accordion .content {
    background: var(--page-bg);
}
body #accordion .content td.highlighted {
    background: none;
    border: none;
}

/* other ui elements */
div.containerTitle.withColor {
    background: var(--adapt-teal-ada) !important;
}

.xnat-table tr.highlight:hover,
.xnat-table.highlight tr:hover,
.xnat-table.striped.highlight tr:hover {
    background: var(--adapt-highlight);
}

button, [type="button"], [type="submit"], [type="reset"], .btn, .btn1, .btn2 {
    font-family: var(--adapt-font-body);
}
div.xnat-dialog > .footer .button.default {
    background: var(--primary-button-bg);
    border-color: var(--primary-button-border);
}