/* ============================================================
   Content panels: Goals, Inventory, Rooms, Community,
   Achievements, Recipes
   ============================================================ */

/* ============================================================
   GOAL QUEUE
   ============================================================ */
.goal-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gap-xs);
    font-size: 0.85rem;
}
.goal-item:last-child { margin-bottom: 0; }
.goal-item.active {
    background: #f0f5ed;
    border-color: var(--color-primary-light);
}
.goal-type {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    width: 50px;
    flex-shrink: 0;
}
.goal-info {
    flex: 1;
    min-width: 0;
}
.goal-target {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goal-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: 3px;
    font-size: 0.75rem;
}
.goal-progress-wrap {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.goal-progress-wrap .progress-bar-container { flex: 1; }
.goal-pct {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.goal-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.goal-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--gap-lg);
    font-size: 0.85rem;
}
.goal-add-bar {
    display: flex;
    gap: var(--gap-sm);
    margin-top: var(--gap-sm);
}
.goal-add-bar select {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.82rem;
}

/* ============================================================
   INVENTORY
   ============================================================ */
.inventory-category {
    margin-bottom: var(--gap-sm);
}
.inventory-category:last-child { margin-bottom: 0; }
.inventory-items {
    max-height: 1000px;
}
.inventory-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: 3px 0;
    font-size: 0.85rem;
}
.inventory-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.inventory-name { flex: 1; }
.inventory-qty { font-weight: 700; color: var(--color-primary-dark); }
.inventory-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--gap-lg);
    font-size: 0.85rem;
}

/* ============================================================
   HOME / ROOMS
   ============================================================ */
.room-list { list-style: none; }
.room-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gap-xs);
    font-size: 0.85rem;
}
.room-item.built {
    background: #f0f5ed;
    border-color: var(--color-primary-light);
}
.room-icon { font-size: 1.2rem; flex-shrink: 0; }
.room-info { flex: 1; min-width: 0; }
.room-name { font-weight: 600; }
.room-level { font-size: 0.75rem; color: var(--color-text-muted); }
.room-reqs {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.room-req-met { color: var(--color-success); }
.room-req-unmet { color: var(--color-danger); }

/* ============================================================
   COMMUNITY / NPCs
   ============================================================ */
.npc-section-title {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: var(--gap-sm) 0 var(--gap-xs);
}
.npc-section-title:first-child { margin-top: 0; }
.npc-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gap-xs);
    font-size: 0.85rem;
}
.npc-avatar {
    font-size: 1.3rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.npc-info { flex: 1; min-width: 0; }
.npc-name { font-weight: 600; }
.npc-role { font-size: 0.75rem; color: var(--color-text-muted); }
.npc-relationship {
    width: 80px;
    flex-shrink: 0;
}
.community-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--gap-lg);
    font-size: 0.85rem;
    font-family: var(--font-narrative);
}
.community-stats {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: var(--gap-sm);
    text-align: center;
}

/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--gap-sm);
}
.achievement-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--gap-md);
    text-align: center;
    font-size: 0.8rem;
    transition: box-shadow var(--transition-normal);
}
.achievement-card.unlocked {
    background: #fdfaf2;
    border-color: var(--color-secondary-light);
    box-shadow: 0 1px 6px rgba(139, 105, 20, 0.12);
}
.achievement-card.locked {
    opacity: 0.5;
}
.achievement-card.hidden-locked {
    opacity: 0.35;
}
.achievement-icon {
    font-size: 1.6rem;
    margin-bottom: var(--gap-xs);
    color: var(--color-secondary);
}
.achievement-card.unlocked .achievement-icon {
    color: var(--color-primary);
}
.achievement-card.hidden-locked .achievement-icon {
    color: var(--color-text-muted);
}
.achievement-name {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 2px;
}
.achievement-desc {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.achievements-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--gap-lg);
    font-size: 0.85rem;
}

/* ============================================================
   RECIPES
   ============================================================ */
.recipe-category {
    margin-bottom: var(--gap-md);
}
.recipe-category:last-child { margin-bottom: 0; }
.recipe-cat-header {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--gap-xs);
    padding-bottom: var(--gap-xs);
    border-bottom: 1px solid var(--color-border-light);
}
.recipe-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gap-xs);
    font-size: 0.85rem;
}
.recipe-info { flex: 1; min-width: 0; }
.recipe-name { font-weight: 600; }
.recipe-ingredients {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}
.recipe-ing {
    background: var(--color-bg-dark);
    padding: 1px 6px;
    border-radius: 3px;
}
.recipe-ing.have { color: var(--color-success); }
.recipe-ing.need { color: var(--color-danger); }
.recipe-locked { opacity: 0.55; }
.recipe-lock-reason {
    font-size: 0.75rem;
    color: var(--color-warning, #b8860b);
    font-style: italic;
}
.req-hint {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-style: italic;
}
.recipes-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--gap-lg);
    font-size: 0.85rem;
}