/**
 * Bloodlines Dynasty Power Map - Stylesheet
 * Constellation/Hive hybrid visualization
 * Copyright (c) 2026 Tammy L Casey. All rights reserved.
 */

/* --- BLOODLINES PAGE --- */
html, body { margin:0; padding:0; background:#000; color:#C0C0C0; overflow:hidden; height:100%; }

#bloodlines-container { position:relative; width:100%; height:100%; }

/* 3D graph canvas container */
#3d-graph { position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:0; }

/* Top bar */
#top-bar { position:absolute; top:40px; left:0; right:0; padding:10px 20px; background:rgba(0,0,0,0.8); border-bottom:1px solid rgba(192,192,192,0.2); display:flex; align-items:center; gap:15px; z-index:10; flex-wrap:wrap; }
#top-bar h1 { margin:0; font-size:var(--text-2xl); color:#FFD700; letter-spacing:3px; white-space:nowrap; }
#top-bar .stats { font-size:var(--text-sm); color:#888; white-space:nowrap; }

/* Search */
#search-box { background:rgba(255,255,255,0.08); border:1px solid rgba(192,192,192,0.3); color:#FFF; padding:5px 10px; border-radius:3px; font-size:var(--text-base); width:180px; }
#search-box::placeholder { color:#666; }

/* Filter chips */
.filter-bar { position:absolute; top:90px; left:10px; right:10px; display:flex; flex-wrap:wrap; gap:5px; z-index:10; padding:5px 10px; }
.dynasty-chip { padding:3px 8px; border-radius:12px; font-size:var(--text-xs); cursor:pointer; border:1px solid; opacity:0.6; transition:opacity 0.2s; white-space:nowrap; }
.dynasty-chip:hover, .dynasty-chip.active { opacity:1; }
.dynasty-chip .count { font-size:var(--text-2xs); opacity:0.7; margin-left:3px; }

/* Info panel */
#info-panel { position:absolute; bottom:0; left:0; right:0; max-height:40vh; overflow-y:auto; background:rgba(0,0,0,0.9); border-top:1px solid rgba(192,192,192,0.3); padding:15px 20px; z-index:10; display:none; }
#info-panel h2 { margin:0 0 8px 0; font-size:var(--text-xl); color:#FFD700; }
#info-panel .close-btn { position:absolute; top:10px; right:15px; cursor:pointer; color:#888; font-size:var(--text-2xl); }
#info-panel .close-btn:hover { color:#FFF; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.info-members { max-height:120px; overflow-y:auto; }
.info-member { padding:2px 0; font-size:var(--text-sm); border-bottom:1px solid rgba(255,255,255,0.05); }
.info-member .status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; }
.info-bridges { margin-top:10px; }
.bridge-item { display:inline-block; padding:2px 8px; margin:2px; border-radius:10px; font-size:var(--text-xs); cursor:pointer; border:1px solid; opacity:0.8; }
.bridge-item:hover { opacity:1; }

/* Node detail tooltip */
#node-tooltip { position:absolute; background:rgba(0,0,0,0.95); border:1px solid rgba(192,192,192,0.4); border-radius:4px; padding:10px 14px; z-index:20; display:none; max-width:300px; pointer-events:none; }
#node-tooltip .tt-name { font-size:var(--text-lg); font-weight:700; margin-bottom:4px; }
#node-tooltip .tt-dynasty { font-size:var(--text-xs); opacity:0.7; }
#node-tooltip .tt-detail { font-size:var(--text-xs); color:#AAA; margin-top:4px; }

/* Legend */
#legend { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.8); border:1px solid rgba(192,192,192,0.2); border-radius:4px; padding:8px 12px; z-index:10; font-size:var(--text-xs); }
#legend div { display:flex; align-items:center; gap:6px; margin:2px 0; }
#legend .line-sample { width:20px; height:2px; display:inline-block; }

/* Node detail strip */
#node-detail { position:absolute; bottom:0; left:0; right:0; max-height:28vh; overflow-y:auto; background:rgba(0,0,0,0.92); border-top:1px solid rgba(192,192,192,0.3); padding:10px 20px 10px 20px; z-index:10; display:none; }
#node-detail-inner { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.nd-name { font-size:var(--text-lg); font-weight:700; color:#FFD700; white-space:nowrap; }
.nd-dynasty { font-size:var(--text-xs); color:#888; white-space:nowrap; padding-top:3px; }
.nd-occ { font-size:var(--text-xs); color:#AAA; white-space:nowrap; padding-top:3px; }
.nd-connections { width:100%; margin-top:4px; }
.nd-conn-item { font-size:var(--text-xs); padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.nd-conn-type { color:#FFD700; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-right:4px; }
.nd-conn-person { color:#CCC; }
.nd-conn-evidence { color:#888; font-style:italic; }
.nd-dossier-btn { position:absolute; top:10px; right:40px; padding:4px 10px; background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.5); color:#FFD700; font-size:var(--text-xs); text-decoration:none; border-radius:3px; white-space:nowrap; }
.nd-dossier-btn:hover { background:rgba(255,215,0,0.3); }

/* Dynasty bridge detail */
.bridge-group { margin-bottom:8px; }
.bridge-conn { font-size:var(--text-2xs); color:#AAA; padding:1px 0 1px 10px; }
.bridge-type { color:#FFD700; font-weight:600; text-transform:uppercase; font-size:var(--text-2xs); margin-right:4px; }
.bridge-evidence { color:#777; font-style:italic; }
.info-section-label { font-size:var(--text-xs); color:#888; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,0.08); }

/* Mobile */
@media (max-width:768px) {
    #top-bar { padding:6px 10px; gap:8px; }
    #top-bar h1 { font-size:var(--text-lg); }
    #search-box { width:120px; font-size:var(--text-sm); }
    .filter-bar { top:42px; }
    .dynasty-chip { font-size:var(--text-2xs); padding:2px 6px; }
    .dynasty-label { font-size:var(--text-xs); }
    .info-grid { grid-template-columns:1fr; }
}