/*
 * HTWD Corporate Design – VIVO custom.css
 * Theme: tenderfoot (Bootstrap 3, VIVO 1.15.x)
 * Hochschule für Technik und Wirtschaft Dresden
 * Hochschulbibliothek / FIS – bibdev02.bib.htw-dresden.de
 *
 * Primärfarbe:  #EC660C  (HTWD Orange)
 * Dunkel:       #1A1A1A  (Anthrazit)
 * Schrift:      Open Sans
 *
 * Einbinden via: Site Admin → Site Information → Benutzerdefinierte CSS-Datei
 *
 * Quellen: tenderfoot.css, page-home.css, page-individual.css
 * aus github.com/vivo-project/VIVO (VIVO 1.15.1-SNAPSHOT)
 */

/* ===================================================================
   CSS Custom Properties
   =================================================================== */
:root {
    /* Markenfarben */
    --htwd-orange:       #EC660C;
    --htwd-orange-hover: #c85400;
    --htwd-orange-dark:  #a34300;
    --htwd-orange-light: #fff3eb;
    --htwd-dark:         #1a1a1a;
    --htwd-dark2:        #2a2a2a;
    --htwd-link:         #b84e08;
    --htwd-bg:           #f0f0ee;
    --htwd-white:        #ffffff;

    /* Sekundärfarben (HTWD CI) */
    --htwd-light-orange: #f7a600;
    --htwd-yellow:       #ffdd00;
    --htwd-light-green:  #cbd00f;
    --htwd-green:        #83be63;
    --htwd-purple:       #bc99c7;
    --htwd-blue:         #8baddb;
    --htwd-light-blue:   #a1d9f7;
    --htwd-turquoise:    #87ccd3;
    --htwd-beige:        #cebfad;
    --htwd-grey:         #bdc1d0;
}

/* Bootstrap Focus-Ring global auf HTWD-Orange umstellen */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn-default:focus,
.btn-default:active:focus,
.btn-primary:focus,
.btn-primary:active:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Suchen-Button in der Navbar – Focus/Active ohne grünen Schatten */
#nav-searchbox button,
#nav-searchbox .btn,
#nav .btn,
#nav button {
    outline: none !important;
    box-shadow: none !important;
}


/* ===================================================================
   1. SCHRIFTEN – Open Sans
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

body,
.navbar,
button, input, select, textarea {
    font-family: 'Open Sans', "Noto Sans", "Lucida Sans Unicode", Geneva, helvetica, sans-serif;
}


/* ===================================================================
   2. BODY – neutraler Hintergrund ohne Bild
   (Original: #f3f3f0 mit header-background.png)
   =================================================================== */
body {
    background: #f0f0ee none !important;
}


/* ===================================================================
   3. BRANDING-HEADER (#branding)
   Schwarz – Utility-Nav und Logo auf dunklem Grund.
   Die Navigation darunter ist orange → klare Trennung.
   =================================================================== */
header#branding {
    background-color: #1a1a1a !important;
    height: auto !important;
    min-height: 80px !important;
    padding: 8px 0 !important;
    display: block !important;
    overflow: visible !important;
}
header#branding .row {
    background-color: transparent !important;
    min-height: 70px;
    display: flex;
    align-items: center;
}
header#branding .container {
    min-height: 70px;
}

/* Logo – HTWD horizontal weiß */
h1.vivo-logo,
header#branding h1.vivo-logo,
#branding h1.vivo-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: 60px !important;
    width: 320px !important;
    max-width: 320px !important;
    background-image: url('https://bibservice.bib.htw-dresden.de/bibtesting/vivo/htwd-logo-rgb-horizontal-white.png') !important;
    background-size: auto 55px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 5px 0 5px 15px;
}
h1.vivo-logo a,
header#branding h1.vivo-logo a {
    display: block !important;
    height: 60px !important;
    width: 320px !important;
}

/* Sicherstellen dass der Logo-Text (displace) unsichtbar bleibt */
h1.vivo-logo .displace,
header#branding h1.vivo-logo .displace {
    position: absolute !important;
    left: -9999px !important;
}

/* Utility-Links (Index, Seitenverwaltung, Login) –
   auf schwarzem Grund: weiß mit Orange-Hover */
ul#header-nav li {
    color: #cccccc !important;
    border-right-color: rgba(255,255,255,0.2) !important;
}
ul#header-nav a {
    color: #cccccc !important;
    font-weight: 400;
}
ul#header-nav a:hover,
ul#header-nav a:active {
    color: #EC660C !important;
    text-decoration: none;
}


/* ===================================================================
   4. NAVIGATIONSLEISTE (#nav / .navbar)
   ORANGE – passend zum Header, eine visuelle Einheit.
   Schrift weiß, Hover dunkleres Orange.
   =================================================================== */
#nav-wrapper {
    /* kein Trennstreifen nötig, da gleiche Farbe wie Header */
    border-top: none;
}

#nav,
#nav.affix {
    background: #EC660C !important;
    overflow: hidden;
    position: relative;
}

#nav .navbar.navbar-default {
    background-color: #EC660C !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Globale Regel ".row { background: #ffffff }" wirkt auch innerhalb
   der Navbar und erzeugt die weiße Fläche/Linie -> hier neutralisieren */
#nav .row,
#nav-wrapper .row,
.navbar .row {
    background: transparent !important;
}

/* Alle Inputs/Buttons in der Nav: kein grüner Outline/Schatten */
#nav input,
#nav input:focus,
#nav input:active,
#nav button,
#nav button:focus,
#nav button:active,
#nav .btn,
#nav .btn:focus,
#nav .btn:active,
#nav-searchbox input,
#nav-searchbox input:focus,
#nav-searchbox button,
#nav-searchbox button:focus {
    outline: none !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Menü-Links */
#main-nav > li > a.nav-link,
#nav .navbar-nav > li > a {
    color: #ffffff !important;
    font-weight: 600;
    padding: 12px 15px;
}
#main-nav > li > a.nav-link:hover,
#main-nav > li > a.nav-link:focus,
#nav .navbar-nav > li > a:hover,
#nav .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: #c85400 !important;
}
#main-nav > li.active > a,
#nav .navbar-nav > li.active > a {
    color: #ffffff !important;
    background-color: #a34300 !important;
    font-weight: 700;
}

/* Hamburger-Button (Mobile) */
#nav .navbar-toggle {
    border-color: rgba(255,255,255,0.5) !important;
}
#nav .navbar-toggle .button-label {
    color: #ffffff !important;
}
#nav .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}
#nav .navbar-toggle:hover,
#nav .navbar-toggle:focus {
    background-color: #c85400 !important;
}

/* Ausgeklapptes Mobile-Menü */
#nav .navbar-collapse {
    background-color: #EC660C;
    border-top: 1px solid rgba(255,255,255,0.2);
}

/* Suchfeld in der Navbar – #search-field hat im Original ein
   Background-Image (search-interior-pages.png, weiß mit grünem Akzent)
   UND #search/#search-field haben eine feste Breite von 396px aus dem
   Original-CSS, die ein weißes Restfeld erzeugt. Alles neutralisieren: */
.navbar-header,
.navbar-header.pull-right,
.navbar-header .nav,
.navbar-header .nav.pull-left,
.navbar-header li,
#search,
#search-field,
#search fieldset,
#search legend,
#search-form {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.navbar-header.pull-right {
    height: auto !important;
    float: right;
}
.navbar-header .nav.pull-left {
    height: auto !important;
}
.navbar-header li {
    height: auto !important;
    list-style: none;
}

/* Browser-Default-Styles von fieldset/legend entfernen
   (Border, Padding, Margin) – diese erzeugen die weiße Box */
#search fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
}
#search legend {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    /* Screenreader-only: visuell ausblenden, aber zugänglich halten */
    position: absolute !important;
    left: -9999px !important;
    height: 1px !important;
    overflow: hidden !important;
}
#search-form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#search,
#search-field {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    right: auto !important;
    padding-top: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* #search ist der äußere Container – einfache, robuste Zentrierung
   ohne height:100% (verursacht überdimensionierte Box bei undefinierter
   Eltern-Höhe) */
#search {
    display: inline-block !important;
    height: auto !important;
    padding: 7px 15px 0 0 !important;
    float: none !important;
    vertical-align: middle;
}

#search-field {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

#search-field input.search-vivo {
    background-color: #ffffff !important;
    border: 1px solid #c85400 !important;
    color: #1a1a1a !important;
    border-radius: 3px 0 0 3px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    width: 240px;
    height: 36px;
    font-size: 14px;
    margin: 0 !important;
    padding: 0 8px;
}
#search-field input.search-vivo::placeholder {
    color: #999999 !important;
}
#search-field input.search-vivo:focus {
    background-color: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Such-Button (input[type=submit].search) – dunkles Anthrazit
   für klaren Kontrast zu Orange-Navbar und weißem Suchfeld */
#search-field input.search {
    background-color: #1a1a1a !important;
    background-image: none !important;
    border: 1px solid #1a1a1a !important;
    color: #ffffff !important;
    border-radius: 0 3px 3px 0 !important;
    font-weight: 600;
    font-size: 14px;
    height: 36px;
    margin: 0 !important;
    padding: 0 16px;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none;
}
#search-field input.search:hover {
    background-color: #2a2a2a !important;
    border-color: #2a2a2a !important;
}
#search-field input.search:focus,
#search-field input.search:active {
    outline: none !important;
    box-shadow: none !important;
}


/* ===================================================================
   5. HERO-BEREICH (Startseite, .hero)
   Original: #283a4b + hero-background.jpg (repeat-x).

   Option A – Eigenes Bild per Server (empfohlen):
     Datei ablegen unter:
       [tomcat]/webapps/vivo/themes/tenderfoot/images/hero-background.jpg
     Dann diesen Block AKTIVIEREN (Kommentar entfernen):

.hero {
    background: #1a1a1a url('../images/hero-background.jpg') center center / cover no-repeat !important;
}

   Option B – Externes Bild per URL (kein Serverzugriff nötig):
     URL unten eintragen und Block aktivieren:

.hero {
    background: #1a1a1a url('https://DEINE-URL/bild.jpg') center center / cover no-repeat !important;
}

   Option C – Nur Farbe (aktuell aktiv):
   =================================================================== */
.hero {
    background: #1a1a1a url('https://bibservice.bib.htw-dresden.de/bibtesting/vivo/Zentralgeb.jpg') center center / cover no-repeat !important;
    position: relative;
    min-height: 480px;
}

/* Dreieck-Design im HTWD-Stil */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 69%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    clip-path: polygon(0 0, 80% 0, 55% 100%, 0 100%);
    z-index: 0;
}

/* Inhalte über dem Dreieck */
.hero .theme-showcase {
    position: relative;
    z-index: 1;
}

/* Hero-Suchfeld */
#search-homepage input[type="text"],
#search-homepage .form-control {
    background-color: rgba(255,255,255,0.9) !important;
    border: 1px solid #cccccc !important;
    color: #1a1a1a !important;
}
#search-homepage input::placeholder {
    color: #888888 !important;
}
#search-homepage select.form-control {
    background-color: rgba(255,255,255,0.9) !important;
    border: 1px solid #cccccc !important;
    color: #1a1a1a !important;
}
/* Suchen-Button im Hero klar sichtbar – voller Hover, kein Focus-Ring */
#search-homepage .btn-default,
#search-homepage button[type="submit"],
#search-homepage .input-group-btn .btn,
#search-homepage .input-group-btn button {
    background-color: #EC660C !important;
    border-color: #c85400 !important;
    color: #ffffff !important;
    font-weight: 700;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
}
#search-homepage .btn-default:hover,
#search-homepage button[type="submit"]:hover,
#search-homepage .input-group-btn .btn:hover,
#search-homepage .input-group-btn button:hover {
    background-color: #c85400 !important;
    border-color: #a34300 !important;
    box-shadow: none !important;
}
#search-homepage .btn-default:focus,
#search-homepage button[type="submit"]:focus,
#search-homepage .input-group-btn .btn:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: #EC660C !important;
}

/* Jumbotron – dunkle Schrift auf weißem Dreieck, linksbündig */
.jumbotron {
    background-color: transparent !important;
    text-align: left !important;
    padding-left: 30px;
    padding-right: 0;
    margin-bottom: 0;
}
.jumbotron h1 {
    color: #1a1a1a !important;
    font-weight: 700;
    font-size: 2.2em;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    text-shadow: none;
    margin-bottom: 12px;
    max-width: 420px;
}
.jumbotron p {
    color: #333333 !important;
    font-size: 0.95em;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    text-shadow: none;
    max-width: 390px;
    line-height: 1.5;
}

/* Suchformular: Breite begrenzen damit es im Dreieck bleibt */
#search-homepage {
    max-width: 430px;
    padding-left: 30px;
}

/* Such-Button auf der Startseite */
#search-homepage .btn-default,
#search-homepage button[type="submit"] {
    background-color: #EC660C !important;
    border-color: #c85400 !important;
    color: #ffffff !important;
    font-weight: 600;
}
#search-homepage .btn-default:hover {
    background-color: #c85400 !important;
}


/* ===================================================================
   6. HOME-SECTIONS – Startseiten-Kacheln (Forschung, Fachbereich, etc.)
   Original: h4-Überschriften mit background-color #338caf (teal).
   =================================================================== */
.home-sections {
    border-top-color: #e0d8d0 !important;
    border-bottom-color: #e0d8d0 !important;
    background-color: #ffffff !important;
}

/* Die Kategorie-Überschriften (Forschung / Fachbereich / Abteilungen) */
.home-sections h4,
#home-academic-depts h4,
#home-faculty-mbrs h4,
#home-geo-focus h4,
#home-research h4 {
    background-color: #EC660C !important;
    border-bottom: 2px solid #c85400 !important;
    color: #ffffff !important;
}

/* Statistiken-Liste */
/* Abstand zum Footer absichern */
#home-stats {
    margin-bottom: 40px !important;
    overflow: visible;
}

/* Basis-Stil für alle Kacheln */
#stats li {
    color: #1a1a1a !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0,0,0,0.15);
    min-width: 160px;
    min-height: 160px;
    padding: 18px !important;
    margin-bottom: 40px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}

/* Individuelle Farben per nth-child – harter 135°-Diagonalschnitt */
#stats li:nth-child(1) {
    background: linear-gradient(135deg, #8baddb 50%, #c9e0f5 50%) !important;
}
#stats li:nth-child(2) {
    background: linear-gradient(135deg, #83be63 50%, #bcdda3 50%) !important;
}
#stats li:nth-child(3) {
    background: linear-gradient(135deg, #87ccd3 50%, #bfe8ec 50%) !important;
}
#stats li:nth-child(4) {
    background: linear-gradient(135deg, #bc99c7 50%, #ddc4e5 50%) !important;
}
#stats li:nth-child(5) {
    background: linear-gradient(135deg, #f7a600 50%, #fbd07a 50%) !important;
}
#stats li:nth-child(6) {
    background: linear-gradient(135deg, #a1d9f7 50%, #d4effc 50%) !important;
}
#stats li:nth-child(7) {
    background: linear-gradient(135deg, #cbd00f 50%, #e4e87a 50%) !important;
}
#stats li:nth-child(8) {
    background: linear-gradient(135deg, #cebfad 50%, #e5dcd3 50%) !important;
}
#stats li:nth-child(9) {
    background: linear-gradient(135deg, #bdc1d0 50%, #dcdfe8 50%) !important;
}
#stats li a:hover {
    opacity: 0.85;
}
/* Zahl in Anthrazit, Beschriftung etwas dunkleres Grau-Blau */
#stats .stats-count {
    font-size: 2.4em;
    line-height: 1.1;
}
#stats .stats-count span {
    color: #1a1a1a !important;
    opacity: 1 !important;
    font-weight: 700;
    font-size: 0.5em;
}
#stats p {
    color: #2a2a2a !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9em;
}

/* Zeile unter den Kacheln */
.faculty-home,
.research-count {
    background-color: #ffffff !important;
}


/* ===================================================================
   7. INHALTSTITELZEILE (.row.title)
   Original: #398AAC (teal). → Orange.
   =================================================================== */
.row.title {
    background: #EC660C !important;
}
.row.title span,
.row.title h1,
.row.title h1 a {
    color: #ffffff !important;
}


/* ===================================================================
   8. ÜBERSCHRIFTEN
   Original: #064d68 (dunkelblau). → HTWD-Anthrazit/Orange.
   =================================================================== */
h2 {
    color: #1a1a1a !important;
}
h2 a,
h2 a:link,
h2 a:visited {
    color: #b84e08 !important;
    text-decoration: underline;
}
h2 a:hover {
    color: #EC660C !important;
}
h3 {
    color: #1a1a1a !important;
}
h4, h5 {
    color: #333333 !important;
}

/* Abschnittsüberschriften auf Profilseiten (article.property h3) */
article.property h3 {
    color: #1a1a1a !important;
}


/* ===================================================================
   9. LINKS (allgemein)
   =================================================================== */
a,
a:link {
    color: #b84e08;
}
a:visited {
    color: #8a3a05;
}
a:hover,
a:focus {
    color: #EC660C;
}

/* Forschungsgebiete-Tags auf Profilseiten */
#individual-hasResearchArea a {
    border-color: #EC660C !important;
    color: #b84e08 !important;
}
#individual-hasResearchArea a:hover {
    background: #EC660C !important;
    color: #ffffff !important;
}

/* Personen-Intro */
#individual-intro h1 {
    color: #b84e08 !important;
}


/* ===================================================================
   10. BUTTONS & FORMULARE
   =================================================================== */
.btn-primary {
    background-color: #EC660C !important;
    border-color: #c85400 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #c85400 !important;
    border-color: #a34300 !important;
}

.btn-default {
    border-color: #EC660C !important;
    color: #EC660C !important;
}
.btn-default:hover {
    background-color: #EC660C !important;
    color: #ffffff !important;
    border-color: #EC660C !important;
}

/* btn-info (z. B. Netzwerk-Links auf Profilseiten) */
.btn-info {
    background-color: #EC660C !important;
    border-color: #c85400 !important;
    color: #ffffff !important;
}
.btn-info:hover {
    background-color: #c85400 !important;
}

input[type="submit"],
button[type="submit"] {
    background-color: #EC660C !important;
    border-color: #c85400 !important;
    color: #ffffff !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: #c85400 !important;
}

/* Formular-Focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #EC660C !important;
    box-shadow: 0 0 4px rgba(236,102,12,0.4) !important;
    outline: none;
}


/* ===================================================================
   11. INHALTSBEREICH & TABS
   =================================================================== */
#wrapper-content {
    background: #ffffff !important;
}
.row {
    background: #ffffff;
}

/* Tabs */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top: 3px solid #EC660C !important;
    color: #EC660C !important;
}
.nav-tabs > li > a:hover {
    border-top: 3px solid #c85400;
    color: #EC660C !important;
    background-color: #fff3eb;
}

/* Flash-Meldungen */
#flash-message {
    border-color: #EC660C !important;
    background-color: #fff3eb !important;
}

/* Panels */
.panel-default > .panel-heading {
    border-bottom: 2px solid #EC660C;
    font-weight: 700;
}

/* Suchergebnisse */
li.vivo-result h2 a,
.search-result h2 a {
    color: #b84e08 !important;
}
li.vivo-result h2 a:hover,
.search-result h2 a:hover {
    color: #EC660C !important;
}

/* Facetten */
#facets h3,
.facet-list h3 {
    color: #EC660C !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.04em;
}

/* Inline-Edit */
.edit-link a {
    color: #EC660C !important;
}


/* ===================================================================
   12. PROFILSEITEN
   =================================================================== */
.person-details,
.photo-wrapper {
    background: #f0f0ee !important;
}
.individual-name,
h1.individual-name {
    color: #1a1a1a !important;
    font-size: 1.8em;
    font-weight: 700;
}


/* ===================================================================
   13. FOOTER
   Original: schwarz. Bleibt dunkel, bekommt Orange-Akzent.
   =================================================================== */
footer {
    background-color: #1a1a1a !important;
    border-top: 3px solid #EC660C !important;
    color: #cccccc !important;
}
footer .row {
    background-color: #1a1a1a !important;
}
footer p.copyright,
footer p.copyright small {
    color: #aaaaaa !important;
    font-size: 0.85em;
}
#footer-nav a,
footer a,
a.terms,
a.powered-by-vivo {
    color: #EC660C !important;
}
#footer-nav a:hover,
footer a:hover,
a.terms:hover,
a.powered-by-vivo:hover {
    color: #ffffff !important;
    text-decoration: none;
}
ul#footer-nav li {
    border-right-color: #444444 !important;
}


/* ===================================================================
   14. RESPONSIVE (Mobile ≤ 767px)
   =================================================================== */
@media (max-width: 767px) {

    header#branding {
        min-height: 60px;
        padding: 8px 0;
    }

    #nav .navbar-collapse.in {
        background-color: #EC660C;
    }
    #nav .navbar-collapse.in #main-nav > li > a {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    #nav .navbar-collapse.in #main-nav > li > a:hover {
        background-color: #c85400 !important;
    }

    footer {
        height: auto !important;
        padding: 20px 0;
    }
    footer p.copyright,
    ul#footer-nav {
        float: none !important;
        padding-top: 10px !important;
    }
}