<style >
/* ═══════════════════════════════════════════════════════════════════
   INFO CARD — modern dashboard stat card
   Responds to html.light-mode / html.dark-mode from ThemeManager
   ═══════════════════════════════════════════════════════════════════ */
/* ── Color palette per variant ─────────────────────────────────── */
.info-card--blue {
    --ic-h: 213;
}

.info-card--green {
    --ic-h: 152;
}

.info-card--red {
    --ic-h: 4;
}

.info-card--orange {
    --ic-h: 28;
}

.info-card--purple {
    --ic-h: 262;
}

.info-card--teal {
    --ic-h: 174;
}

.info-card--pink {
    --ic-h: 330;
}

.info-card--indigo {
    --ic-h: 234;
}

/* ── Dark mode defaults ────────────────────────────────────────── */
.info-card {
    --ic-bg: hsl(var(--ic-h, 213), 55%, 14%);
    --ic-bg2: hsl(var(--ic-h, 213), 50%, 10%);
    --ic-accent: hsl(var(--ic-h, 213), 80%, 62%);
    --ic-accent2: hsl(var(--ic-h, 213), 70%, 72%);
    --ic-icon-bg: hsl(var(--ic-h, 213), 60%, 20%);
    --ic-footer-bg: hsl(var(--ic-h, 213), 50%, 10%);
    --ic-footer-hover: hsl(var(--ic-h, 213), 60%, 16%);
    --ic-text: #e2e8f0;
    --ic-label: hsl(var(--ic-h, 213), 40%, 70%);
    --ic-shadow: hsl(var(--ic-h, 213), 60%, 8%);
    --ic-glow: hsl(var(--ic-h, 213), 70%, 50%);
}

/* ── Light mode overrides ──────────────────────────────────────── */
html.light-mode .info-card {
    --ic-bg: hsl(var(--ic-h, 213), 80%, 54%);
    --ic-bg2: hsl(var(--ic-h, 213), 75%, 48%);
    --ic-accent: #ffffff;
    --ic-accent2: rgba(255,255,255,0.85);
    --ic-icon-bg: hsl(var(--ic-h, 213), 70%, 44%);
    --ic-footer-bg: hsl(var(--ic-h, 213), 70%, 44%);
    --ic-footer-hover: hsl(var(--ic-h, 213), 65%, 38%);
    --ic-text: #ffffff;
    --ic-label: rgba(255,255,255,0.88);
    --ic-shadow: hsl(var(--ic-h, 213), 60%, 35%);
    --ic-glow: hsl(var(--ic-h, 213), 80%, 60%);
}

/* ── Card shell ────────────────────────────────────────────────── */
.info-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ic-bg) 0%, var(--ic-bg2) 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.04) inset;
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .2s ease, box-shadow .2s ease;
    margin-bottom: 16px;
}

    .info-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 1px var(--ic-glow) inset;
    }

    /* Subtle shimmer line at top */
    .info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--ic-accent), transparent);
        opacity: .6;
    }

/* ── Body ──────────────────────────────────────────────────────── */
.info-card__body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 16px;
}

/* ── Icon ──────────────────────────────────────────────────────── */
.info-card__icon-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--ic-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
}

    .info-card__icon-wrap .fa {
        font-size: 22px;
        color: var(--ic-accent);
    }

/* ── Content ───────────────────────────────────────────────────── */
.info-card__content {
    flex: 1;
    min-width: 0;
}

.info-card__value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ic-accent);
    line-height: 1.1;
    letter-spacing: -.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-card__label {
    font-size: .78rem;
    color: var(--ic-label);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Footer link ───────────────────────────────────────────────── */
.info-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--ic-footer-bg);
    border-top: 1px solid rgba(255,255,255,.06);
    color: var(--ic-label);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .4px;
    transition: background .18s, color .18s;
}

    .info-card__footer:hover {
        background: var(--ic-footer-hover);
        color: var(--ic-accent);
        text-decoration: none;
    }

    .info-card__footer .fa {
        font-size: 13px;
        transition: transform .18s;
    }

    .info-card__footer:hover .fa {
        transform: translateX(4px);
    }

/* ── Responsive grid ───────────────────────────────────────────── */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px;
}

/* ── Stagger animation on load ─────────────────────────────────── */
.info-card {
    animation: cardIn .35s ease both;
}

    /* stagger via nth-child — works up to 20 cards */
    .info-card:nth-child(1) {
        animation-delay: .03s;
    }

    .info-card:nth-child(2) {
        animation-delay: .06s;
    }

    .info-card:nth-child(3) {
        animation-delay: .09s;
    }

    .info-card:nth-child(4) {
        animation-delay: .12s;
    }

    .info-card:nth-child(5) {
        animation-delay: .15s;
    }

    .info-card:nth-child(6) {
        animation-delay: .18s;
    }

    .info-card:nth-child(7) {
        animation-delay: .21s;
    }

    .info-card:nth-child(8) {
        animation-delay: .24s;
    }

    .info-card:nth-child(9) {
        animation-delay: .27s;
    }

    .info-card:nth-child(10) {
        animation-delay: .30s;
    }

    .info-card:nth-child(11) {
        animation-delay: .33s;
    }

    .info-card:nth-child(12) {
        animation-delay: .36s;
    }

    .info-card:nth-child(13) {
        animation-delay: .39s;
    }

    .info-card:nth-child(14) {
        animation-delay: .42s;
    }

    .info-card:nth-child(15) {
        animation-delay: .45s;
    }

    .info-card:nth-child(16) {
        animation-delay: .48s;
    }

    .info-card:nth-child(17) {
        animation-delay: .51s;
    }

    .info-card:nth-child(18) {
        animation-delay: .54s;
    }

    .info-card:nth-child(19) {
        animation-delay: .57s;
    }

    .info-card:nth-child(20) {
        animation-delay: .60s;
    }

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Print: flatten cards ──────────────────────────────────────── */
@media print {
    .info-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #f8f8f8 !important;
        break-inside: avoid;
    }

    .info-card__value,
    .info-card__label {
        color: #000 !important;
    }

    .info-card__footer {
        background: #eee !important;
        color: #333 !important;
    }

    .info-card::before {
        display: none;
    }
}

</style >
