/* Style overrides for the NYSPI MRI Research Program theme
 * Palette and typography follow https://nyspi.org/mri (the NYSPI site theme); the colored
 * polygon brain is the MRI Research Program graphic from that page.
 */

:root {
    /* NYSPI palette (from nyspi.org) */
    --nyspi-blue: #07567e;           /* Columbia Psychiatry nav button; white text passes WCAG AA (7.9:1) */
    --nyspi-blue-dark: #054563;
    --nyspi-blue-deep: #043852;
    --nyspi-blue-wash: #e6eff4;
    --nyspi-slate: #35364e;          /* NYSPI wordmark */
    --nyspi-text: #333333;
    --nyspi-gray-dark: #555555;
    --nyspi-gray: #777777;
    --nyspi-gray-light: #c8d3da;
    --nyspi-rule: #e7e7e7;
    --nyspi-band: #f8f8f8;           /* header band */

    /* MRI Research Program graphic colors, used only as accents */
    --nyspi-purple: #662d91;
    --nyspi-magenta: #d91b5c;
    --nyspi-lime: #8cc63f;
    --nyspi-yellow: #f5ee31;
    --nyspi-green: #2bb673;
    --nyspi-sky: #25aae1;
    --nyspi-orange: #f1592a;
    --nyspi-spectrum: linear-gradient(90deg,
        var(--nyspi-purple) 0 14.28%, var(--nyspi-magenta) 0 28.57%, var(--nyspi-lime) 0 42.85%,
        var(--nyspi-yellow) 0 57.14%, var(--nyspi-green) 0 71.42%, var(--nyspi-sky) 0 85.71%,
        var(--nyspi-orange) 0 100%);

    --nyspi-primary: var(--nyspi-blue);
    --nyspi-primary-dark: var(--nyspi-blue-dark);
    --nyspi-highlight: var(--nyspi-blue-wash);

    --nyspi-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* redefining core XNAT colors: XNAT's blues become the Columbia blue scale */
    --XNAT-blue-100: var(--nyspi-blue-wash);
    --XNAT-blue-200: #c4d9e5;
    --XNAT-blue-300: #8fb5cb;
    --XNAT-blue-400: #3f80a5;
    --XNAT-blue-500: #1a6890;
    --XNAT-blue-600: var(--nyspi-blue);
    --XNAT-blue-700: var(--nyspi-blue-dark);

    --panel-header-bg: var(--nyspi-blue);
    --panel-header-highlight: var(--nyspi-blue-dark);
    --highlight-color: var(--nyspi-blue);
    --hover-bg: var(--nyspi-highlight);
    --link-color: var(--nyspi-blue);
    --link-color-hover: var(--nyspi-blue-deep);
    --link-color-reverse: #ffffff;
    --link-color-reverse-hover: var(--nyspi-gray-light);
    --primary-button-bg: var(--nyspi-blue);
    --primary-button-bg-hover: var(--nyspi-blue-dark);
    --primary-button-border: var(--nyspi-blue-dark);
    --message-color: var(--nyspi-text);
}

html body {
    font-family: var(--nyspi-font) !important;
    font-size: 13px;
    color: var(--nyspi-text);
}

h1, h2, h3,
body.xnat h1, body.xnat h2, body.xnat h3 {
    font-family: var(--nyspi-font);
    font-weight: 400;
    color: var(--nyspi-text);
}

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

/* user bar */
#user_bar {
    color: #fff;
    background: var(--nyspi-blue-dark);
}
#user_bar a { color: #fff; }
#user_bar a:hover { color: var(--nyspi-gray-light); }

/* main nav: the light-gray NYSPI header band with uppercase bold items, the active item
   in Columbia blue, and the program's color spectrum underneath */
#main_nav {
    background: var(--nyspi-band);
    border-top: 1px solid var(--nyspi-rule);
    border-bottom: none;
    box-shadow: none;
    font-family: var(--nyspi-font) !important;
    font-weight: 700;
}
#main_nav::after {
    content: '';
    display: block;
    height: 4px;
    background: var(--nyspi-spectrum);
}
/* "NYSPI | MRI" badge as the Home link; core topBar/Home.vm sets an inline 30px width */
#main_nav #nav-home {
    width: 79px !important;
    background-image: url('../images/nyspi-nav-badge.png') !important;
    background-size: auto 22px !important;
}
#main_nav #nav-home:hover { background-color: transparent; }
#main_nav ul.nav > li,
#main_nav ul.nav > li:first-of-type { border: none; }
#main_nav ul.nav > li > a {
    color: var(--nyspi-gray-dark);
    padding: 0 16px;
    font-size: 12px;
    text-transform: uppercase;
}
#main_nav ul.nav > li > a:hover,
#main_nav ul.nav > li.active > a {
    background-color: var(--nyspi-blue);
    color: #fff;
}
#main_nav ul.nav ul { border-top: 1px solid var(--nyspi-rule); }
#main_nav ul.nav ul li a:hover { background-color: var(--nyspi-highlight); }
#main_nav ul.nav table.data-table tr:hover,
#main_nav ul.nav table.data-table .item:hover {
    background: var(--hover-bg) !important;
}
#advanced-search-topnav a,
#advanced-search-topnav a:hover { color: var(--nyspi-blue) !important; }
#main_nav #searchValue { border-color: #ccc; }
#main_nav #search_btn {
    background: var(--nyspi-blue);
    border-color: var(--nyspi-blue-dark);
    color: #fff;
}

/* site header: MRI program graphic + the NYSPI two-weight wordmark, then the program name */
#header .pad {
    display: flex;
    align-items: center;
    gap: 22px;
}
#header .pad::after {
    content: 'MRI Research Program';
    padding: 6px 0 6px 22px;
    border-left: 1px solid var(--nyspi-rule);
    font: 300 22px/1.1 var(--nyspi-font);
    color: var(--nyspi-blue);
    white-space: nowrap;
}
/* DefaultTop renders the logo with an inline display:none and only shows it on the home page,
   so wherever the logo is hidden drop the program name and shrink the empty header to a small gap
   (site-wide alerts in it keep their own margins). Core fixes #main_nav at 40px, so the spectrum rule
   hangs 4px below it and over the page: the gap keeps it off the breadcrumbs. */
#header .pad:has(> #header_logo[style*="none"])::after { display: none; }
#header > .pad:has(> #header_logo[style*="none"]) { margin-top: 16px; margin-bottom: 0; }
#header_logo {
    background: url(../images/nyspi-brain-small.png) no-repeat left center;
    background-size: auto 56px;
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 14px 0;
    padding-left: 92px;
    color: var(--nyspi-slate);
    text-decoration: none;
}
#header_logo:hover { text-decoration: none; }
#header_logo img { display: none; }
#header_logo::before,
#header_logo::after {
    display: block;
    font: 400 25px/1.05 var(--nyspi-font);
    letter-spacing: -.005em;
}
#header_logo::before { content: 'New York State'; }
#header_logo::after { content: 'Psychiatric Institute'; font-weight: 700; }
@media screen and (max-width: 700px) {
    #header .pad::after { display: none; }
}

/* footer: "Powered by XNATWorks" under the program's color spectrum */
#page_wrapper { padding: 0 0 2rem; }
#xnat_power {
    background: var(--nyspi-blue);
    border: none;
    width: 100%;
    height: auto;
    margin: 0;
    left: 0;
    padding: 0 0 12px;
}
#xnat_power::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--nyspi-spectrum);
}
#xnat_power small { color: var(--nyspi-gray-light); padding: 0 max(20px, calc(50% - 580px)); }
/* no XNAT version on the login page */
body:has(#xnat-login) #xnat_power small { display: none; }
/* link target set by scripts/nyspi-theme.js */
#xnat_power a.xnat-version img { display: none; }
#xnat_power a.xnat-version {
    margin: 10px max(20px, calc(50% - 580px)) 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    color: #fff;
    text-decoration: none;
}
#xnat_power a.xnat-version::before {
    content: 'Powered by';
    font: 700 11px/1 var(--nyspi-font);
    letter-spacing: .1em;
    text-transform: uppercase;
}
#xnat_power a.xnat-version::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(--nyspi-blue);
    border-color: var(--nyspi-blue);
}
.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(--nyspi-blue) !important;
}

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

/* panels (admin page) */
body.xnat .panel-default .panel-heading {
    background: var(--nyspi-blue);
}
body.xnat .panel-default .panel-heading h3,
body.xnat .panel-default .panel-heading .panel-title { color: #fff; }
.xnat-nav-tabs li.tab.active { background: var(--nyspi-blue); }
.xnat-nav-tabs.side li.tab.active > a { border-left-color: var(--nyspi-blue); }

/* Login page: white page, the MRI Research Program graphic filling the welcome column,
   and a white login card with a Columbia blue top edge */
body:has(#xnat-login),
#xnat-login,
#xnat-login #page_wrapper,
#xnat-login #header { background: #fff; }
#xnat-login #user_bar { background: var(--nyspi-blue-dark); min-height: 6px; }
#xnat-login #header { border-bottom: 1px solid var(--nyspi-rule); }
#xnat-login #header::after {
    content: '';
    display: block;
    height: 4px;
    background: var(--nyspi-spectrum);
}
#xnat-login #header .pad::after { font-size: 26px; }
#xnat-login #header_logo {
    background-size: auto 68px;
    padding-left: 110px;
    margin: 22px 0;
}
#xnat-login #header_logo::before,
#xnat-login #header_logo::after { font-size: 30px; }

/* the welcome column holds the graphic, with the site description underneath */
#xnat-login #login_area {
    align-items: center;
    justify-content: center;
    margin: 3em auto;
}
#xnat-login #login_welcome {
    flex: 0 1 540px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
    padding: 0 5em 0 0;
    background: url(../images/nyspi-brain.png) no-repeat center top;
    background-origin: content-box;
    background-size: contain;
    color: var(--nyspi-text);
    font-size: 15px;
    text-align: center;
}
@media screen and (max-width: 900px) {
    #xnat-login #login_welcome { min-height: 0; background: none; }
}

.login-box-container-fixed {
    color: var(--nyspi-text);
    background-color: #fff;
    border: 1px solid var(--nyspi-rule);
    border-top: 5px solid var(--nyspi-blue);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.login-box-container-fixed label { font-weight: 700; color: var(--nyspi-gray-dark); }
.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(--nyspi-blue);
    box-shadow: 0 0 0 2px rgba(7, 86, 126, .2);
    outline: none;
}
#loginButton,
.login-box-container-fixed [type="submit"] {
    background: var(--nyspi-blue);
    border-color: var(--nyspi-blue-dark);
    color: #fff;
}
#loginButton:hover,
.login-box-container-fixed [type="submit"]:hover {
    background: var(--nyspi-blue-dark);
}
/* OpenID provider links, if any are configured later, shown as outlined buttons */
#login_auth_providers > div + div { border-bottom: none; }
#xnat-login #login_auth_providers a {
    display: block;
    margin: 0 0 10px;
    padding: 11px 18px;
    border: 1px solid var(--nyspi-blue);
    border-radius: 4px;
    background: #fff;
    color: var(--nyspi-blue);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
#xnat-login #login_auth_providers a:hover {
    background: var(--nyspi-highlight);
    color: var(--nyspi-blue-deep);
}
fieldset.divider legend { margin: 0 auto; }

/* other widgets */
body #accordion h3 {
    font-family: inherit !important;
}
body #accordion h3.active,
div.download-column h3 {
    background: var(--nyspi-blue) !important;
    border: 1px solid var(--nyspi-blue) !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(--nyspi-blue) !important;
}
.xnat-table tr.highlight:hover,
.xnat-table.highlight tr:hover,
.xnat-table.striped.highlight tr:hover {
    background: var(--nyspi-highlight);
}
button, [type="button"], [type="submit"], [type="reset"], .btn, .btn1, .btn2 {
    font-family: var(--nyspi-font);
}
div.xnat-dialog > .footer .button.default {
    background: var(--primary-button-bg);
    border-color: var(--primary-button-border);
}