/*
 * Colour theme for the TecRMI service documentation and test clients.
 *
 * SWITCHING THE PALETTE: see theme-palette.css (one central switch for docs and Swagger UI).
 *
 * This file only overrides colours of Bootstrap 3, bootstrap-theme and jQuery UI.
 * It must be included as the LAST stylesheet of a page.
 */
@import url("theme-palette.css");

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
body {
    color: var(--ta-text);
    background-color: var(--ta-background);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ta-text);
}

a,
a:visited {
    color: var(--ta-primary);
}

a:hover,
a:focus {
    color: var(--ta-primary-dark);
}

/* Content links: Circuit Slate is close to the text colour, so links must not rely on colour alone (WCAG 1.4.1) */
main a:not(.btn):not(.ui-tabs-anchor):not(.list-group-item) {
    text-decoration: underline;
}

/* Clickable list-group cards (docs/Examples.html): no underline, hover via background */
a.list-group-item,
a.list-group-item:hover,
a.list-group-item:focus {
    color: var(--ta-text);
    text-decoration: none;
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: var(--ta-primary-light);
    border-color: var(--ta-primary-border);
}

a.list-group-item .list-group-item-heading {
    color: var(--ta-primary);
}

code {
    color: var(--ta-primary-dark);
    background-color: var(--ta-primary-light);
}

::selection {
    color: var(--ta-on-accent);
    background-color: var(--ta-accent);
}

/* ---------------------------------------------------------------------------
   Navbar (Bootstrap .navbar-default incl. bootstrap-theme gradients)
--------------------------------------------------------------------------- */
.navbar-default {
    background-color: var(--ta-primary);
    background-image: none;
    border-color: var(--ta-primary);
    border-bottom: 3px solid var(--ta-accent);
    box-shadow: none;
    filter: none;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--ta-on-primary);
    text-shadow: none;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--ta-on-primary);
    background-color: var(--ta-primary-dark);
}

.navbar-default .navbar-brand.disabled:hover,
.navbar-default .navbar-brand.disabled:focus {
    background-color: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--ta-on-primary);
    background-color: var(--ta-primary-dark);
    background-image: none;
    box-shadow: inset 0 -3px 0 var(--ta-accent);
    filter: none;
}

.navbar-default .navbar-nav > li > a .caret,
.navbar-default .navbar-nav > li > a:hover .caret {
    border-top-color: var(--ta-on-primary);
    border-bottom-color: var(--ta-on-primary);
}

.navbar-default .navbar-toggle {
    border-color: var(--ta-on-primary);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--ta-primary-dark);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--ta-on-primary);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--ta-primary-dark);
}

/* Dropdown inside the collapsed (mobile) navbar */
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--ta-on-primary);
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--ta-on-primary);
        background-color: var(--ta-primary-dark);
    }

    .navbar-default .navbar-nav .open .dropdown-menu .divider {
        background-color: var(--ta-primary-dark);
    }
}

/* ---------------------------------------------------------------------------
   Dropdown menus
--------------------------------------------------------------------------- */
.dropdown-menu {
    border-color: var(--ta-primary-border);
}

.dropdown-menu > li > a {
    color: var(--ta-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--ta-text);
    background-color: var(--ta-primary-light);
    background-image: none;
    filter: none;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: var(--ta-on-primary);
    background-color: var(--ta-primary);
    background-image: none;
    filter: none;
}

.dropdown-menu .divider {
    background-color: var(--ta-primary-border);
}

/* ---------------------------------------------------------------------------
   Panels and list groups
--------------------------------------------------------------------------- */
.panel-primary {
    border-color: var(--ta-primary);
}

.panel-primary > .panel-heading {
    color: var(--ta-on-primary);
    background-color: var(--ta-primary);
    background-image: none;
    border-color: var(--ta-primary);
    filter: none;
}

.panel-primary > .panel-heading h1,
.panel-primary > .panel-heading h2,
.panel-primary > .panel-heading h3,
.panel-primary > .panel-heading h4,
.panel-primary > .panel-heading h5,
.panel-primary > .panel-heading h6 {
    color: var(--ta-on-primary);
}

.panel-default {
    border-color: var(--ta-primary-border);
}

.panel-default > .panel-heading {
    color: var(--ta-text);
    background-color: var(--ta-primary-light);
    background-image: none;
    border-color: var(--ta-primary-border);
    filter: none;
}

.list-group-item {
    border-color: var(--ta-primary-border);
}

.list-group-item-heading {
    color: var(--ta-primary);
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.btn-primary {
    color: var(--ta-on-accent);
    background-color: var(--ta-accent);
    background-image: none;
    border-color: var(--ta-accent);
    text-shadow: none;
    filter: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: var(--ta-on-accent);
    background-color: var(--ta-accent-hover);
    background-image: none;
    border-color: var(--ta-accent);
}

/* ---------------------------------------------------------------------------
   jQuery UI (code box tabs, dialogs)
--------------------------------------------------------------------------- */
.ui-widget-content {
    border-color: var(--ta-primary-border);
    background: var(--ta-background);
    color: var(--ta-text);
}

.ui-widget-content a {
    color: var(--ta-primary);
}

.ui-widget-header {
    border-color: var(--ta-primary-border);
    background: var(--ta-primary-light);
    color: var(--ta-text);
}

.ui-widget-header a {
    color: var(--ta-text);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border-color: var(--ta-primary-border);
    background: var(--ta-background);
    color: var(--ta-primary);
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: var(--ta-primary);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border-color: var(--ta-primary);
    background: var(--ta-primary-light);
    color: var(--ta-primary-dark);
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
    color: var(--ta-primary-dark);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border-color: var(--ta-accent);
    background: var(--ta-accent);
    color: var(--ta-on-accent);
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: var(--ta-on-accent);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border-color: var(--ta-primary);
    background: var(--ta-primary-light);
    color: var(--ta-text);
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border-color: var(--ta-error);
    background: var(--ta-background);
    color: var(--ta-error);
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
    color: var(--ta-error);
}

/* ---------------------------------------------------------------------------
   Test clients (docs/TestClients/REST|SOAP, layout from Core.css)
   The header is the same Bootstrap navbar as on the documentation pages.
--------------------------------------------------------------------------- */

/* Left column (login + method list) as a panel like "Request" / "Response".
   Layout only: aligns its top edge with the "Request" / "Response" panels in <main>. */
#rest-client > section.panel,
#wsdl-client > section.panel {
    margin: 20px 0 20px 20px;
    padding-bottom: 6px;
}

#rest-client > section.panel > .panel-heading,
#wsdl-client > section.panel > .panel-heading {
    margin-bottom: 6px;
}
#rest-client input,
#wsdl-client input {
    border-color: var(--ta-primary-border);
}

#rest-client input:focus,
#wsdl-client input:focus,
#rest-client select:focus,
#wsdl-client select:focus {
    border-color: var(--ta-primary);
    outline: 2px solid var(--ta-primary-light);
}

/* Main actions of the test clients: Authenticate / Load WSDL / send */
#rest-client .btn-success,
#wsdl-client .btn-success,
#rest-client #request button[name="submit"],
#wsdl-client #request button[name="submit"] {
    color: var(--ta-on-accent);
    background-color: var(--ta-accent);
    background-image: none;
    border: 1px solid var(--ta-accent);
    border-radius: 4px;
}

#rest-client .btn-success:hover,
#rest-client .btn-success:focus,
#wsdl-client .btn-success:hover,
#wsdl-client .btn-success:focus,
#rest-client #request button[name="submit"]:hover,
#rest-client #request button[name="submit"]:focus,
#wsdl-client #request button[name="submit"]:hover,
#wsdl-client #request button[name="submit"]:focus {
    color: var(--ta-on-accent);
    background-color: var(--ta-accent-hover);
    border-color: var(--ta-accent);
}