/* Namespaced styles to play nice with Storefront */
.ccd-kpis { display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; }
.ccd-kpi { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:12px 16px; min-width:200px; box-shadow:0 1px 2px rgba(0,0,0,0.03); cursor:pointer; }
.ccd-kpi .ccd-kpi-label { display:block; font-weight:600; color:#555; }
.ccd-kpi .ccd-kpi-value { font-size:20px; color:#111; }

.ccd-green { color:#1f8b4c; }
.ccd-amber { color:#c58b00; }
.ccd-red { color:#c0392b; }

.ccd-table { width:100%; border-collapse:collapse; }
.ccd-table th, .ccd-table td { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; }

#ccd-issue-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.35); z-index:9999; }
#ccd-issue-modal .ccd-modal-content { background:#fff; max-width:520px; margin:80px auto; padding:20px; border-radius:8px; }
.ccd-kpi-bar {
    display: flex;
    gap: 20px;
    margin: 10px 0;
    font-weight: bold;
    color: #2d3748;
}
.ccd-kpi-bar span {
    background: #edf2f7;
    padding: 6px 12px;
    border-radius: 6px;
}