/* ================================================================
   Circle Ledger — components/card.css
   Group cards, event cards, payment rows, stat cards,
   balance card, and generic surface containers.
================================================================ */

/* ── Base card (.card, .card_body) are defined in shared.css — no duplication here ── */

/* ── Hover/click card shell ── */
.card_clickable {
    cursor: pointer;
    transition: box-shadow var(--t), transform var(--t);
    -webkit-tap-highlight-color: transparent;
}
.card_clickable:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-0.0625rem);
}
.card_clickable:active { transform: translateY(0); }

/* ── Group card ── */
.group_card {
    background: var(--surface);
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gc-pad);
    margin-bottom: var(--gc-mb);
    display: flex;
    gap: var(--gc-gap);
    align-items: flex-start;
    cursor: pointer;
    transition: box-shadow var(--t), transform var(--t);
    -webkit-tap-highlight-color: transparent;
}
.group_card:hover  { box-shadow: var(--shadow-sm); transform: translateY(-0.0625rem); }
.group_card:active { transform: translateY(0); }

.group_card_icon {
    width: var(--gc-icon-size);
    height: var(--gc-icon-size);
    border-radius: var(--gc-icon-radius);
    background: var(--teal-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-xl);
    flex-shrink: 0;
}
.group_card_body { flex: 1; min-width: 0; }
.group_card_name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--teal-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-0-5);
}
.group_card_meta {
    display: flex;
    align-items: center;
    gap: var(--gc-meta-gap);
    flex-wrap: wrap;
}
.group_card_meta_item {
    font-size: var(--text-sm);
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.group_card_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1-5);
    flex-shrink: 0;
}

/* ── Event card ── */
.event_card {
    background: var(--surface);
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--ec-py) var(--ec-px);
    margin-bottom: var(--ec-mb);
    cursor: pointer;
    transition: box-shadow var(--t), transform var(--t);
    -webkit-tap-highlight-color: transparent;
}
.event_card:hover  { box-shadow: var(--shadow-sm); transform: translateY(-0.0625rem); }
.event_card:active { transform: translateY(0); }

.event_card_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ec-header-gap);
}
.event_card_name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--teal-900);
    line-height: 1.25;
}
.event_card_stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ec-stats-gap);
    margin-top: var(--ec-stats-mt);
}
.event_card_stat {}
.event_card_stat_label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--slate-400);
    margin-bottom: var(--space-0-5);
}
.event_card_stat_val {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--teal-900);
    line-height: 1;
}
.event_card_stat_meta {
    font-size: var(--text-xs);
    color: var(--slate-400);
    margin-top: var(--stat-meta-mt);
}

/* ── Payment / list rows ── */
.payment_row {
    display: flex;
    align-items: center;
    gap: var(--row-gap);
    padding: var(--row-py) 0;
    border-bottom: var(--border-thin) solid var(--slate-100);
}
.payment_row:last-child { border-bottom: none; }
.payment_row_body  { flex: 1; min-width: 0; }
.payment_row_name  {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.payment_row_meta  {
    font-size: var(--text-sm);
    color: var(--slate-400);
    margin-top: var(--row-meta-mt);
}
.payment_row_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pay-right-gap);
    flex-shrink: 0;
}
.payment_row_amount {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--teal-900);
}
.payment_row_amount.credit { color: var(--green-700); }
.payment_row_amount.debit  { color: var(--red-600); }

/* ── Balance card ── */
.balance_card {
    background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-600) 100%);
    border-radius: var(--radius-lg);
    padding: var(--bal-pad);
    margin-bottom: var(--bal-mb);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.balance_card_label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--teal-200);
    margin-bottom: var(--bal-label-mb);
}
.balance_card_amount {
    font-family: var(--font-display);
    font-size: var(--bal-amount-fs);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
}
.balance_card_currency {
    font-size: 0.55em;
    font-weight: 600;
    vertical-align: super;
    color: var(--teal-200);
}
.balance_card_meta {
    font-size: var(--text-sm);
    color: var(--teal-200);
    margin-top: var(--space-1);
}

/* ── Stat cards grid ── */
.stat_cards_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--stat-gap);
    margin-bottom: var(--stat-mb);
}
.stat_card {
    background: var(--surface);
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--stat-pad);
}
.stat_card_label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--slate-400);
    margin-bottom: var(--stat-label-mb);
}
.stat_card_val {
    font-family: var(--font-display);
    font-size: var(--stat-val-size);
    font-weight: 700;
    color: var(--teal-900);
    line-height: 1;
}
.stat_card_val_sm { font-size: var(--stat-val-sm); }
.stat_card_meta {
    font-size: var(--text-xs);
    color: var(--slate-400);
    margin-top: var(--stat-meta-mt);
}

/* ── Usage / expense icon card ── */
.usage_card {
    display: flex;
    align-items: center;
    gap: var(--row-gap);
    padding: var(--row-py-tall) 0;
    border-bottom: var(--border-thin) solid var(--slate-100);
}
.usage_card:last-child { border-bottom: none; }
.usage_icon {
    width: var(--usage-icon-size);
    height: var(--usage-icon-size);
    border-radius: var(--usage-icon-radius);
    background: var(--teal-50);
    color: var(--teal-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-lg);
    flex-shrink: 0;
}

/* .progress_bar_wrap, .progress_bar_fill, .notice_* are defined in shared.css */