/* =====================================================
   MODULE: CARDS
   Glass cards, KPI indicators, stat cards, product cards.
   Glow system + siri-border animation from Print OS v4.
   Per-theme overrides for all 5 themes.
   Toggle: modules.cards in theme-config.json
   ===================================================== */

/* ============= GLASS CARD (Print OS v4) ============= */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl, 1rem);
    padding: 1.5rem;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
}
.glass-card:hover {
    box-shadow: var(--shadow-hover);
}

/* ============= BASE CARD ============= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 1rem);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-hover); }

.card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}
.card-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 700;
    color: var(--text-primary);
}
.card-subtitle {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}
.card-body { flex: 1; }
.card-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-primary);
}

/* Interactive Card */
.card-interactive { cursor: pointer; }
.card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-interactive.selected { border-color: var(--accent); box-shadow: var(--shadow-accent); }

/* ============= SIRI-BORDER CARD ============= */
.siri-border {
    position: relative;
    border-radius: var(--radius-xl, 1rem);
    overflow: hidden;
}
.siri-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--siri-angle, 0deg),
        var(--accent) 0%,
        var(--glow-blue, #3b82f6) 25%,
        var(--glow-pink, #ec4899) 50%,
        var(--glow-yellow, #facc15) 75%,
        var(--accent) 100%
    );
    z-index: -1;
    animation: rotateBorder 4s linear infinite;
}
.siri-border > * { position: relative; z-index: 1; }

@keyframes rotateBorder {
    from { --siri-angle: 0deg; }
    to { --siri-angle: 360deg; }
}
@property --siri-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ============= STAT CARD ============= */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 1rem);
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    border-radius: 2px;
}
.stat-card:hover { transform: translateY(-2px); }

.stat-label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: var(--font-size-3xl, 1.875rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.stat-change { font-size: var(--font-size-sm, 0.875rem); margin-top: 0.25rem; }
.stat-change.up { color: var(--color-success); }
.stat-change.down { color: var(--color-danger); }

/* Stat Card Colors */
.stat-card.blue { background: var(--stat-blue-bg); border-color: var(--stat-blue-border); box-shadow: var(--stat-blue-shadow); }
.stat-card.blue::before { background: var(--stat-blue-border); }
.stat-card.blue:hover { box-shadow: var(--stat-blue-shadow-hover); }

.stat-card.green { background: var(--stat-green-bg); border-color: var(--stat-green-border); box-shadow: var(--stat-green-shadow); }
.stat-card.green::before { background: var(--stat-green-border); }
.stat-card.green:hover { box-shadow: var(--stat-green-shadow-hover); }

.stat-card.red { background: var(--stat-red-bg); border-color: var(--stat-red-border); box-shadow: var(--stat-red-shadow); }
.stat-card.red::before { background: var(--stat-red-border); }
.stat-card.red:hover { box-shadow: var(--stat-red-shadow-hover); }

/* ============= KPI CIRCLE ============= */
.kpi-circle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg, 0.75rem);
    transition: all 0.2s ease;
}
.kpi-dot {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-sm, 0.875rem);
    color: #ffffff;
    flex-shrink: 0;
}
.kpi-label { font-size: var(--font-size-sm, 0.875rem); font-weight: 600; color: var(--text-secondary); }
.kpi-value { font-size: var(--font-size-lg, 1.125rem); font-weight: 700; color: var(--text-primary); }

.kpi-circle.blue { background: var(--kpi-blue-bg); box-shadow: var(--kpi-blue-shadow); }
.kpi-circle.blue .kpi-dot { background: var(--kpi-blue-border); }
.kpi-circle.blue:hover { box-shadow: var(--kpi-blue-shadow-hover); }

.kpi-circle.green { background: var(--kpi-green-bg); box-shadow: var(--kpi-green-shadow); }
.kpi-circle.green .kpi-dot { background: var(--kpi-green-border); }
.kpi-circle.green:hover { box-shadow: var(--kpi-green-shadow-hover); }

.kpi-circle.purple { background: var(--kpi-purple-bg); box-shadow: var(--kpi-purple-shadow); }
.kpi-circle.purple .kpi-dot { background: var(--kpi-purple-border); }
.kpi-circle.purple:hover { box-shadow: var(--kpi-purple-shadow-hover); }

.kpi-circle.red { background: var(--kpi-red-bg); box-shadow: var(--kpi-red-shadow); }
.kpi-circle.red .kpi-dot { background: var(--kpi-red-border); }
.kpi-circle.red:hover { box-shadow: var(--kpi-red-shadow-hover); }

.kpi-circle.yellow { background: var(--kpi-yellow-bg); box-shadow: var(--kpi-yellow-shadow); }
.kpi-circle.yellow .kpi-dot { background: var(--kpi-yellow-border); }
.kpi-circle.yellow:hover { box-shadow: var(--kpi-yellow-shadow-hover); }

/* ============= MINI KPI CARD (Print OS v4 style) ============= */
.kpi-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg, 0.75rem);
    min-width: 6.5rem;
    flex: 1;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-mini:hover { transform: translateY(-1px); }
.kpi-mini-icon { font-size: 1rem; opacity: 0.85; line-height: 1; }
.kpi-mini-label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; line-height: 1.3; }
.kpi-mini-value { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
/* Mini KPI colors */
.kpi-mini.red { background: #dc2626; }
.kpi-mini.blue { background: #2563eb; }
.kpi-mini.green { background: #16a34a; }
.kpi-mini.yellow { background: #eab308; color: #1a1a1a; }
.kpi-mini.purple { background: var(--accent); }
/* Dark theme — semi-transparent with glow */
[data-theme="black-glass"] .kpi-mini.red { background: rgba(220, 38, 38, 0.2); border: 1px solid rgba(239, 68, 68, 0.4); box-shadow: 0 0 10px rgba(239, 68, 68, 0.15); }
[data-theme="black-glass"] .kpi-mini.blue { background: rgba(37, 99, 235, 0.2); border: 1px solid rgba(59, 130, 246, 0.4); box-shadow: 0 0 10px rgba(59, 130, 246, 0.15); }
[data-theme="black-glass"] .kpi-mini.green { background: rgba(22, 163, 74, 0.2); border: 1px solid rgba(34, 197, 94, 0.4); box-shadow: 0 0 10px rgba(34, 197, 94, 0.15); }
[data-theme="black-glass"] .kpi-mini.yellow { background: rgba(234, 179, 8, 0.2); border: 1px solid rgba(250, 204, 21, 0.4); box-shadow: 0 0 10px rgba(250, 204, 21, 0.15); color: #facc15; }
/* Retro — solid Win95 colors */
[data-theme="retro"] .kpi-mini { border-radius: 0 !important; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff; }
[data-theme="retro"] .kpi-mini.red { background: #800000; }
[data-theme="retro"] .kpi-mini.blue { background: #000080; }
[data-theme="retro"] .kpi-mini.green { background: #008000; }
[data-theme="retro"] .kpi-mini.yellow { background: #808000; color: #fff; }
/* Homebrew — green terminal */
[data-theme="homebrew"] .kpi-mini { border-radius: 0 !important; background: rgba(0,0,0,0.4); border: 1px solid rgba(0,255,0,0.2); color: #00ff00; }
[data-theme="homebrew"] .kpi-mini.yellow { color: #00ff00; }

/* ============= PRODUCT CARD ============= */
.product-card {
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-xl, 1rem);
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
}
.product-card:hover { border-color: var(--border-secondary); }
.product-card.selected { border-color: var(--accent); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15); }
.product-card img { max-width: 120px; height: 120px; object-fit: contain; margin-bottom: 0.5rem; }
.product-card .name { font-size: var(--font-size-base, 1rem); font-weight: 800; color: var(--text-primary); }
.product-card .price { font-size: var(--font-size-2xl, 1.5rem); font-weight: 700; color: var(--accent); }

/* ============= GRIDS ============= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

/* ============= GLASS THEME — frosted cards ============= */
[data-theme="black-glass"] .glass-card,
[data-theme="black-glass"] .card {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="black-glass"] .card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

/* ============= LIGHT THEME ============= */
[data-theme="white-glass"] .glass-card,
[data-theme="white-glass"] .card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme="white-glass"] .card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
[data-theme="white-glass"] .stat-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); }
[data-theme="white-glass"] .stat-card.red { background: var(--accent); border-color: var(--accent); }
[data-theme="white-glass"] .stat-card.red .stat-label,
[data-theme="white-glass"] .stat-card.red .stat-value,
[data-theme="white-glass"] .stat-card.red .stat-change { color: #fff; }
[data-theme="white-glass"] .stat-card.blue { background: #2563eb; border-color: #2563eb; }
[data-theme="white-glass"] .stat-card.blue .stat-label,
[data-theme="white-glass"] .stat-card.blue .stat-value,
[data-theme="white-glass"] .stat-card.blue .stat-change { color: #fff; }
[data-theme="white-glass"] .stat-card.green { background: #16a34a; border-color: #16a34a; }
[data-theme="white-glass"] .stat-card.green .stat-label,
[data-theme="white-glass"] .stat-card.green .stat-value,
[data-theme="white-glass"] .stat-card.green .stat-change { color: #fff; }
[data-theme="white-glass"] .stat-card.red::before,
[data-theme="white-glass"] .stat-card.blue::before,
[data-theme="white-glass"] .stat-card.green::before { background: rgba(255,255,255,0.3); }
[data-theme="white-glass"] .stat-card.red:hover,
[data-theme="white-glass"] .stat-card.blue:hover,
[data-theme="white-glass"] .stat-card.green:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
/* KPI circles - solid on light */
[data-theme="white-glass"] .kpi-circle.blue { background: #2563eb; }
[data-theme="white-glass"] .kpi-circle.blue .kpi-label,
[data-theme="white-glass"] .kpi-circle.blue .kpi-value { color: #fff; }
[data-theme="white-glass"] .kpi-circle.green { background: #16a34a; }
[data-theme="white-glass"] .kpi-circle.green .kpi-label,
[data-theme="white-glass"] .kpi-circle.green .kpi-value { color: #fff; }
[data-theme="white-glass"] .kpi-circle.purple { background: var(--accent); }
[data-theme="white-glass"] .kpi-circle.purple .kpi-label,
[data-theme="white-glass"] .kpi-circle.purple .kpi-value { color: #fff; }
[data-theme="white-glass"] .kpi-circle.red { background: #dc2626; }
[data-theme="white-glass"] .kpi-circle.red .kpi-label,
[data-theme="white-glass"] .kpi-circle.red .kpi-value { color: #fff; }
[data-theme="white-glass"] .kpi-circle.yellow { background: #f59e0b; }
[data-theme="white-glass"] .kpi-circle.yellow .kpi-label,
[data-theme="white-glass"] .kpi-circle.yellow .kpi-value { color: #fff; }
[data-theme="white-glass"] .kpi-circle:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
[data-theme="white-glass"] .kpi-dot { background: rgba(255,255,255,0.25) !important; }
[data-theme="white-glass"] .product-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); }
[data-theme="white-glass"] .siri-border::before { opacity: 0.6; }

/* ============= RETRO THEME — 3D beveled cards ============= */
[data-theme="retro"] .glass-card,
[data-theme="retro"] .card {
    background: #c0c0c0;
    border: none;
    border-radius: 0 !important;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    backdrop-filter: none;
    color: #000;
}
[data-theme="retro"] .card:hover { transform: none; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
[data-theme="retro"] .card-title { color: #000; }
[data-theme="retro"] .card-subtitle { color: #444; }
[data-theme="retro"] .stat-card {
    background: #fff;
    border: none;
    border-radius: 0 !important;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff;
}
[data-theme="retro"] .stat-card::before { border-radius: 0; }
[data-theme="retro"] .product-card { background: #fff; border-radius: 0 !important; border: 2px solid #808080; }
[data-theme="retro"] .kpi-dot { border-radius: 0 !important; }
[data-theme="retro"] .siri-border::before { display: none; }

/* ============= HOMEBREW THEME — terminal cards ============= */
[data-theme="homebrew"] .glass-card,
[data-theme="homebrew"] .card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.15);
    border-radius: 0 !important;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.05);
    backdrop-filter: none;
}
[data-theme="homebrew"] .card:hover { box-shadow: 0 0 12px rgba(0, 255, 0, 0.1); }
[data-theme="homebrew"] .card-title { color: #00ff00; }
[data-theme="homebrew"] .card-subtitle { color: rgba(0, 255, 0, 0.5); }
[data-theme="homebrew"] .stat-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 0 !important;
}
[data-theme="homebrew"] .stat-value { color: #00ff00; }
[data-theme="homebrew"] .product-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 0 !important;
}
[data-theme="homebrew"] .product-card .name { color: #00ff00; }
[data-theme="homebrew"] .product-card .price { color: #00cc00; }
[data-theme="homebrew"] .siri-border::before {
    background: conic-gradient(from var(--siri-angle, 0deg), #00ff00 0%, #00cc00 50%, #00ff00 100%);
}

/* ============= SKEUOMORPHIC THEME — raised opaque panels ============= */
[data-theme="skeuomorphic"] .glass-card,
[data-theme="skeuomorphic"] .card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    backdrop-filter: none;
    color: var(--text-primary);
}
[data-theme="skeuomorphic"] .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    transform: none;
}
[data-theme="skeuomorphic"] .card-title { color: var(--text-primary); }
[data-theme="skeuomorphic"] .card-subtitle { color: var(--text-secondary); }
[data-theme="skeuomorphic"] .stat-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme="skeuomorphic"] .stat-card::before { display: none; }
[data-theme="skeuomorphic"] .product-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6); }
[data-theme="skeuomorphic"] .siri-border::before { display: none; }
[data-theme="skeuomorphic"] .kpi-mini { box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5); }