/* Campaign Content Layout */
.campaign-content {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.campaign-nav {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.campaign-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #ded0b7;
    border-radius: 8px;
    background: #151f25;
    color: #ded0b7;
    text-align: left;
    transition: all 0.2s;
}

.campaign-nav-btn:hover {
    background: #ded0b7;
    color: #151f25;
}

.campaign-nav-btn.active {
    background: #ded0b7;
    color: #151f25;
    font-weight: bold;
}

.campaign-tab-content {
    flex: 1;
}

.campaign-tab {
    display: none;
}

.campaign-tab.active {
    display: block;
}

.content-card {
    background: #151f25;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    border: 1px solid #ded0b7;
    color: #ded0b7;
}

/* Grids */
.key-locations-grid,
.npcs-grid,
.factions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.key-location-card,
.npc-card,
.faction-card {
    background: #151f25;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #ded0b7;
    color: #ded0b7;
}

/* Quest Timeline */
.quests-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quest-card {
    background: #151f25;
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
    margin-left: 2rem;
    border: 1px solid #ded0b7;
    color: #ded0b7;
}

/*.quest-card::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    background: #ded0b7;
    border-radius: 50%;
}*/

.quest-giver {
    color: #ded0b7;
    opacity: 0.8;
    font-style: italic;
    margin: 0.5rem 0;
}

/* Headers within cards */
.content-card h2,
.content-card h3,
.content-card h4,
.content-card h5 {
    color: #ded0b7;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .campaign-content {
        flex-direction: column;
    }

    .campaign-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .campaign-nav-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .quest-card {
        margin-left: 0;
    }

    .quest-card::before {
        display: none;
    }
}


/* Encounters Section */
.encounter-card {
    background: #151f25;
    border: 1px solid #ded0b7;
    border-radius: 8px;
    padding: 1.5rem;
}

.difficulty-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.bg-easy { background-color: #4caf50; }
.bg-medium { background-color: #ff9800; }
.bg-hard { background-color: #f44336; }
.bg-deadly { background-color: #9c27b0; }

/* Magic Items Section */
.magic-items-grid {
    display: grid;
    gap: 1.5rem;
}

.magic-item-card {
    background: #151f25;
    border: 1px solid #ded0b7;
    border-radius: 8px;
    padding: 1.5rem;
}

.rarity-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.bg-common { background-color: #78909c; }
.bg-uncommon { background-color: #4caf50; }
.bg-rare { background-color: #2196f3; }
.bg-very { background-color: #9c27b0; }
.bg-legendary { background-color: #ff9800; }

/* Downtime Activities Section */
.activity-card {
    background: #151f25;
    border: 1px solid #ded0b7;
    border-radius: 8px;
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .magic-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Campaign Navigation Styles */
.campaign-nav {
    display: flex;
    gap: 0.5rem;
}

/* On mobile, stack the buttons vertically */
@media (max-width: 767.98px) {
    .campaign-nav {
        flex-direction: column;
    }

    .campaign-nav-btn {
        width: 100%;
        text-align: left;
    }
}

/* Style the navbar toggler */
.navbar-toggler {
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
}

.navbar-toggler .bi-list {
    font-size: 1.5rem;
}

#campaign-nav-hamburger {
    color: #f6e6c9;
    background-color: #151f25;
}

.side-menu {
    display: block;
}

.create-campaign-char-card{
    background: #151f25;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #ded0b7;
    color: #ded0b7;
}

.character-card{
    max-height: 30rem;
}

.btn-close-dnd{
    background-color: #151f25;
    color: #e7bf8f;
    margin-top: 10px;
    border-radius: 25px;
    border: 1px solid #e7bf8f;
    text-transform: uppercase;
}