/*
 * Optik 1:1 wie die top100-Tabellen im Plugin keyword-db-api.
 * Die Werte sind woertlich aus keyword-db-api/assets/keyword-db.css uebernommen
 * (dort Zeilen 1-27 und 388-415), nur auf den eigenen Namespace umgeschrieben.
 *
 * Eigener Namespace statt .k-table, weil keyword-db.css von den dortigen Templates
 * inline ausgegeben wird und auf normalen Seiten gar nicht existiert -- und damit es
 * keine doppelte Regelanwendung gibt, falls der Shortcode je auf einer Keyword-DB-Seite steht.
 */

.osg-kwt-table {
    margin-bottom: 0 !important;
    font-size: 14px;
    min-width: 100%;
    width: auto;
    table-layout: auto;
}

/*
 * Kopfzeile: OSG-Blau, weiss, Versalien.
 * Bewusst mit .osg-kwt davor: das Theme dieses Repos faerbt th-Elemente global ein
 * (vgl. Task 023, Theme-CSS-Bleed) -- die zusaetzliche Stufe Spezifitaet haelt dagegen.
 */
.osg-kwt-table thead {
    font-weight: bold;
    background-color: #134269;
}

.osg-kwt .osg-kwt-table thead th {
    background-color: #134269;
    color: #fff;
    text-transform: uppercase;
}

/*
 * Kopfzeile bleibt beim Scrollen stehen.
 *
 * `position: sticky` sitzt bewusst auf den `th` und nicht auf `thead`/`tr`: Safari und
 * aeltere Chrome-Versionen ignorieren sticky auf Tabellen-Zeilengruppen, auf Zellen
 * funktioniert es ueberall. Bezugsrahmen ist der Scroll-Container darunter -- deshalb
 * hat der eine Default-Hoehe (s. .osg-kwt-table-container).
 *
 * Der Hintergrund liegt schon auf dem `th` (Regel darueber), sonst wuerden die
 * durchlaufenden Zeilen unter der Kopfzeile durchscheinen. Die Trennlinie kommt als
 * inset-Schatten statt als border: bei `border-collapse: collapse` -- das Theme setzt
 * das global -- wandert ein echter Rahmen mit der Zelle weg und verschwindet.
 */
.osg-kwt .osg-kwt-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 #0d3151;
}

/* Die 1px-Zeilenlinie darf die farbige Kopfzeile nicht anschneiden. */
.osg-kwt .osg-kwt-table thead tr {
    border-top: 0;
}

.osg-kwt-table tbody tr:nth-child(odd) {
    background-color: #fff;
}

.osg-kwt-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.osg-kwt-table tbody tr:hover,
.osg-kwt-table thead tr:hover {
    background-color: #f3f3f3;
}

.osg-kwt-table tbody tr,
.osg-kwt-table thead tr {
    border-top: 1px solid #ddd;
}

.osg-kwt-table tbody td,
.osg-kwt-table thead th {
    padding: 8px 12px;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: text-top;
}

/*
 * Scroll-Container -- wie .table-container in den top100-Tabellen, plus Default-Hoehe.
 *
 * Die Hoehe ist noetig, damit die sticky Kopfzeile ueberhaupt greift: sticky bezieht sich
 * auf den naechsten Scroll-Container, und `overflow-x: auto` macht diesen Container schon
 * zu einem -- ohne Hoehenbegrenzung scrollt er nie, also bliebe die Kopfzeile wirkungslos.
 * Am Viewport statt am Container kann sie nicht kleben, weil `overflow-y: visible` neben
 * `overflow-x: auto` laut Spezifikation zu `auto` wird.
 *
 * 70vh trifft nur lange Tabellen: alles, was kuerzer ist, sieht aus wie vorher. Das
 * Attribut `max_height` ueberschreibt den Wert weiterhin per Inline-Style.
 */
.osg-kwt-table-container {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    max-height: 70vh;
    -webkit-overflow-scrolling: touch;
}

/* Keyword-Spalte darf umbrechen, Kennzahlen bleiben rechtsbuendig. */
.osg-kwt-table .osg-kwt-col-keyword {
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    min-width: 180px;
}

.osg-kwt-table .osg-kwt-col {
    text-align: right;
}

/* Trend der letzten 6 Monate hinter dem Wert (wie osg-ps-marktanalyse, aber nur Richtung, ohne Wertung) */
.osg-kwt-table .osg-kwt-trend {
    font-size: .7em;
    vertical-align: 1px;
    color: #8a9099;
    cursor: help;
}

.osg-kwt-table .osg-kwt-trend-flat {
    font-size: 1em;
    font-weight: 700;
    vertical-align: 0;
    color: #b2b8c0;
}

.osg-kwt-source {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.osg-kwt-source-note {
    color: #676767;
}

/* ---------------------------------------------------------------------------
 * Nur Admin: Verbindungstest auf der Settings-Seite.
 * Bewusst hier und nicht in einer zweiten Datei -- das Frontend laedt keine
 * dieser Klassen, sie kosten dort also nichts ausser ein paar Bytes.
 * ------------------------------------------------------------------------ */

.osg-kwt-test-output {
    margin-top: 12px;
    max-width: 900px;
}

.osg-kwt-test-status {
    font-style: italic;
    color: #676767;
}

.osg-kwt-diagnostics {
    margin: 12px 0;
}

.osg-kwt-diagnostics th {
    width: 160px;
    text-align: left;
}

.osg-kwt-state {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: baseline;
    background: #999;
}

.osg-kwt-state--ok    { background: #1a7f37; }
.osg-kwt-state--warn  { background: #bf8700; }
.osg-kwt-state--error { background: #b32d2e; }
.osg-kwt-state--info  { background: #195f98; }

.osg-kwt-preview {
    padding: 16px;
    background: #fff;
    border: 1px solid #dcdcde;
    overflow-x: auto;
}

.osg-kwt-shortcode-example {
    padding: 12px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    overflow-x: auto;
    white-space: pre;
}