/* ============================================================
   GospelKingz - Sprint 2 Component Extensions
   Imported by main.css via <link> in layout
   ============================================================ */

/* Stat Card */
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--space-5); text-align:center; transition:transform var(--t-fast), border-color var(--t-fast); }
.stat-card:hover { transform:translateY(-2px); border-color:var(--primary); }
.stat-card__value { font-family:var(--font-display); font-size:28px; font-weight:800; line-height:1; display:block; margin-bottom:4px; }
.stat-card__label { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--space-2); flex-wrap:wrap; }
.page-link { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 var(--space-2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; font-size:14px; font-weight:600; transition:all var(--t-fast); background:var(--surface); }
.page-link:hover { border-color:var(--primary); color:var(--primary-light); background:var(--primary-glow); }
.page-link.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* Tabs */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:var(--space-6); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:var(--space-3) var(--space-5); font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color var(--t-fast), border-color var(--t-fast); cursor:pointer; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--primary-light); border-bottom-color:var(--primary); }

/* Badge Extras */
.badge-gold    { background:var(--gold-glow);  color:var(--gold-light);  border:1px solid var(--gold); }
.badge-success { background:rgba(16,185,129,0.15); color:#34d399; border:1px solid rgba(16,185,129,0.4); }
.badge-warning { background:rgba(245,158,11,0.15); color:var(--gold-light); border:1px solid rgba(245,158,11,0.4); }
.badge-danger  { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.4); }
.badge-info    { background:rgba(59,130,246,0.15); color:#60a5fa; border:1px solid rgba(59,130,246,0.4); }
.badge-muted   { background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }

/* Button Extras */
.btn-danger  { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:#dc2626; border-color:#dc2626; }
.btn-gold    { background:linear-gradient(135deg,var(--gold),#d97706); color:#000; border:none; font-weight:700; }
.btn-gold:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-xl  { padding:14px 32px; font-size:16px; }
.btn-icon{ width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.btn-block { width:100%; justify-content:center; }

/* Alert extras */
.alert-info    { background:rgba(59,130,246,0.1);  border-color:rgba(59,130,246,0.4);  color:#93c5fd; }
.alert-success { background:rgba(16,185,129,0.1);  border-color:rgba(16,185,129,0.4);  color:#6ee7b7; }
.alert-warning { background:rgba(245,158,11,0.1);  border-color:rgba(245,158,11,0.4);  color:var(--gold-light); }
.alert-error   { background:rgba(239,68,68,0.1);   border-color:rgba(239,68,68,0.4);   color:#fca5a5; }

/* File Upload Dropzone */
.file-upload { border:2px dashed var(--border-light); border-radius:var(--r-lg); padding:var(--space-10) var(--space-8); text-align:center; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); position:relative; }
.file-upload:hover, .file-upload.dragover { border-color:var(--primary); background:var(--primary-glow); }
.file-upload input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.file-upload__icon { font-size:40px; margin-bottom:var(--space-3); }
.file-upload__text { font-weight:600; color:var(--text-2); margin-bottom:var(--space-2); }
.file-upload__hint { font-size:12px; color:var(--muted); }

/* Queue Panel */
.queue-panel { position:fixed; right:0; bottom:var(--player-height); top:var(--navbar-height); width:320px; background:var(--surface); border-left:1px solid var(--border); z-index:900; transform:translateX(100%); transition:transform var(--t-normal); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.queue-panel.open { transform:translateX(0); }
.queue-panel__header { padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
#queue-list { overflow-y:auto; flex:1; }
.queue-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); cursor:pointer; transition:background var(--t-fast); border-bottom:1px solid var(--border); }
.queue-item:hover { background:var(--surface-2); }
.queue-item.current { background:var(--primary-glow); border-left:3px solid var(--primary); }
.queue-item__num   { width:22px; text-align:center; font-size:12px; color:var(--muted); font-weight:700; flex-shrink:0; }
.queue-item__cover { width:40px; height:40px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.queue-item__info  { flex:1; overflow:hidden; }
.queue-item__title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-item__artist{ font-size:11px; color:var(--muted); }

/* Artist Card */
.artist-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); text-align:center; }
.artist-card:hover { transform:translateY(-4px); border-color:var(--primary); box-shadow:var(--shadow-glow); }
.artist-card__banner { height:90px; position:relative; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.artist-card__avatar { position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; border:3px solid var(--surface); object-fit:cover; }
.artist-card__body { padding:36px var(--space-4) var(--space-5); display:flex; flex-direction:column; align-items:center; gap:var(--space-2); }
.artist-card__name { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); }
.artist-card__meta { font-size:12px; color:var(--muted); margin-bottom:var(--space-2); }

/* Grid 3 */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }

/* Utility Classes */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.items-center    { align-items:center; }
.items-end       { align-items:flex-end; }
.justify-between { justify-content:space-between; }
.flex-col        { flex-direction:column; }
.gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); }
.gap-4 { gap:var(--space-4); }
.gap-5 { gap:var(--space-5); }
.gap-6 { gap:var(--space-6); }
.gap-8 { gap:var(--space-8); }
.mt-2 { margin-top:var(--space-2); }
.mt-3 { margin-top:var(--space-3); }
.mt-4 { margin-top:var(--space-4); }
.mt-5 { margin-top:var(--space-5); }
.mt-8 { margin-top:var(--space-8); }
.mb-2 { margin-bottom:var(--space-2); }
.mb-3 { margin-bottom:var(--space-3); }
.mb-4 { margin-bottom:var(--space-4); }
.mb-5 { margin-bottom:var(--space-5); }
.mb-6 { margin-bottom:var(--space-6); }
.mb-8 { margin-bottom:var(--space-8); }
.text-sm    { font-size:13px; }
.text-xs    { font-size:11px; }
.text-center{ text-align:center; }
.text-right { text-align:right; }
.text-muted { color:var(--muted); }
.text-gold  { color:var(--gold); }
.font-bold  { font-weight:700; }

/* Song Card States */
.song-card.is-playing { background:var(--primary-glow); border-left:3px solid var(--primary); }
.song-card.is-playing .song-card__title { color:var(--primary-light); }
.liked { border-color:var(--danger) !important; color:var(--danger) !important; }

/* Profile Banner */
.profile-banner { position:relative; height:200px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--space-6); }
.profile-banner img { width:100%; height:100%; object-fit:cover; }
.profile-banner__edit { position:absolute; top:var(--space-4); right:var(--space-4); }

/* Follow Button */
.follow-btn.following { background:transparent; border-color:#34d399; color:#34d399; }
.follow-btn.following:hover { background:rgba(239,68,68,0.1); border-color:#f87171; color:#f87171; }

/* Responsive extras */
@media (max-width:900px) { .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .grid-3 { grid-template-columns:1fr; } .queue-panel { width:100%; } }

/* -- Track Card V2 (Horizontal Style) ---------------------- */
.track-card-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e8e8e8);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.track-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.track-card-img-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    background: var(--surface-2, #f0f0f0);
}
.track-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.track-card-item:hover .track-card-img-wrap img {
    transform: scale(1.05);
}
.track-card-play-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ff1a55; /* The red/pink brand color */
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease, background 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding-left: 3px; /* visual center for play icon */
}
.track-card-play-btn:hover {
    background: #e0003a;
    transform: scale(1.1);
}
.track-card-options {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    z-index: 3;
    transition: opacity 0.2s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.track-card-item:hover .track-card-options {
    opacity: 1;
}
.track-card-options:hover {
    color: #ff1a55;
}
.track-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    flex: 1;
    min-width: 0;
}
.track-card-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}
.track-card-artist {
    font-size: 13px;
    color: var(--muted, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.track-card-artist span { color: inherit; text-decoration: none; cursor:pointer; }
.track-card-artist span:hover { color: #333; text-decoration: underline; }
.track-card-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
    font-weight: 500;
}
.track-card-meta i { opacity: 0.8; }



/* Bottom nav */
html.light-theme .bottom-nav { background: #ffffff !important; border-top-color: #e5e7eb !important; }
html.light-theme .bottom-nav__item { color: #6b7280 !important; }
html.light-theme .bottom-nav__item.active { color: #dc2626 !important; }

/* JNews homepage light mode */
html.light-theme body.jnews-layout { background-color: #f5f5f5 !important; color: #111111 !important; }
html.light-theme .jnews-header-wrapper { background: #ffffff !important; border-bottom-color: #e5e7eb !important; }
html.light-theme .jnews-topbar { background: #f8f8f8 !important; color: #555 !important; }
html.light-theme .jnews-topbar a { color: #555 !important; }
html.light-theme .jnews-midbar { background: #ffffff !important; }
html.light-theme .jnews-navbar { background: #ffffff !important; border-color: #e5e7eb !important; }
html.light-theme body.jnews-layout section,
html.light-theme body.jnews-layout main { background-color: #f5f5f5 !important; color: #111111 !important; }
html.light-theme body.jnews-layout footer { background-color: #ffffff !important; border-top-color: #e5e7eb !important; }



/* ============================================================
   ARTIST HUB & DASHBOARD LIGHT MODE OVERRIDES
   ============================================================ */
html.light-theme .v5-header { background: #ffffff !important; }
html.light-theme .v5-info h1, 
html.light-theme .v5-name { color: #111111 !important; }
html.light-theme .v5-meta { color: #555555 !important; }
html.light-theme .hub-legacy-wrapper { 
    --hub-bg: #f5f5f5 !important; 
    --hub-surface: #ffffff !important; 
    --hub-surface-hover: #f1f1f1 !important; 
    --hub-text: #111111 !important; 
    --hub-muted: #666666 !important; 
    --hub-border: #e5e7eb !important; 
}
html.light-theme .hub-latest-card { background: #ffffff !important; border-color: #e5e7eb !important; }
html.light-theme .latest-info { background: #ffffff !important; }
html.light-theme .latest-title, 
html.light-theme .card-title, 
html.light-theme .song-title, 
html.light-theme .album-title { color: #111111 !important; }
html.light-theme .latest-meta, 
html.light-theme .card-meta, 
html.light-theme .song-artist, 
html.light-theme .album-meta { color: #666666 !important; }
html.light-theme .card-info { background: #ffffff !important; }
html.light-theme .hub-album-card { background: #ffffff !important; border-color: #e5e7eb !important; }
html.light-theme .song-row:hover { background: #f3f4f6 !important; }
html.light-theme .artist-legacy-ui > div { background: #ffffff !important; color: #111111 !important; }
html.light-theme .artist-mobile-ui { background: #f5f5f5 !important; }
html.light-theme .artist-mobile-ui > div { background: #ffffff !important; }
html.light-theme .v5-stats, html.light-theme .v5-stat-item { color: #111111 !important; }
html.light-theme .v5-stat-label { color: #666666 !important; }
html.light-theme .v5-btn-secondary { background: #f3f4f6 !important; color: #111111 !important; border-color: #e5e7eb !important; }
html.light-theme .hub-section-title { color: #111111 !important; }
html.light-theme .v5-verified-badge svg { fill: #dc2626 !important; }