/* db_style.css - Modular Database Styling */

:root { 
    --semi-bold: 500; /* Adjusted to 500 for the semi-bold look as discussed */
}

body { 
    background: #ffffff; 
    color: #212529; 
    padding: 20px; 
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
}

/* Database Action Buttons Styling */
.btn-db-action {
    background-color: #373536 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-db-action:hover {
    opacity: 0.9;
    color: #ffffff !important;
}

/* Checkbox Color Logic */
.form-check-input:checked {
    background-color: #373536;
    border-color: #373536;
}

/* Filter Section */
.filter-container { 
    background: #f8f9fa; 
    padding: 20px; 
    border-radius: 12px; 
    border: 1px solid #dee2e6; 
    margin-bottom: 30px; 
}

.filter-label { 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: #666; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
    display: block; 
}

/* Song Layout */
.song-card { 
    background: white !important; 
    border-radius: 8px; 
    border: 1px solid #eee; 
    margin-bottom: 15px; 
    overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.song-header { 
    background: white !important; 
    color: #212529 !important; 
    border-bottom: 1px solid #eee; 
    padding: 15px; 
    cursor: pointer; 
}

.song-title-main { 
    font-weight: var(--semi-bold) !important; 
    font-size: 1.25rem; 
    display: block; 
    margin-bottom: 0; 
    color: #000; 
}

/* Chord Bar - Keeping consistent with index.html */
.chord-bar { 
    background: #ffffff !important; 
    border-bottom: 1px solid #eee !important; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    padding: 12px; 
    align-items: center; 
}

.chord-item { 
    text-align: center; 
    width: 60px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.chord-item img { 
    width: 50px; 
    height: auto; 
    border-radius: 3px; 
}

/* Lyrics & Tooltips */
.lyrics-box { 
    display: none; 
    border-top: 1px solid #eee; 
    background: #fff; 
}

.lyrics-content { 
    color: #212529; 
    white-space: pre-wrap; 
    font-size: 1.15rem; 
    line-height: 1.6; 
    padding: 20px; 
}

.chord-tooltip { 
    color: #000000 !important; 
    font-weight: var(--semi-bold) !important; 
    text-decoration: none; 
    border-bottom: 1px dashed #3498db;
}

/* Utility */
.pdf-link { 
    color: #dc3545; 
    text-decoration: none; 
    font-weight: 800; 
    font-size: 0.75rem; 
    border: 1.5px solid #dc3545; 
    padding: 2px 6px; 
    border-radius: 4px; 
    float: right; 
}