/* Styles/panels.css */

/* --- The new shared panel style --- */
.panel-frame {
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}


/* --- Right Panel Header --- */
#right-panel-header {
    padding: 10px;
    border-bottom: 1px solid #30363d;
    background: #161b22;
}

#right-panel-header .header-title-block {
    text-align: right;
    padding-right: 10px;
}

#right-panel-header h2 {
    margin: 0;
    color: #58a6ff;
    font-size: 1.4em;
}

#right-panel-header h3 {
    margin: 0;
    font-size: 0.9em;
    color: #8b949e;
}

.mini-map-container {
    margin-top: 10px;
    border: 1px solid #30363d;
    border-radius: 4px;
    overflow: hidden; /* Ensures canvas respects border radius */
}

#systemCanvas {
    width: 100%;
    height: auto;
    display: block; /* Removes any bottom margin/space */
}

#right-tab-bar {
    display: flex;
    margin-top: 10px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
}

#right-panel .tab-btn, #side-panel .tab-btn { /* Handle both old and new ID */
    flex: 1;
    background: transparent;
    border: none;
    color: #8b949e;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s;
}

#right-panel .tab-btn:hover, #side-panel .tab-btn:hover {
    background: rgba(255,255,255,0.03);
}

#right-panel .tab-btn.active, #side-panel .tab-btn.active {
    background: #30363d;
    color: #c9d1d9;
}

/* --- Panel Content Area (shared) --- */
#panel-content-area {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1; /* Makes it fill remaining space */
}

.data-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
}

.back-btn {
    background: #30363d;
    padding: 5px 10px;
    font-size: 0.8em;
    border-radius: 4px;
}
.back-btn:hover { background: #484f58; }

.celestial-list-container {
    margin-top: 10px;
}
.celestial-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid #30363d;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.celestial-item:hover { background: rgba(255,255,255,0.07); }
.celestial-header { display: flex; justify-content: space-between; align-items: baseline; }
.celestial-name { font-weight: bold; color: #c9d1d9; font-size: 1.05em; }
.celestial-type { font-size: 0.8em; text-transform: capitalize; }
.celestial-desc { font-size: 0.9em; color: #8b949e; margin-top: 4px; }
.homeworld-badge {
    background: #0d1117;
    border: 1px solid #e2b93d;
    color: #e2b93d;
    padding: 2px 6px;
    font-size: 0.7em;
    border-radius: 10px;
    font-weight: bold;
}
.regime-tag {
    display: inline-block;
    background: #1f601f;
    color: #a6ffb3;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

.tag {
    padding: 3px 8px;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 4px;
}

.tree-list { margin-top: 10px; }
.tree-node { border-left: 2px solid #30363d; margin-bottom: 5px; }
.tree-header { 
    display: flex; 
    justify-content: space-between; 
    padding: 5px; 
    cursor: pointer; 
    background: rgba(255,255,255,0.03);
}
.tree-header:hover { background: rgba(255,255,255,0.05); }
.tree-title { display: flex; align-items: center; gap: 8px; font-weight: bold; }
.tree-caret { transition: transform 0.2s; display: inline-block; }
.tree-content { padding-left: 10px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.tree-item { 
    display: flex; 
    justify-content: space-between; 
    font-size: 0.9em;
    padding: 4px 8px;
    border-bottom: 1px solid #1c2128;
}
.tree-node.open > .tree-header > .tree-title > .tree-caret { transform: rotate(90deg); }
.tree-node.open > .tree-content { max-height: 500px; /* Arbitrary large number */ }