/* ══════════════════════════════════════════════
   ALLIES & ENEMIES — v5.0
   ══════════════════════════════════════════════ */

/* ── Habits Tab Switcher ── */
.habits-tab-switcher {
    display: flex;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-1);
    width: 100%;
}

.habits-tab-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.02em;
}

.habits-tab-btn:hover:not(.habits-tab-active) {
    color: var(--text);
    background: rgba(255,255,255,0.03);
}

.habits-tab-btn.habits-tab-active[id="habits-tab-allies"] {
    background: linear-gradient(135deg, rgba(92,201,138,0.18), rgba(226,176,74,0.12));
    color: var(--xp-green);
    box-shadow: 0 0 14px rgba(92,201,138,0.12);
}

.habits-tab-btn.habits-tab-active[id="habits-tab-enemies"] {
    background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(224,85,106,0.10));
    color: var(--enemy-color);
    box-shadow: 0 0 14px rgba(236,72,153,0.12);
}

/* ── Habit Cards ── */
.habit-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-4) var(--space-4);
    margin-bottom: var(--space-2);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.habit-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--radius) 0 0 var(--radius);
    transition: var(--transition);
}

.ally-card::before {
    background: linear-gradient(180deg, var(--xp-green), var(--gold));
}

.enemy-card::before {
    background: linear-gradient(180deg, var(--enemy-color), #eb4d4b);
}

.habit-card.habit-done {
    opacity: 0.62;
}

.ally-card:hover {
    border-color: var(--xp-green);
    box-shadow: 0 0 16px rgba(92,201,138,0.08);
    transform: translateY(-1px);
}

.enemy-card:hover {
    border-color: var(--enemy-color);
    box-shadow: 0 0 16px rgba(236,72,153,0.08);
    transform: translateY(-1px);
}

.habit-card-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.habit-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.habit-info {
    flex: 1;
    min-width: 0;
}

.habit-name {
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--text-bright);
    line-height: 1.3;
}

.habit-done .habit-name {
    text-decoration: line-through;
    color: var(--text-muted);
}

.habit-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
    line-height: 1.4;
}

.habit-meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
    align-items: center;
}

/* .habit-xp-badge / .enemy-xp-badge / .habit-penalty-badge /
   .habit-streak-badge / .ally-streak / .enemy-streak all migrated onto
   shared .badge (Phase 3, Day 11, M-4). Use:
     ally XP:      class="badge badge-mono badge-xp"
     enemy XP:     class="badge badge-mono badge-enemy"
     penalty:      class="badge badge-mono badge-danger"
     ally streak:  class="badge badge-gold"
     enemy streak: class="badge badge-enemy" */

.habit-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
    margin-top: var(--space-1);
}

/* ── Habit Action Buttons (ally/enemy) ──
   Base shape (padding, radius, border width, font, transition) comes
   from .btn. Full-width + letter-spacing are component rules here, not
   on .btn itself — only these two buttons need them. .is-done supplies
   shared completed-state behavior (no hover/lift, not-allowed cursor);
   .btn-ally.is-done / .btn-enemy.is-done keep the completed look tinted
   per type — an ally going quiet green and an enemy going quiet magenta
   is intentional, kept distinct rather than unified into one neutral
   done state. */
.btn-ally,
.btn-enemy {
    width: 100%;
    letter-spacing: 0.02em;
}

.btn-ally {
    background: rgba(92,201,138,0.1);
    border-color: var(--xp-green);
    color: var(--xp-green);
}

.btn-ally:hover:not(:disabled) {
    background: var(--xp-green);
    color: var(--surface);
    box-shadow: 0 0 18px rgba(92,201,138,0.3);
    transform: translateY(-1px);
}

.btn-enemy {
    background: rgba(236,72,153,0.1);
    border-color: var(--enemy-color);
    color: var(--enemy-color);
}

.btn-enemy:hover:not(:disabled) {
    background: var(--enemy-color);
    color: var(--surface);
    box-shadow: 0 0 18px rgba(236,72,153,0.3);
    transform: translateY(-1px);
}

/* Shared completed-state behavior (equal specificity to .btn-ally/
   .btn-enemy's base rule, but sets different properties, so no override
   conflict — background is the one overlap and .btn.is-done wins it by
   higher specificity regardless of source order). */
.btn.is-done {
    background: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Type-specific completed-state color — (0,2,0) beats .btn-ally/.btn-enemy's
   (0,1,0) base tint regardless of order. */
.btn-ally.is-done {
    border-color: var(--dim-border);
    color: var(--text-muted);
}

.btn-enemy.is-done {
    border-color: #3a1f2c;
    color: #8a5a75;
}

/* ── Habit Type Radio Buttons ── */
.habit-type-radio {
    flex: 1;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.habit-type-radio.selected[data-type="ally"] {
    background: rgba(92,201,138,0.1);
    border-color: var(--xp-green);
    color: var(--xp-green);
}

.habit-type-radio.selected[data-type="enemy"] {
    background: rgba(236,72,153,0.1);
    border-color: var(--enemy-color);
    color: var(--enemy-color);
}

.habit-type-radio:hover:not(.selected) {
    border-color: var(--text-muted);
    color: var(--text);
}

/* ── Panel content spacing ── */
#habits-panel-content {
    display: flex;
    flex-direction: column;
    min-height: 80px;
    animation: fadeSlideIn 0.22s ease-out;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}