/* wwwroot/css/cardledger-theme.css
   Table + Badge Theme for CardLedger
   Requires your :root variables (cl-primary, cl-accent, cl-bg, cl-surface, cl-border, cl-muted, etc.)
*/

/* ---------- Tables ---------- */
.table.cl-table {
    --bs-table-bg: var(--cl-surface);
    --bs-table-striped-bg: rgba(11, 31, 59, 0.035); /* primary tint */
    --bs-table-hover-bg: rgba(45, 212, 167, 0.08); /* accent tint */
    border: 1px solid var(--cl-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 10px rgba(10, 18, 32, 0.04);
}

    .table.cl-table thead th {
        background: rgba(11, 31, 59, 0.06);
        color: var(--cl-muted);
        font-weight: 700;
        letter-spacing: 0.02em;
        border-bottom: 1px solid var(--cl-border);
        vertical-align: middle;
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    .table.cl-table tbody td {
        border-color: var(--cl-border);
        vertical-align: middle;
    }

    .table.cl-table tbody tr:hover td {
        transition: background-color 120ms ease;
    }

    /* Compact variant */
    .table.cl-table.cl-table-sm thead th,
    .table.cl-table.cl-table-sm tbody td {
        padding: .45rem .6rem;
    }

/* Right aligned numeric columns helper */
.cl-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sticky header (optional) */
.cl-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Table links */
.cl-table a {
    color: var(--cl-primary);
    text-decoration: none;
    font-weight: 600;
}

    .cl-table a:hover {
        text-decoration: underline;
    }

/* ---------- Badges (base) ---------- */
.badge.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}

    /* Neutral badge */
    .badge.cl-badge.cl-badge-neutral {
        background: rgba(100, 116, 139, 0.10);
        border-color: rgba(100, 116, 139, 0.22);
        color: var(--cl-muted);
    }

    /* Stock badge */
    .badge.cl-badge.cl-badge-stock {
        background: rgba(45, 212, 167, 0.14);
        border-color: rgba(45, 212, 167, 0.35);
        color: #064e3b;
    }

    /* Sold badge */
    .badge.cl-badge.cl-badge-sold {
        background: rgba(37, 99, 235, 0.12);
        border-color: rgba(37, 99, 235, 0.28);
        color: #1e3a8a;
    }

    /* Profit badge */
    .badge.cl-badge.cl-badge-profit {
        background: rgba(22, 163, 74, 0.12);
        border-color: rgba(22, 163, 74, 0.28);
        color: #14532d;
    }

    /* Loss badge */
    .badge.cl-badge.cl-badge-loss {
        background: rgba(220, 38, 38, 0.12);
        border-color: rgba(220, 38, 38, 0.28);
        color: #7f1d1d;
    }

/* ---------- Rarity badges ---------- */
.badge.cl-rarity {
    display: inline-flex;
    align-items: center;
    padding: .30rem .55rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    text-transform: capitalize;
}

    /* Common */
    .badge.cl-rarity.cl-common {
        background: rgba(100, 116, 139, 0.12);
        border-color: rgba(100, 116, 139, 0.25);
        color: #334155;
    }

    /* Uncommon */
    .badge.cl-rarity.cl-uncommon {
        background: rgba(45, 212, 167, 0.14);
        border-color: rgba(45, 212, 167, 0.35);
        color: #064e3b;
    }

    /* Rare */
    .badge.cl-rarity.cl-rare {
        background: rgba(37, 99, 235, 0.14);
        border-color: rgba(37, 99, 235, 0.32);
        color: #1e3a8a;
    }

    /* Mythic */
    .badge.cl-rarity.cl-mythic {
        background: rgba(246, 196, 83, 0.22);
        border-color: rgba(246, 196, 83, 0.55);
        color: #7c2d12;
    }

    /* Special/Bonus (Promo/Timeshifted etc.) */
    .badge.cl-rarity.cl-special {
        background: rgba(217, 119, 6, 0.16);
        border-color: rgba(217, 119, 6, 0.40);
        color: #7c2d12;
    }

/* ---------- Small UI helpers ---------- */
.cl-muted {
    color: var(--cl-muted) !important;
}

.cl-pill {
    border: 1px solid var(--cl-border);
    border-radius: 999px;
    padding: .25rem .55rem;
    background: var(--cl-surface);
}

.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(11, 31, 59, 0.06);
    border: 1px solid rgba(11, 31, 59, 0.12);
    border-radius: 999px;
    padding: .25rem .55rem;
    color: var(--cl-primary);
    font-weight: 650;
}

.cl-set-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    /* optional: etwas softer */
    filter: drop-shadow(0 1px 2px rgba(10,18,32,0.08));
}