/*
 * A TEI Viewer for East Asian Pre-Modern Texts
 * Customize CSS
 * Originally written by Yuying Jin (Northeastern University)
 * Modified by Jun HOMMA (FLX Style)
 */

/* 全体 */
:root {
    --teiviewer4eaj-custom-color-1: #4a3b2b;
    --teiviewer4eaj-custom-color-2: #8c644a;
    --teiviewer4eaj-custom-color-3: #d8c4a0;
    --teiviewer4eaj-custom-color-4: #f8f4e6;
}

body {
    font-family: 'Noto Serif', 'Songti SC', serif;
    background-color: var(--teiviewer4eaj-custom-color-4);
    color: var(--teiviewer4eaj-custom-color-1);
}

/** ヘッダ部分 */
header {
    background-color: var(--teiviewer4eaj-custom-color-2);
    color: #fff;
/*     padding: 10px; */
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
/*     border-bottom: 4px solid var(--teiviewer4eaj-custom-color-3); */
}

div.bg-dark {
    background-color: #33291e ! important;
}

.container-fluid {
    padding-left: 10px;
}

a.navbar-brand {
    color: #fff;
    text-decoration: none;
}

.navbar-dark {
    background-color: var(--teiviewer4eaj-custom-color-1);
    border-bottom: 2px solid var(--teiviewer4eaj-custom-color-3);
}

.nav-link.active {
    color: var(--teiviewer4eaj-custom-color-2) !important;
}

.min-vh-100-custom {
    min-height: calc(100vh - 58px) !important;
}

/** ビューワ左側（本文表示部・脚注表示部・グラフ表示部を含む）*/
#left_col {
    background-color: #fff;
    border: 1px solid var(--teiviewer4eaj-custom-color-3);
    padding-top: 10px;
    margin-bottom: 8px; /* ブラウザ幅を狭めたときのために必要＋ビューワ右側の最下部と揃うように */
}

/*** 本文表示部・aux表示部・脚注表示部 */
#body_result,
#aux_area_0,
#bottom_result {
    letter-spacing: 1px;
    color: var(--teiviewer4eaj-custom-color-1);
    background-color: var(--teiviewer4eaj-custom-color-4);
    border: 1px solid var(--teiviewer4eaj-custom-color-3);
}

/*** 本文表示部・aux表示部 */
#body_result,
#aux_result_0 {
    font-size: 1.1em;
    border-radius: 4px 4px 0 0;
}

/*** 脚注表示部 */
#bottom_result {
    font-size: 1em;
    border-radius: 0 0 4px 4px;
/*     background-color: #f7eece; */
    box-shadow: inset 0px 2px 4px #d8c4a2;
    margin-top: 5px;
}

/*** 本文表示部と脚注表示部を区切るリサイズハンドル */
#text_body .ui-resizable-handle.ui-resizable-s {
    background-color: var(--teiviewer4eaj-custom-color-4);
}
#text_body.ui-resizable #body_result {
    margin-bottom: 0;
}
#text_bottom.text-body-resizable #bottom_result {
    margin-top: 1px;
}

/*** グラフ表示部 */
#graph_result .svglink:hover,
#graph_result .pnglink:hover {
    color: black;
}

/** ビューワ右側（機能パネル部） */
/*** 基本タブ */
#home_tab_pane {
    font-size: 0.9em;
}

#home_tab_pane .heading1 {
    font-size: 1rem;
}

.form-check-input:checked {
    background-color: var(--teiviewer4eaj-custom-color-1);
    border-color: var(--teiviewer4eaj-custom-color-1);
}

/*** タブ部分 */
button.nav-link {
    color: var(--teiviewer4eaj-custom-color-1);
    /* border-top-left-radius: 5px;
    border-top-right-radius: 5px; */
    text-align: center;
}

button.nav-link:hover {
    background-color: var(--teiviewer4eaj-custom-color-3);
    color: #000;
    /* cursor: pointer; */
}

button.nav-link.active {
    color: #fff;
    background-color: var(--teiviewer4eaj-custom-color-2);
    border: 1px solid var(--teiviewer4eaj-custom-color-3);
    font-weight: bold;
}

/*** 参照関係タブなど */
/**** アコーディオンのヘッダ（広げられた状態） */
.accordion-button:not(.collapsed) {
    font-weight: bold;
    background: var(--teiviewer4eaj-custom-color-3);
    transition: background-color 0.3s, box-shadow 0.3s;
    /* padding: 12px 16px; */
}

/**** アコーディオンのヘッダ（折り畳まれた状態） */
.accordion-button {
    color: var(--teiviewer4eaj-custom-color-1);
    transition: background-color 0.3s, color 0.3s;
}

.accordion-button:hover {
    background-color: var(--teiviewer4eaj-custom-color-4);
}

/***** アコーディオンのヘッダ内のリンク（VIAFなど） */
.accordion-button a {
    color: var(--teiviewer4eaj-custom-color-1);
}

.accordion-button a:hover {
    color: var(--teiviewer4eaj-custom-color-2);
}

/***** アコーディオンのヘッダ内の件数表示 */
.accordion-button span.badge.bg-primary {
    background-color: var(--teiviewer4eaj-custom-color-1) ! important;
    color: #fff;
}

/**** アコーディオンのコンテンツ */
/***** 「参照している箇所」リストの要素 */
li.list-group-item:hover {
    background: var(--teiviewer4eaj-custom-color-4);
}

/**** 本文表示部の内容 */

idno {
    font-size: 0.9em;
    color: var(--teiviewer4eaj-custom-color-1);
    display: inline-block;
}

span.persname {
    /*     color: #19537D; */
    color: #0559a8;
}