/* SUMMIT: app-wide styles (top banner colour, sign-in status in the banner). Section styles live in their own files. */
:root { --app-banner: #1C489F; --app-banner-dark: #163a82; }
.skin-blue .main-header .navbar, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover { background-color: var(--app-banner); }
.skin-blue .main-header .navbar .sidebar-toggle:hover, .skin-blue .main-header .navbar .sidebar-toggle:focus { background-color: var(--app-banner-dark); }
.skin-blue .main-header li.user-header, .skin-blue .main-header .navbar .nav > li > a:hover { background-color: var(--app-banner-dark); }

/* sign-in status, right side of the banner: name, role chips, Sign in / Sign out */
.main-header .navbar-custom-menu > .navbar-nav > li.app-user-li { height: 80px; display: flex; align-items: center; padding: 0 16px 0 8px; }
.app-user { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; color: #fff; font-size: 13px; white-space: nowrap; }
.app-user a, .app-user a:visited { color: #fff; text-decoration: underline; }
.app-user a:hover, .app-user a:focus { color: #dbe8f8; }
.app-user-name { font-weight: 600; }
.app-user-muted { color: #dbe8f8; }
.app-user-roles { display: inline-flex; gap: 4px; }
.app-role { display: inline-block; background: #e6f1fb; color: #0c447c; border-radius: 10px; padding: 1px 8px; font-size: 11px; line-height: 16px; }
.app-role-more, .app-role-all { cursor: help; }
.app-role-all { display: none; }
@media (max-width: 1100px) { .app-user-roles { display: none; } .app-role-all { display: inline-block; } }
@media (max-width: 767px) { .main-header .navbar-custom-menu > .navbar-nav > li.app-user-li { height: 50px; } .app-user-name { display: none; } }

/* date pickers (all sections): always open below the field and above the banner; switching to the month / year view used to flip the
   picker upwards behind the banner, hiding its year header */
.datepicker.dropdown-menu { z-index: 1100 !important; }

/* option lists (all sections): a little room between the title ("Technology:") and its tick boxes / radio buttons */
/* Shiny pulls the list up by 10px under its title; leave a small gap instead */
.form-group.shiny-input-checkboxgroup label ~ .shiny-options-group, .form-group.shiny-input-radiogroup label ~ .shiny-options-group { margin-top: 2px; }
/* side-by-side options in the narrow filter column wrap with a left margin on all but the first: one per line instead */
.st-sticky .radio-inline, .st-sticky .checkbox-inline { display: block; margin-left: 0; padding-top: 0; margin-bottom: 2px; }

/* SUMMIT EXPLORER lists: a large spinner centred in the panel, with a caption under it (exp_loading in ui.R sets --exp-loading-label) */
.exp-loading .shiny-spinner-output-container:has(> .load-container:not(.shiny-spinner-hidden)) { min-height: 360px; }
.exp-loading .load-container:not(.shiny-spinner-hidden)::after { content: var(--exp-loading-label); position: absolute; left: 0; right: 0; top: calc(100% - 44px);
  text-align: center; color: #1C489F; font-size: 14px; font-weight: 600; }