/* Shoopeek branding for Xerte — Sakai-aligned palette: blue / gray / white / black.
 * Loaded by index.php when /branding/branding.css exists; overrides default
 * Bootstrap + frontpage.css colors on every page (front, workspace, management).
 *
 * Palette anchors:
 *   --shoopeek-blue:        #1a4d8c   primary (navbar, headings, links, button bg)
 *   --shoopeek-blue-dark:   #0d3266   hovers, gradient end
 *   --shoopeek-gray:        #6c757d   secondary buttons, panel borders
 *   --shoopeek-gray-light:  #f4f6f8   page section bg
 *   --shoopeek-text:        #212529   body text (near-black)
 */

:root {
    --shoopeek-blue:       #1a4d8c;
    --shoopeek-blue-dark:  #0d3266;
    --shoopeek-gray:       #6c757d;
    --shoopeek-gray-light: #f4f6f8;
    --shoopeek-text:       #212529;
}

/* --- body + page background -------------------------------------------- */
body {
    background-color: #ffffff !important;
    color: var(--shoopeek-text) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* --- headings ---------------------------------------------------------- */
h1, h2.sectionTitle, .frontpage h1 {
    color: var(--shoopeek-blue) !important;
}
h2, h3, h4, h5, h6 {
    color: var(--shoopeek-text) !important;
}

/* --- links ------------------------------------------------------------- */
a, a:link, a:visited {
    color: var(--shoopeek-blue) !important;
}
a:hover, a:active {
    color: var(--shoopeek-blue-dark) !important;
}

/* --- top navbar (the dark bar at the top of every page) --------------- */
.navbar,
.navbar-inverse,
.navbar-inverse .navbar-inner,
.navbar-default,
.navbar-default .navbar-inner {
    background-color: var(--shoopeek-blue) !important;
    background-image: none !important;
    border-color: var(--shoopeek-blue-dark) !important;
}
.navbar-inverse .brand,
.navbar-inverse .nav > li > a,
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
    text-shadow: none !important;
}
.navbar-inverse .nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover {
    background-color: var(--shoopeek-blue-dark) !important;
    color: #ffffff !important;
}

/* --- jumbotron (welcome banner) --------------------------------------- */
.jumbotron {
    background: var(--shoopeek-blue) !important;
    color: #ffffff !important;
}
.jumbotron h1, .jumbotron p { color: #ffffff !important; }

/* --- Xerte primary buttons -------------------------------------------- */
.xerte_button,
button.xerte_button,
.btn-primary {
    background: var(--shoopeek-blue) !important;
    background-color: var(--shoopeek-blue) !important;
    border-color: var(--shoopeek-blue-dark) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border-radius: 4px !important;
}
.xerte_button:hover,
button.xerte_button:hover,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--shoopeek-blue-dark) !important;
    background-color: var(--shoopeek-blue-dark) !important;
    border-color: var(--shoopeek-blue-dark) !important;
    color: #ffffff !important;
}

/* --- secondary buttons / generic .btn --------------------------------- */
.btn-default, .btn-secondary {
    background-color: #ffffff !important;
    border-color: var(--shoopeek-gray) !important;
    color: var(--shoopeek-text) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background-color: var(--shoopeek-gray-light) !important;
    border-color: var(--shoopeek-gray) !important;
}

/* --- panels / cards --------------------------------------------------- */
.panel, .panel-default {
    border-color: var(--shoopeek-gray) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
.panel-heading, .panel-default > .panel-heading {
    background-color: var(--shoopeek-gray-light) !important;
    border-bottom-color: var(--shoopeek-gray) !important;
    color: var(--shoopeek-text) !important;
}

/* --- forms / inputs --------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, select, .form-control {
    border-color: var(--shoopeek-gray) !important;
    border-radius: 3px !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--shoopeek-blue) !important;
    box-shadow: 0 0 0 2px rgba(26, 77, 140, 0.15) !important;
    outline: none !important;
}

/* --- tables ----------------------------------------------------------- */
.table thead th,
table.dataTable thead th {
    background-color: var(--shoopeek-gray-light) !important;
    color: var(--shoopeek-text) !important;
    border-bottom-color: var(--shoopeek-gray) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--shoopeek-gray-light) !important;
}

/* --- footer ----------------------------------------------------------- */
.footer, footer, #footer {
    background-color: var(--shoopeek-gray-light) !important;
    color: var(--shoopeek-text) !important;
    border-top: 1px solid var(--shoopeek-gray) !important;
}