/* ================================================================================
   BEER-ROW.CSS - The venue↔beer row, wherever it appears
   Rendered by features/beer-row.js on the venue page AND the visit surface,
   so these rules can't be scoped to either. Lifted out of venue.css, where
   they sat behind #venueDetailsOverlay and silently did nothing anywhere else.
   ================================================================================ */

/* ================================
   COMPACT ROW - multi-beer venues
   Every ✅ on screen at once. Deliberately not a carousel: a beer you have
   to swipe to never gets confirmed, so its last_seen rots.
   ================================ */

.beer-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.beer-row.owner-beer {
    border-color: rgba(96, 197, 232, 0.45);
}

.beer-row-icon {
    font-size: var(--text-lg);
    line-height: 1;
    flex-shrink: 0;
}

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

.beer-row-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beer-row-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beer-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* ================================
   RICH CARD - single-beer venues
   Same data, same controls, more of it.
   ================================ */

.handle-card {
    width: 100%;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Format-specific glow */
.handle-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0.08;
}

.handle-card.format-tap::before { background: #fbbf24; }
.handle-card.format-cask::before { background: #c084fc; }
.handle-card.format-bottle::before { background: #4ade80; }
.handle-card.format-can::before { background: #60a5fa; }

.handle-card.owner-beer {
    border-color: rgba(96, 197, 232, 0.45);
    background: linear-gradient(160deg, rgba(96, 197, 232, 0.08) 0%, var(--bg-card) 100%);
}

.handle-format {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
    align-self: flex-start;
}

.handle-format.format-tap { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.handle-format.format-cask { background: rgba(192, 132, 252, 0.15); color: #c084fc; }
.handle-format.format-bottle { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.handle-format.format-can { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }

.handle-beer-name {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
    color: var(--text-primary);
}

.handle-brewery {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    flex: 1;
}

.handle-freshness {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px dashed var(--border-light);
}

.freshness-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.freshness-dot.fresh { background: #4ade80; }
.freshness-dot.stale { background: #f5a623; }

.handle-owner-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #2d9fd0;
    margin-bottom: var(--space-sm);
}

/* ================================
   CONTROLS
   Shared by both densities - same data-actions, same row keys, so the
   handlers don't branch on which shape rendered them.
   ================================ */

.handle-confirm-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border-light);
    background: var(--bg-input);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.handle-confirm-btn:active {
    transform: scale(0.9);
}

.handle-confirm-btn.yes {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.25);
}

.handle-confirm-btn.no {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.handle-confirm-btn.edit {
    color: var(--text-muted);
}

/* Answered - nothing left to ask for 24h. */
.confirmed-text {
    font-size: 11px;
    font-weight: 600;
    color: #4ade80;
    white-space: nowrap;
}

/* ================================
   UNDO WINDOW
   A removal is queued, not sent. Replaces the native confirm() the venue
   page used to show: a blocking dialog can't be optimistic, and it's
   unusable mid-flow when you're adding four beers.
   ================================ */

.beer-row.is-removing,
.handle-card.is-removing {
    opacity: 0.55;
}

.beer-row-removing {
    font-size: 11px;
    font-weight: 700;
    color: #ef4444;
    white-space: nowrap;
}

.handle-confirm-btn.undo {
    padding: 4px 10px;
    color: var(--text-secondary);
    font-weight: 700;
    white-space: nowrap;
}