/* JennSentry Action List Panel — Phase C5
 * Uses only design tokens from sentry.css :root.
 * Dark mode inherits automatically via [data-theme="dark"] overrides.
 */

/* ── Tier container ───────────────────────────────────────────────── */

.action-tier {
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border);
}

.action-tier:last-child {
    border-bottom: none;
}

/* Colored left-border accent per tier */
.action-tier[data-tier="now"] {
    border-left: 3px solid var(--error);
}

.action-tier[data-tier="watch"] {
    border-left: 3px solid var(--warning);
}

.action-tier[data-tier="improve"] {
    border-left: 3px solid var(--info);
}

/* ── Tier header ──────────────────────────────────────────────────── */

.action-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.action-tier-header:hover {
    background: var(--surface-2);
}

.action-tier-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.action-tier-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.action-tier-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

/* Tier-specific label tints — match sidebar tier-count semantics */
.action-tier[data-tier="now"] .action-tier-label {
    color: var(--error);
}

.action-tier[data-tier="watch"] .action-tier-label {
    color: var(--warning);
}

.action-tier[data-tier="improve"] .action-tier-label {
    color: var(--info);
}

/* ── Collapse support ─────────────────────────────────────────────── */

.action-tier[data-expanded="false"] .action-tier-list {
    display: none;
}

/* ── Tier list (row container) ────────────────────────────────────── */

.action-tier-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px 4px;
}

/* ── Action row ───────────────────────────────────────────────────── */

.action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.action-row:hover {
    background: var(--surface-2);
}

/* ── Action icon (fixed-size colored indicator) ───────────────────── */

.action-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

/* Source-specific icon backgrounds + optional unicode glyphs */
.icon-cicd {
    background: var(--info-bg);
    color: var(--info);
}
.icon-cicd::before { content: "\25B6"; /* ▶ */ }

.icon-vuln {
    background: var(--error-bg);
    color: var(--error);
}
.icon-vuln::before { content: "\1F6E1"; /* 🛡 */ font-size: 12px; }

.icon-alert {
    background: var(--warning-bg);
    color: var(--warning);
}
.icon-alert::before { content: "\26A0"; /* ⚠ */ }

.icon-fleet {
    background: var(--info-bg);
    color: var(--info);
}
.icon-fleet::before { content: "\2637"; /* ☷ */ }

.icon-infra {
    background: var(--info-bg);
    color: var(--info);
}
.icon-infra::before { content: "\2302"; /* ⌂ */ }

.icon-deadcode {
    background: var(--surface-2);
    color: var(--text-muted);
}
.icon-deadcode::before { content: "\2620"; /* ☠ */ }

.icon-email {
    background: var(--info-bg);
    color: var(--info);
}
.icon-email::before { content: "\2709"; /* ✉ */ }

.icon-node {
    background: var(--info-bg);
    color: var(--info);
}
.icon-node::before { content: "\2B22"; /* ⬢ */ }

.icon-fingerprint {
    background: var(--warning-bg);
    color: var(--warning);
}
.icon-fingerprint::before { content: "\1F91A"; /* 🤚 */ font-size: 12px; }

/* ── Action body ──────────────────────────────────────────────────── */

.action-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0; /* allow text truncation */
}

.action-title {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Badge: project (neutral chip — scoped to .action-meta to avoid
 *    overriding sentry.css's global .badge-project teal style) ── */

.action-meta .badge-project {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: none;
    font-weight: 500;
    border-radius: var(--radius-pill);
}

/* ── Age label (scoped to .action-meta to avoid name collision) ───── */

.action-meta .age {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Action controls ──────────────────────────────────────────────── */

.action-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── btn-sm (not in sentry.css — compact variant of .btn) ─────────── */

.btn.btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

/* ── Overflow button (ghost, standalone — not derived from .btn) ──── */

.btn-overflow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-overflow:hover {
    background: var(--surface-2);
    color: var(--text);
}

.btn-overflow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* ── Action error (inline post-failure message) ───────────────────── */

.action-error {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--error);
    margin-left: 6px;
    font-weight: 500;
}

/* ── Empty state (inside an empty action-tier-list) ───────────────── */

.action-tier-list .empty {
    text-align: center;
    padding: 16px 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Responsive: compact on small screens ─────────────────────────── */

@media (max-width: 640px) {
    .action-row {
        flex-wrap: wrap;
    }

    .action-controls {
        width: 100%;
        justify-content: flex-end;
        padding-top: 6px;
    }

    .action-meta .age {
        display: none;
    }
}