/* Battle Barge — Shared Components
   ================================================================
   Reusable primitives: buttons, cards, modals, toasts, form fields.
   All styling flows from --bb-* tokens — a universe switch re-themes
   every instance on the page without per-component overrides.
   ================================================================ */

/* The [hidden] attribute must always win — class-based display
   declarations on positioned elements (e.g. .bb-modal-backdrop with
   display:flex) would otherwise override it via specificity and
   render hidden modals visible on page load. */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-2);
    min-height: var(--bb-touch-min);
    padding: 0 var(--bb-space-4);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    color: var(--bb-text-primary);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
}
.bb-btn:hover,
.bb-btn:focus-visible {
    border-color: var(--bb-accent-primary);
    outline: none;
}
.bb-btn:disabled,
.bb-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bb-btn-primary {
    background: var(--bb-accent-primary);
    border-color: var(--bb-accent-primary);
    color: var(--bb-bg-base);
}
.bb-btn-primary:hover,
.bb-btn-primary:focus-visible {
    filter: brightness(1.1);
    border-color: var(--bb-accent-primary);
}

.bb-btn-secondary {
    /* This is the default shape — alias kept for call-site clarity. */
    background: var(--bb-bg-elevated);
    color: var(--bb-text-primary);
}

.bb-btn-danger {
    background: var(--bb-accent-danger);
    border-color: var(--bb-accent-danger);
    color: #fff;
}
.bb-btn-danger:hover,
.bb-btn-danger:focus-visible {
    filter: brightness(1.1);
}

.bb-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--bb-text-secondary);
}
.bb-btn-ghost:hover,
.bb-btn-ghost:focus-visible {
    color: var(--bb-text-primary);
    background: var(--bb-bg-elevated);
}

.bb-btn-sm {
    min-height: 36px;
    padding: 0 var(--bb-space-3);
    font-size: var(--bb-text-xs);
}

.bb-btn-block {
    width: 100%;
}

/* ----------------------------------------------------------------
   Legacy button aliases — .btn family
   ----------------------------------------------------------------
   Per-universe CSS (static/hh/css/, static/tow/css/) is not loaded by
   the unified shell. Templates under static/bb/templates/ and a number
   of shared screens emit legacy class names (.btn, .btn-primary,
   .btn-ghost, .btn-small, .btn-large, .btn-danger, .btn-secondary).
   Without these aliases every CTA in the unified shell renders as a
   default browser button. The aliases reuse the existing --bb-* token
   styling so a future rename of every call-site to .bb-btn-* lands
   without visual drift. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-2);
    min-height: var(--bb-touch-min);
    padding: 0 var(--bb-space-4);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    color: var(--bb-text-primary);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
    transition: border-color var(--bb-transition-fast), background var(--bb-transition-fast), filter var(--bb-transition-fast);
}
.btn:hover,
.btn:focus-visible {
    border-color: var(--bb-accent-primary);
    outline: none;
}
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-primary {
    background: var(--bb-accent-primary);
    border-color: var(--bb-accent-primary);
    color: var(--bb-bg-base);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    filter: brightness(1.1);
    border-color: var(--bb-accent-primary);
}
.btn-secondary {
    background: var(--bb-bg-elevated);
    color: var(--bb-text-primary);
}
.btn-danger {
    background: var(--bb-accent-danger);
    border-color: var(--bb-accent-danger);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus-visible {
    filter: brightness(1.1);
}
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--bb-text-secondary);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    color: var(--bb-text-primary);
    background: var(--bb-bg-elevated);
}
.btn-small,
.btn-sm {
    min-height: 36px;
    padding: 0 var(--bb-space-3);
    font-size: var(--bb-text-xs);
}
.btn-large,
.btn-lg {
    min-height: 52px;
    padding: 0 var(--bb-space-6);
    font-size: var(--bb-text-base);
}
.btn-block {
    width: 100%;
}

/* ----------------------------------------------------------------
   Subscription tier badges
   ----------------------------------------------------------------
   Render every tier with a distinct visual register. Used by Settings
   and Profile screens — set `data-tier="<tier-id>"` on the same span
   that has `.tier-badge` for the per-tier background/color to apply.
   Identifiers use each universe's tier vocabulary:
     HH:  legionary  (free) | captain  (paid) | praetor (top)
     TOW: militia    (free) | knight   (paid) | general (top)
   Without per-tier styling every plan rendered a generic gold pill,
   which silently buried the visual upgrade-path the user just paid
   for. */
.tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--bb-radius-sm);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--bb-bg-elevated);
    color: var(--bb-text-secondary);
    border: 1px solid var(--bb-border);
}

/* Free tiers — steel-gray pill, deliberately understated. */
.tier-badge[data-tier="legionary"],
.tier-badge[data-tier="militia"],
.tier-badge[data-tier="free"] {
    background: var(--bb-bg-elevated);
    color: var(--bb-text-secondary);
    border-color: var(--bb-border);
}

/* Mid-paid tier — primary gold accent. */
.tier-badge[data-tier="captain"],
.tier-badge[data-tier="knight"],
.tier-badge[data-tier="premium"] {
    background: var(--bb-accent-primary);
    color: var(--bb-bg-base);
    border-color: var(--bb-accent-primary);
}

/* Top-paid tier — imperial deep gold + bordered for prestige feel. */
.tier-badge[data-tier="praetor"],
.tier-badge[data-tier="general"],
.tier-badge[data-tier="elite"] {
    background: linear-gradient(135deg, #d6b27a 0%, #a87c3c 100%);
    color: #1c1208;
    border-color: #d6b27a;
    box-shadow: 0 0 0 1px rgba(214, 178, 122, 0.35);
}

.tier-badge-sm {
    font-size: 0.65rem;
    padding: 1px 6px;
}

/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */
.bb-card {
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-4);
    box-shadow: var(--bb-shadow-sm);
}

.bb-card-title {
    margin: 0 0 var(--bb-space-2);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    color: var(--bb-text-primary);
    letter-spacing: 0.04em;
}

.bb-card-body {
    color: var(--bb-text-secondary);
    font-size: var(--bb-text-base);
    line-height: 1.5;
}

.bb-card-interactive {
    cursor: pointer;
    transition: border-color var(--bb-transition-fast),
                box-shadow   var(--bb-transition-fast);
}
.bb-card-interactive:hover,
.bb-card-interactive:focus-visible {
    border-color: var(--bb-accent-primary);
    box-shadow: var(--bb-shadow-md);
    outline: none;
}

/* ----------------------------------------------------------------
   Generic section wrapper — alias for `.bb-card` so legacy templates
   using `<section class="section">` get card styling for free instead
   of rendering as bare text on the page background.
   Per-screen rules can opt out by overriding background to transparent.
   ---------------------------------------------------------------- */
.section {
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-4);
    margin-bottom: var(--bb-space-4);
    box-shadow: var(--bb-shadow-sm);
}

.section-title {
    margin: 0 0 var(--bb-space-3);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    color: var(--bb-text-primary);
    letter-spacing: 0.04em;
}

/* Vertical-flow utility for stacking sibling elements with a consistent
   gap — used to space bare elements that would otherwise kiss against
   the page background (e.g. TOW battle screen rows). */
.bb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-4);
}
.bb-stack-tight { gap: var(--bb-space-2); }
.bb-stack-loose { gap: var(--bb-space-6); }

/* ----------------------------------------------------------------
   List-summary cards — `.roster-card` and `.campaign-card` are
   emitted by per-universe screen modules (rosters list, escalation
   campaigns list, narrative campaigns list). They share an identical
   structure: header (name + secondary tag), meta row, optional desc.
   Without these rules they rendered as bare divs of unstyled text.
   ---------------------------------------------------------------- */
#roster-list,
#campaign-list,
#campaign-list-view,
.campaign-list {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-3);
}

.roster-card,
.campaign-card {
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-3) var(--bb-space-4);
    box-shadow: var(--bb-shadow-sm);
    cursor: pointer;
    transition: border-color var(--bb-transition-fast),
                transform var(--bb-transition-fast),
                box-shadow var(--bb-transition-fast);
}
.roster-card:hover,
.roster-card:focus-visible,
.campaign-card:hover,
.campaign-card:focus-visible {
    border-color: var(--bb-accent-primary);
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-md);
    outline: none;
}

.roster-card-header,
.campaign-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bb-space-3);
    margin-bottom: var(--bb-space-2);
}

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

.roster-card-faction,
.campaign-card-status {
    color: var(--bb-text-secondary);
    font-size: var(--bb-text-sm);
}

.roster-card-meta,
.campaign-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-3);
    color: var(--bb-text-muted);
    font-size: var(--bb-text-sm);
}

.campaign-card-desc {
    margin: var(--bb-space-2) 0 0;
    font-size: var(--bb-text-sm);
    line-height: 1.4;
}

.campaign-empty {
    padding: var(--bb-space-6);
    text-align: center;
}

/* ----------------------------------------------------------------
   Modals
   ---------------------------------------------------------------- */
.bb-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bb-space-4);
}

.bb-modal {
    width: 100%;
    max-width: 28rem;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-lg);
}

.bb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-3);
    padding: var(--bb-space-4);
    border-bottom: 1px solid var(--bb-border);
}
.bb-modal-title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xl);
    font-weight: 700;
    color: var(--bb-text-primary);
    letter-spacing: 0.04em;
}

.bb-modal-body {
    padding: var(--bb-space-4);
    color: var(--bb-text-primary);
    font-size: var(--bb-text-base);
    line-height: 1.5;
}

.bb-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--bb-space-2);
    padding: var(--bb-space-4);
    border-top: 1px solid var(--bb-border);
}

/* ----------------------------------------------------------------
   Toasts — stackable, top-right by default.
   ---------------------------------------------------------------- */
.bb-toast-stack {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px) + var(--bb-space-3));
    right: var(--bb-space-3);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    max-width: min(90vw, 24rem);
    pointer-events: none;
}
.bb-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    padding: var(--bb-space-3) var(--bb-space-4);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-accent-primary);
    border-radius: var(--bb-radius-md);
    box-shadow: var(--bb-shadow-md);
    color: var(--bb-text-primary);
    font-size: var(--bb-text-sm);
}
.bb-toast-success { border-left-color: var(--bb-accent-success); }
.bb-toast-danger  { border-left-color: var(--bb-accent-danger);  }
.bb-toast-warning { border-left-color: var(--bb-accent-warning); }

/* ----------------------------------------------------------------
   Form fields
   ---------------------------------------------------------------- */
.bb-field {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-3);
}
.bb-label {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-secondary);
}

.bb-input,
.bb-select,
.bb-textarea {
    min-height: var(--bb-touch-min);
    padding: var(--bb-space-2) var(--bb-space-3);
    background: var(--bb-bg-input);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    color: var(--bb-text-primary);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-base);
    width: 100%;
}
.bb-input::placeholder,
.bb-textarea::placeholder {
    color: var(--bb-text-muted);
}
.bb-input:focus,
.bb-select:focus,
.bb-textarea:focus {
    outline: none;
    border-color: var(--bb-border-focus);
    box-shadow: 0 0 0 1px var(--bb-border-focus);
}
.bb-textarea {
    resize: vertical;
    min-height: calc(var(--bb-touch-min) * 2);
}

/* Checkbox — styled wrapper so native control stays accessible. */
.bb-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-2);
    min-height: var(--bb-touch-min);
    color: var(--bb-text-primary);
    font-size: var(--bb-text-sm);
    cursor: pointer;
}
.bb-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bb-accent-primary);
    cursor: pointer;
}

/* ----------------------------------------------------------------
   Focus ring — unified across any focusable shell surface.
   Uses outline, not box-shadow, so it stacks over transitions.
   ---------------------------------------------------------------- */
.bb-btn:focus-visible,
.bb-tab:focus-visible,
.bb-sub-nav-pill:focus-visible,
.bb-more-item:focus-visible,
.bb-icon-btn:focus-visible,
.bb-universe-pill:focus-visible,
.bb-hub-half:focus-visible {
    outline: 2px solid var(--bb-accent-primary);
    outline-offset: 2px;
}