/* pv-app-badges.css — Badges, Due-Tags, Buttons */

.pv-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; }
.pv-badge.pending    { background: var(--yellow-dim); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent); }
.pv-badge.processing { background: var(--blue-dim);   color: var(--blue);   border: 1px solid color-mix(in srgb, var(--blue)   20%, transparent); }
.pv-badge.done       { background: var(--green-dim);  color: var(--green);  border: 1px solid color-mix(in srgb, var(--green)  20%, transparent); }
.pv-badge.failed     { background: var(--red-dim);    color: var(--red);    border: 1px solid color-mix(in srgb, var(--red)    20%, transparent); }
.pv-badge.nomail     { background: var(--red-dim);    color: var(--red);    border: 1px solid color-mix(in srgb, var(--red)    20%, transparent); }

.pv-due-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); }
.pv-due-tag.green   { background: color-mix(in srgb, var(--green)  12%, transparent); color: var(--green);  border: 1px solid color-mix(in srgb, var(--green)  25%, transparent); }
.pv-due-tag.yellow  { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent); }
.pv-due-tag.red     { background: color-mix(in srgb, var(--red)    12%, transparent); color: var(--red);    border: 1px solid color-mix(in srgb, var(--red)    25%, transparent); }
.pv-due-tag.overdue { background: color-mix(in srgb, var(--red)    20%, transparent); color: var(--red);    border: 1px solid color-mix(in srgb, var(--red)    40%, transparent); }

.pv-overlay-btn { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); cursor: pointer; transition: all var(--transition-fast); }
.pv-overlay-btn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }

.pv-overlay-toggle-btn { font-family: var(--font-mono); font-size: 11px; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); cursor: pointer; transition: all var(--transition-fast); }
.pv-overlay-toggle-btn.ready  { border-color: var(--green);  color: var(--green); }
.pv-overlay-toggle-btn.active { border-color: var(--red);    color: var(--red); }
.pv-overlay-toggle-btn.loading { border-color: var(--yellow); color: var(--yellow); cursor: wait; opacity: 0.7; }