/* Battle Barge — Campaigns screen styling
   ================================================================
   The legacy /hh and /tow apps shipped these classes inside their
   own CSS bundles (mission-builder.css for HH, campaigns.css for
   TOW). The unified BB shell doesn't load those, so without these
   rules the campaigns list renders as crowded stacked text.
   Universe-agnostic — both HH and TOW screens emit the same
   nc-* class names.
   ================================================================ */

/* Section label above card groups (PENDING INVITES / YOUR CAMPAIGNS) */
.nc-section-label {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-text-secondary);
    margin: var(--bb-space-4) 0 var(--bb-space-2);
    padding-bottom: var(--bb-space-1);
    border-bottom: 1px solid var(--bb-border);
}
.nc-section-label:first-child { margin-top: 0; }

/* Header row: + CREATE CAMPAIGN / JOIN BY CODE */
.nc-header-row {
    display: flex;
    gap: var(--bb-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--bb-space-3);
}

/* Campaign card — one per row, real breathing room. The legacy bundle
   used a 2px tight margin which read as crowded — bumping to space-3
   with elevated background + soft shadow makes each item feel like a
   distinct entry rather than a stacked list. */
.nc-card {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    padding: var(--bb-space-4);
    margin-bottom: var(--bb-space-3);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: border-color var(--bb-transition-fast),
                box-shadow var(--bb-transition-fast),
                transform var(--bb-transition-fast);
}

.nc-card:hover,
.nc-card:focus-visible {
    border-color: var(--bb-accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    outline: none;
}

/* Header row inside the card — name on the left, status badge on the right. */
.nc-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bb-space-3);
}

.nc-card-name {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-base);
    font-weight: 700;
    color: var(--bb-text-primary);
    letter-spacing: 0.02em;
}

.nc-card-meta {
    font-size: var(--bb-text-sm);
    color: var(--bb-text-secondary);
    line-height: 1.4;
}

.nc-card-desc {
    font-size: var(--bb-text-sm);
    color: var(--bb-text-muted);
    line-height: 1.45;
}

.nc-card-actions {
    display: flex;
    gap: var(--bb-space-2);
    flex-wrap: wrap;
    margin-top: var(--bb-space-1);
}

/* Pending-invite cards stand out from regular ones with a subtle
   accent on the left edge. */
.nc-invite-card {
    border-left: 3px solid var(--bb-accent-primary);
}

/* Status badge */
.nc-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--bb-radius-sm);
    font-family: var(--bb-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.nc-status-badge.nc-active,
.nc-active { background: rgba(76, 175, 80, 0.18); color: #7fc683; }
.nc-status-badge.nc-draft,
.nc-draft { background: rgba(180, 180, 180, 0.15); color: var(--bb-text-secondary); }
.nc-status-badge.nc-completed,
.nc-completed { background: rgba(99, 132, 255, 0.18); color: #8fa2e0; }
.nc-status-badge.nc-cancelled,
.nc-cancelled { background: rgba(220, 80, 80, 0.18); color: #d88a8a; }

/* Empty state inside the campaigns list — softer than the missions one
   so it doesn't dominate when the user has no campaigns yet. */
.nc-card + .empty-state,
.nc-section-label + .empty-state {
    margin-top: var(--bb-space-2);
}

/* Detail view header row — title + status + back button. */
.campaign-detail-header {
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--bb-space-2);
}
.campaign-detail-name {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    color: var(--bb-text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
}
.campaign-detail-desc {
    margin: 0 0 var(--bb-space-3);
}
.campaign-detail-meta {
    display: flex;
    gap: var(--bb-space-3);
    flex-wrap: wrap;
    font-size: var(--bb-text-sm);
    color: var(--bb-text-muted);
    margin-bottom: var(--bb-space-3);
}

.campaign-detail-section {
    margin-top: var(--bb-space-4);
    padding-top: var(--bb-space-3);
    border-top: 1px solid var(--bb-border);
}
.campaign-detail-section h3 {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-secondary);
    margin: 0 0 var(--bb-space-2);
}

/* Map canvas wrapper */
.campaign-map-wrap {
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-2);
    margin-bottom: var(--bb-space-2);
}
.campaign-map-canvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    border-radius: var(--bb-radius-sm);
}

/* Territory info panel (under the map) */
.territory-info-panel {
    padding: var(--bb-space-3);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
}
.territory-info-panel.hidden { display: none; }
.territory-info { display: flex; flex-direction: column; gap: var(--bb-space-1); }
.territory-name { font-size: var(--bb-text-base); color: var(--bb-text-primary); }
.territory-type {
    font-family: var(--bb-font-display);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-accent-primary);
}
.territory-control {
    font-size: var(--bb-text-sm);
    color: var(--bb-text-secondary);
}

/* Influence row in the territory info panel — mirrors the on-map pips
   so the panel and node visually reinforce each other. Filled pips use
   the accent color; empty pips show the track. */
.territory-value-row {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2);
    margin-top: var(--bb-space-1);
}
.territory-value-label {
    font-family: var(--bb-font-display);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-muted);
}
.territory-pips {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.territory-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--bb-border);
    transition: background var(--bb-transition-fast);
}
.territory-pip.is-on {
    background: var(--bb-accent-primary);
    border-color: var(--bb-accent-primary);
    box-shadow: 0 0 6px var(--bb-accent-primary);
}

.territory-desc { font-size: var(--bb-text-sm); margin: var(--bb-space-1) 0 0; }

/* Allegiance picker (HH only) */
.nc-allegiance-row {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2);
    flex-wrap: wrap;
}

/* Campaign battle list cards — match the visual weight of nc-card but
   without the hover lift since they aren't navigation. */
.nc-battle-card {
    padding: var(--bb-space-3);
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
}
.nc-battle-players { font-weight: 600; color: var(--bb-text-primary); }
.nc-battle-territory {
    font-family: var(--bb-font-display);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-accent-primary);
}
.nc-battle-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--bb-radius-sm);
    font-family: var(--bb-font-display);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--bb-bg-base);
    color: var(--bb-text-muted);
}
.nc-battle-status-completed { color: #7fc683; }
.nc-battle-status-active { color: #d4af37; }

/* War Diary entries */
.war-diary {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
}
.diary-entry {
    display: flex;
    gap: var(--bb-space-2);
    padding: var(--bb-space-2) var(--bb-space-3);
    background: var(--bb-bg-surface);
    border-left: 2px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
}
.diary-icon { font-size: 1rem; line-height: 1.2; }
.diary-body { flex: 1; min-width: 0; }
.diary-header {
    display: flex;
    justify-content: space-between;
    gap: var(--bb-space-2);
    font-size: var(--bb-text-xs);
    color: var(--bb-text-muted);
    margin-bottom: 2px;
}
.diary-content {
    margin: 0;
    font-size: var(--bb-text-sm);
    color: var(--bb-text-secondary);
    line-height: 1.45;
}