/* ==========================================================================
   Button Components - War 2050
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-primary-900);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    color: var(--color-primary-900);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: transparent;
    color: var(--color-neutral-100);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--color-accent-gold);
    color: var(--color-accent-gold);
}

.btn-ghost {
    background: transparent;
    color: var(--color-neutral-300);
    padding: var(--space-2) var(--space-4);
}

.btn-ghost:hover {
    color: var(--color-neutral-100);
}

.btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

.btn-glow {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.btn-glow:hover {
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
}

/* Button ripple effect */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: all var(--transition-slow);
}

.btn:active::after {
    transform: scale(2);
    opacity: 1;
    transition: 0s;
}

.btn-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* ==========================================================================
   Card Components
   ========================================================================== */

.card {
    padding: var(--space-6);
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.card:hover {
    border-color: var(--border-color-hover);
    transform: translateY(-4px);
}

/* ==========================================================================
   Badge Components
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.badge-gold {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
}

.badge-cyan {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid var(--color-accent-cyan);
    color: var(--color-accent-cyan);
}

.badge-green {
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid var(--color-accent-green);
    color: var(--color-accent-green);
}

.badge-red {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid var(--color-accent-red);
    color: var(--color-accent-red);
}

/* ==========================================================================
   Form Components
   ========================================================================== */

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-300);
    margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--color-neutral-100);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-helper {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--font-size-sm);
    color: var(--color-accent-red);
    margin-top: var(--space-1);
}

/* ==========================================================================
   Icon Components
   ========================================================================== */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.icon-sm { font-size: var(--font-size-sm); }
.icon-md { font-size: var(--font-size-base); }
.icon-lg { font-size: var(--font-size-xl); }
.icon-xl { font-size: var(--font-size-3xl); }

/* ==========================================================================
   Divider Components
   ========================================================================== */

.divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-8) 0;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--border-color);
    margin: 0 var(--space-4);
}

.divider-gold {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-accent-gold) 50%,
        transparent 100%
    );
}

/* ==========================================================================
   Loading Components
   ========================================================================== */

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-accent-gold);
    border-radius: 50%;
    animation: rotate 0.8s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; }
.spinner-lg { width: 32px; height: 32px; }

/* ==========================================================================
   Tooltip (basic)
   ========================================================================== */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary-800);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-100);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: var(--z-tooltip);
}

[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* ==========================================================================
   User Dropdown Components
   ========================================================================== */

.user-dropdown {
    position: relative;
}

.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.user-dropdown-trigger:hover {
    border-color: var(--color-accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-accent-gold);
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.user-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-100);
}

.user-rank {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Rank insignia
   ==========================================================================

   The <symbol>s live in frontend/assets/ranks/insignia.js, which injects them
   into the page; everything here just sizes and tints a <use> of one. Each
   path inside a symbol is painted with `currentColor`, so setting `color` is
   the whole styling API — one .rank-<code> rule below drives the insignia, the
   chip border and the label together.
   ========================================================================== */

.rank-insignia {
    display: block;
    width: 1em;
    height: 1em;
    color: inherit;
    overflow: visible;
}

.rank-insignia-badge {
    width: 64px;
    height: 64px;
    /* Emissive, in the same register as the gold glow elsewhere on the page.
       Kept off the 20px chips, where a blur this size is just mud. */
    filter: drop-shadow(0 0 10px currentColor);
    opacity: 0.96;
}

/* Rank colors — one per rung, matching RankType.color in
   backend/src/seeds/seedRankTypes.js. One palette accent per grade family:
   steel for enlisted, cyan for warrant, green for company grade, orange for
   field grade, and gold ("Tactical Gold - Rank, Achievement, Victory", see
   variables.css) reserved for the generals.

   These also colour the logged-in user chip, which builds its class from the
   rank name via RankInsignia.slug() in auth.js — hence codes with underscores
   rather than the five bare names this block used to hold.

   The bottom rung is the only one that ever failed: #6b7280 measured 3.9:1
   on #0a0f1a, and it is the rank every new player sees. #808b9c is 5.5:1 and
   is still the dimmest step on the ladder by a clear margin — Corporal above
   it is 6.3:1 — so the ramp from steel to gold survives intact. Nothing else
   in the sixteen needed touching; the next-worst is Warrant Officer at 5.2:1.
   (backend/src/seeds/seedRankTypes.js still holds #6b7280 for this rung. The
   seed value is not rendered anywhere this file is loaded, but the two are
   documented as matching, so they are now one rung apart.) */
.rank-private               { color: #808b9c; }
.rank-corporal              { color: #8b95a5; }
.rank-sergeant              { color: #aab4c2; }
.rank-staff_sergeant        { color: #c3ccd8; }
.rank-sergeant_major        { color: #dbe3ec; }
.rank-warrant_officer       { color: #0891b2; }
.rank-chief_warrant_officer { color: #22d3ee; }
.rank-lieutenant            { color: #10b981; }
.rank-captain               { color: #34d399; }
.rank-major                 { color: #ea580c; }
.rank-colonel               { color: #fb923c; }
.rank-brigadier_general     { color: #b8960c; }
.rank-major_general         { color: #d4af37; }
.rank-lieutenant_general    { color: #e8c34a; }
.rank-general               { color: #f4d03f; }
.rank-general_of_the_army   { color: #fff3c4; }

.dropdown-arrow {
    color: var(--color-neutral-400);
    transition: transform var(--transition-fast);
}

.user-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 200px;
    background: var(--color-primary-800);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}

.user-dropdown.active .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-300);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-neutral-100);
}

.dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.dropdown-item:hover svg {
    opacity: 1;
}

/* The primary way back into the game — this is the whole point of the menu
   for a signed-in player, so it should not look like a peer of Logout. */
.dropdown-item-primary {
    color: var(--color-accent-gold, #d4af37);
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0.5px;
}

.dropdown-item-primary svg {
    opacity: 1;
}

.dropdown-item-primary:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--color-accent-gold-light, #f4d03f);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-2) 0;
}

/* Was --color-accent-red (#dc2626), which is 3.9:1 on the #0a0f1a the nav
   drawer and the user dropdown are both painted with — the audit reported
   this one at 3.97:1 and it is real, not a gradient artefact. Red-400 is
   6.9:1 and still unmistakably the destructive action in the menu. */
.logout-btn {
    color: #f87171 !important;
}

.logout-btn:hover {
    background: rgba(220, 38, 38, 0.1) !important;
}

/* Mobile user info in hamburger menu */
.mobile-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-3);
}

.mobile-user-info .user-name {
    font-size: var(--font-size-lg);
}

.mobile-user-info .user-rank {
    font-size: var(--font-size-sm);
}

/* Form input error state */
.form-input.error {
    border-color: var(--color-accent-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Button block style */
.btn-block {
    width: 100%;
}

/* --- Icons, not emoji ---------------------------------------------------
   The feature cards and the auth form used platform emoji as functional
   icons. Emoji cannot be tinted to the palette, render as a different picture
   on every operating system, and carry rounded consumer forms against an
   Orbitron military display face — on the page whose job is to sell bespoke
   3D art. The castle rendered pink, and was the only pink on the site.

   The replacements are stroked and monochrome at one weight, which is the
   same system as the game's own action-bar icons — an icon set that was
   already built and paid for. `currentColor` means they inherit whatever the
   card around them is already doing. */
.feature-svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-accent-gold);
}

.field-svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-text-muted);
}

/* The honest replacement for the testimonial grid. */
.community-note {
    max-width: 52ch;
    margin: 0 auto;
    text-align: left;
}

.community-note p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}