/* ======= General Page Styles ======= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
}

/* ======= Navigation Bar ======= */
.navbar {
    /*background-color: #1DB954 !important; !* Spotify Green *!*/
    background-color: #f0f0f0 !important;
}

.navbar .container{
    display: block;
}

.fa-spotify {
    color: #1DB954;
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: bold;
    color: black;
}

/* ======= Hero Section ======= */
/*header {*/
/*    background-color: #1DB954;*/
/*    padding: 40px 20px;*/
/*    text-align: center;*/
/*    color: white;*/
/*    */
/*}*/
header {
    width: 100%;
    height: 40vw;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0 !important;
    padding: 0 0;
}

.title-container {
    position: absolute;
    width: 100%;
    height: 60vw;
    background-color: rgba(204, 204, 204, 0.9);
    padding: 10vw 30vw 0 20vw;
}

header h1 {
    font-size: 4.5vw;
    color: black;
    opacity: 0.9;
    font-weight: 700;
}

header h3 {
    color: rgba(50, 50, 50, 0.9);
    margin: 2vw 0;
}

header p {
    font-style: italic;
}

header img {
    width: 100%; /* Stretches */
    height: 100%;
    object-fit: cover; /* Stretches while cropping */
    object-position: bottom;
}

/* Author Text */
.author {
    font-size: 1.2vw;
    margin: 0;
}

/* ======= Container & Sections ======= */
.container {
    width: 90%;
    margin: auto;
    padding: 20px;
}

section {
    padding: 2vw 0;
}

h2 {
    border-bottom: 3px solid #1DB954;
    padding-bottom: 0.5vw;
    margin-bottom: 2vw;
}

/* ======= Data Visualization Section ======= */

.vis-container,
.insight-container{
    margin: 2vw 0;
    padding: 2vw;
    background-color:#f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /*width: 100%;*/
    /*height: 40vw*/

}

.insight-container h4 {
    font-weight: bold;
    margin-bottom: 1vw;
}

.fa-lightbulb{
    color: #d8d828;
}

.tip {
    font-style: italic;
    font-size: small;
    background-color: #e8e8e8;
    padding: 0.7vw 1vw;
    border-radius: 0.5vw;
}

.insight {
    color: #3a3a3a;
}

#top_100_songs,
#top_10_songs,
#chart3{
    width: 100%;
    height: 40vw;
}

/* ======= D3 Visualization Styles ======= */
svg {
    width: 100%;
    height: auto;
}

.bar {
    fill: #1DB954;
    transition: fill 0.3s ease-in-out;
}

.bar:hover {
    fill: #0f7a3a; 
}

/* Axis labels */
.axis text {
    font-size: 1.2vw;
}

.axis path,
.axis line {
    stroke: #888;
}

/* Bar Chart Labels */
.label {
    font-size: 1.2vw;
    fill: black;
    font-weight: bold;
}

/* ======= Footer ======= */
footer {
    background-color: #1DB954;
    color: #f0f0f0;
    text-align: center;
    padding: 1.5vw 0;
    font-size: 1.2vw;
}

/* Corr plot */
/* Search Container */
#artist-search-container {
    position: relative;
    width: 300px;
    display: flex;
    align-items: center;
    gap: 10px; 
    margin: 20px 0;
}

/* Mini Brush Container Styles */
#mini-brush-container {
    display: none;  /* 初始隐藏，滚动时显示 */
    position: fixed;
    top: 60px;  /* 导航栏下方 */
    right: 20px;
    width: 300px;
    height: 80px; /* 稍微减小默认高度 */
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 8px 8px 8px 4px; /* 减少所有内边距 */
    border: 1px solid #1DB954;
    transition: box-shadow 0.3s ease;
    /* 移除调整大小功能 */
    resize: none;
    overflow: hidden;
}

#mini-brush-container:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.mini-brush-header {
    display: flex;
    justify-content: flex-end; /* 将控制按钮放在右侧，因为已没有标题 */
    align-items: center;
    margin-bottom: 3px; /* 减小标题与图表间距 */
}

.mini-brush-title {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.mini-brush-controls {
    display: flex;
    gap: 10px;
    margin-right: 4px;
}

.mini-brush-control {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    font-size: 16px;
    width: 16px;
    height: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mini-brush-control:hover {
    opacity: 1;
}

.mini-brush-control.reset {
    color: #1DB954; /* Spotify绿色 */
}

#mini-chart4 {
    width: 100%;
    height: calc(100% - 15px); /* 增加高度占比，因为删除了标题 */
    min-height: 40px;
}

/* Search Input */
#artistSearch {
    flex: 1;
    width: 250px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Suggestion Dropdown */
.suggestions-list {
    position: absolute;
    top: 40px; 
    left: 0;
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; 
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* List items inside dropdown */
.suggestions-list li {
    padding: 8px;
    cursor: pointer;
    font-size: 14px;
}

.suggestions-list li:hover {
    background: #f0f0f0;
}

/* Reset Button */
#resetSearch {
    padding: 8px;
    background-color: #cacaca;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

#resetSearch:hover {
    background-color: #aaa;
}

.chart-instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 15px;
}

.reset-button {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.reset-button:hover {
    opacity: 1;
}

/* Reset button styles */
.main-reset-button {
    cursor: pointer;
    color: #333333;
    font-weight: bold;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid #333333;
}

.main-reset-button:hover {
    background-color: #f5f5f5;
    border-color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}