/* 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;
    min-width: 0;
}

.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;
}

.generated-text {
    color: #ded0b7;
    display: grid;
    gap: 0.85rem;
}

.generated-text p {
    margin: 0;
    overflow-wrap: anywhere;
}

.generated-text-heading {
    color: #e9be8b;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
    letter-spacing: 0.06rem;
    margin: 0.85rem 0 0;
    text-transform: uppercase;
}

.generated-text-heading:first-child {
    margin-top: 0;
}

.generated-text-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.35rem;
}

.generated-text-list li {
    overflow-wrap: anywhere;
}

.campaign-generation-pending {
    align-items: center;
    color: #ded0b7;
    display: inline-flex;
    gap: 0.45rem;
}

/* 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 {
    align-items: baseline;
    color: #ded0b7;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    opacity: 0.8;
    font-style: italic;
    margin: 0.5rem 0;
}

.quest-giver-value,
.quest-giver .editable-field {
    display: inline-flex;
}

.quest-giver-link {
    color: #f2c080;
    text-decoration: none;
}

.quest-giver-link:hover {
    color: #f2c080;
    text-decoration: underline;
}

/* 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 {
    align-items: center;
    background: #33434b;
    color: #f7efe1;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.difficulty-badge--low {
    background: #2f5f4b;
}

.difficulty-badge--moderate {
    background: #7c6428;
}

.difficulty-badge--high {
    background: #7a3b3b;
}

.difficulty-badge--pending {
    background: #33434b;
}

.encounter-creature-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    margin-bottom: 1rem;
}

.encounter-generation-pending {
    align-items: center;
    background: #1e2d34;
    border: 1px dashed rgba(242, 192, 128, 0.45);
    border-radius: 8px;
    color: #ded0b6;
    display: flex;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
}

.encounter-creature-card {
    background: #1e2d34;
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 8px;
    color: #ded0b6;
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    text-decoration: none;
}

.encounter-creature-card:hover {
    background: #253943;
    color: #ded0b6;
}

.encounter-creature-card__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.encounter-creature-card strong {
    color: #e9be8b;
}

.encounter-creature-card small {
    color: #ded0b6;
    opacity: 0.75;
}

.encounter-creature-count {
    border: 1px solid rgba(242, 192, 128, 0.4);
    border-radius: 999px;
    color: #e9be8b;
    font-size: 0.8rem;
    padding: 0.12rem 0.5rem;
}

.encounter-treasure-links {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 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; }

/* Full module display */
.module-card {
    color: #ded0b6;
}

.module-card + .module-card {
    margin-top: 1.25rem;
}

.module-card h2,
.module-card h3,
.module-card h4,
.module-card h5 {
    color: #ded0b6;
}

.module-kicker,
.module-meta,
.module-party-note {
    color: #ded0b6;
}

.module-kicker {
    font-size: 0.78rem;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.module-kicker-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.module-heading-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.module-linked-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.module-linked-heading__title {
    min-width: 0;
}

.module-heading-link {
    align-items: center;
    background: #1e2d34;
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 8px;
    color: #ded0b6;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.9rem;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    text-decoration: none;
}

.module-heading-link:hover {
    background: #253943;
    color: #ded0b6;
}

.module-title-block {
    flex: 1 1 auto;
    min-width: 0;
}

.module-quick-tags,
.module-grid,
.module-scene-grid,
.module-two-col {
    display: grid;
    gap: 1rem;
}

.module-quick-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.module-tag {
    align-items: baseline;
    background: #1e2d34;
    border: 1px solid rgba(222, 208, 183, 0.45);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.28rem 0.65rem;
}

.module-tag > span,
.module-tag > strong {
    display: inline;
}

.module-tag strong {
    color: #ded0b6;
    font-size: 0.82rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.module-tag > span {
    color: #ded0b6;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.78;
    text-transform: uppercase;
}

.module-tag .module-editable-field,
.module-tag .module-editable-display,
.module-tag .display-content,
.module-act-level .module-editable-field,
.module-act-level .module-editable-display,
.module-act-level .display-content {
    background: transparent;
    border: 0;
    color: inherit;
    display: inline;
    margin: 0;
    padding: 0;
}

.module-level-range {
    align-items: baseline;
    display: inline-flex !important;
    gap: 0.25rem;
}

.module-grid {
    grid-template-columns: 1fr;
}

.module-scene-grid {
    grid-template-columns: 1fr;
}

.module-two-col {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.module-act,
.module-encounter {
    border-top: 1px solid rgba(222, 208, 183, 0.22);
    margin-top: 1.35rem;
    padding-top: 1.35rem;
}

.module-subcard {
    border-top: 1px solid rgba(222, 208, 183, 0.18);
    padding-top: 1rem;
}

.module-grid .module-subcard:first-child,
.module-scene-grid .module-subcard:first-child {
    border-top: 0;
    padding-top: 0;
}

.module-act-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.module-act-header > .module-act-level {
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 999px;
    color: #ded0b6;
    flex: 0 0 auto;
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
}

.module-text,
.module-text p,
.module-subcard p,
.module-card p,
.module-list li {
    color: #ded0b6;
    line-height: 1.55;
}

.module-read-aloud {
    background: #1e2d34;
    border-left: 3px solid #f2c080;
    color: #ded0b6;
    font-style: italic;
    margin: 0.75rem 0;
    padding: 0.85rem 1rem;
}

.module-list {
    color: #ded0b6;
    margin-bottom: 1rem;
}

.module-empty-state {
    color: #b6cbd0;
    margin: 0.75rem 0;
}

.module-editable-field {
    border-radius: 6px;
    min-width: 1.5rem;
}

.module-editable-field .display-content {
    color: inherit;
}

.module-editable-field .edit-content textarea,
.module-editable-field .edit-content input {
    background: #151f25;
    border: 1px solid rgba(242, 192, 128, 0.55);
    border-radius: 6px;
    color: #ded0b6;
    padding: 0.55rem 0.7rem;
    width: 100%;
}

.module-editable-field .edit-content input {
    min-width: 7rem;
}

.module-sheet-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    justify-content: start;
    margin-top: 0.75rem;
}

.module-sheet-card {
    align-items: stretch;
    align-self: start;
    background: #151f25;
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 8px;
    color: #ded0b6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
}

.module-sheet-card:hover {
    background: #253943;
    color: #ded0b6;
}

.module-sheet-card img {
    aspect-ratio: 4 / 3;
    background: #151f25;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    width: 100%;
}

.module-sheet-card span {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 1rem 1rem;
}

.module-sheet-card strong {
    color: #e9be8b;
    font-size: 1.05rem;
    line-height: 1.2;
}

.module-sheet-card small {
    color: #ded0b6;
    opacity: 0.75;
}

.module-sheet-card p {
    color: #ded0b6;
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0;
}

.module-sheet-card--disabled {
    cursor: default;
    opacity: 0.72;
}

.module-sheet-card--disabled:hover {
    background: #1e2d34;
}

.module-sheet-add-card {
    align-self: start;
    min-height: 0;
}

.campaign-free-paywall {
    grid-column: 1 / -1;
}

.module-generated-monsters {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.module-monster-link {
    align-items: center;
    background: #1e2d34;
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 8px;
    color: #ded0b6;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
}

.module-monster-link:hover {
    background: #253943;
    color: #ded0b6;
}

.module-monster-link small {
    color: #ded0b6;
    flex: 0 0 auto;
    opacity: 0.75;
}

.module-milestone {
    border-top: 1px solid rgba(222, 208, 183, 0.2);
    margin-top: 1rem;
    padding-top: 1rem;
}

.module-artifact-link,
.npc-sheet-link,
.magic-item-preview {
    align-items: center;
    background: #1e2d34;
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 8px;
    color: #ded0b6;
    display: inline-flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0.55rem 0.8rem;
    text-decoration: none;
}

.module-artifact-link:hover,
.npc-sheet-link:hover,
.magic-item-preview:hover {
    background: #253943;
    color: #ded0b6;
}

.npc-sheet-link--disabled,
.module-artifact-link--disabled,
.module-monster-link--disabled,
.magic-item-preview--disabled {
    cursor: default;
    opacity: 0.72;
}

.npc-sheet-link--disabled:hover,
.module-artifact-link--disabled:hover,
.module-monster-link--disabled:hover,
.magic-item-preview--disabled:hover {
    background: #1e2d34;
}

.campaign-artifact-pending {
    user-select: none;
}

.artifact-spinner {
    animation: artifact-spin 0.75s linear infinite;
    border: 2px solid rgba(242, 192, 128, 0.25);
    border-top-color: #f2c080;
    border-radius: 50%;
    display: inline-block;
    height: 0.9rem;
    margin-right: 0.25rem;
    vertical-align: -0.12rem;
    width: 0.9rem;
}

@keyframes artifact-spin {
    to {
        transform: rotate(360deg);
    }
}

.module-artifact-link--compact {
    margin: 0;
    white-space: nowrap;
}

.campaign-card-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.npc-sheet-link {
    width: fit-content;
}

.magic-item-preview {
    display: flex;
    margin-top: 0;
    width: 100%;
}

.magic-item-preview img {
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 0 0 72px;
    height: 72px;
    object-fit: cover;
    width: 72px;
}

.magic-item-preview span,
.magic-item-preview strong,
.magic-item-preview small {
    display: block;
}

.magic-item-preview small {
    color: #ded0b6;
    margin-top: 0.15rem;
    opacity: 0.75;
}

.campaign-add-card {
    align-content: start;
    background: #1e2d34;
    border: 1px dashed rgba(242, 192, 128, 0.65);
    border-radius: 8px;
    color: #f2c080;
    display: grid;
    gap: 0.75rem;
    min-height: 100%;
    padding: 1rem;
}

.campaign-add-card--wide {
    margin-top: 1rem;
}

.campaign-add-card-title {
    align-items: center;
    color: #f2c080;
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 700;
    gap: 0.5rem;
    text-transform: uppercase;
}

.campaign-add-card-title i {
    font-size: 1.35rem;
}

.campaign-add-card textarea,
.campaign-add-card input,
.campaign-add-card select {
    background: #151f25;
    border: 1px solid rgba(242, 192, 128, 0.45);
    border-radius: 6px;
    color: #ded0b7;
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.campaign-add-card textarea::placeholder,
.campaign-add-card input::placeholder {
    color: rgba(222, 208, 183, 0.65);
}

.campaign-add-card-button {
    align-items: center;
    background: #f2c080;
    border: 1px solid #f2c080;
    border-radius: 8px;
    color: #151f25;
    display: inline-flex;
    font-weight: 800;
    gap: 0.5rem;
    justify-content: center;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    text-transform: uppercase;
}

.campaign-add-card-button:hover {
    background: #e9be8b;
    border-color: #e9be8b;
}

.npc-sheet {
    margin-top: 2rem;
}

.npc-sheet h1 {
    color: #ded0b7;
    text-transform: uppercase;
}

.npc-sheet .module-meta a {
    color: #f2c080;
    text-decoration: none;
}

.npc-sheet .module-meta a:hover {
    color: #f2c080;
    text-decoration: underline;
}

.npc-sheet-notes {
    color: #f2c080;
    font-style: normal;
}

/* 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);
    }
}

@media (max-width: 768px) {
    .module-act-header {
        flex-direction: column;
    }
}

/* 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;
}

.container[data-item-id] {
    max-width: min(1400px, calc(100vw - 2rem));
}

#module {
    color: #ded0b6;
}

#module :where(.content-card, .module-card, p, li, small, span, strong, .display-content, .module-text, .module-read-aloud) {
    color: #ded0b6;
}

#module :where(.module-tag > span, .module-sheet-card small, .module-monster-link small, .magic-item-preview small) {
    opacity: 0.75;
}

.campaign-character-grid,
#campaign-character-grid {
    align-items: stretch;
}

.campaign-character-grid .character-card,
#campaign-character-grid .character-card {
    align-items: stretch;
    height: 100%;
    justify-content: flex-start;
    max-height: none;
    min-height: 0;
    width: 100%;
}

.campaign-character-grid .character-card > a,
#campaign-character-grid .character-card > a {
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.campaign-character-grid .character-image,
#campaign-character-grid .character-image {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.campaign-character-grid .character-card-text,
#campaign-character-grid .character-card-text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    width: 100%;
}

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

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

@media (max-width: 1199.98px) {
    .container[data-item-id] {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .campaign-content {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
    }

    .side-menu {
        margin-bottom: 0 !important;
        width: 100%;
    }

    .campaign-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0.75rem 0 0.25rem;
        width: 100%;
    }

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

    .campaign-tab-content {
        width: 100%;
    }

    .campaign-tab :where(table, .table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
}

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