/* 05-admin.css — Admin Plugin Overview — SIGNAL aesthetic
   fp-plugin-hero, fp-plugin-icon-wrap, fp-meta-chip, fp-status-strip,
   fp-update-badge, fp-open-btn, and related components
   =========================================================== */

/* -----------------------------------------------------------
   20. Admin Plugin Overview — SIGNAL aesthetic
   ----------------------------------------------------------- */

/* Plugin Hero Header */
.fp-plugin-hero {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 2px solid var(--c-accent);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.fp-plugin-hero-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.fp-plugin-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-accent-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.375rem;
    color: var(--c-accent);
}

.fp-plugin-hero-body {
    flex: 1;
    min-width: 0;
}

.fp-plugin-hero-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

.fp-plugin-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
}

.fp-plugin-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.fp-meta-sep {
    color: var(--c-text-subtle);
    font-size: 0.75rem;
}

/* Meta chips */
.fp-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}

.fp-meta-chip--mono {
    font-family: var(--c-font-mono);
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text-muted);
}

.fp-meta-chip--blue {
    background: var(--c-accent-dim);
    border-color: var(--c-accent-bdr);
    color: var(--c-accent-light);
}

.fp-meta-chip--dim {
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text-subtle);
    font-family: var(--c-font-mono);
}

.fp-meta-chip--optional {
    background: var(--c-purple-dim);
    border-color: rgba(167, 139, 250, 0.28);
    color: var(--c-purple);
}

.fp-meta-chip--green {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.28);
    color: #4ade80;
}

/* Update badge */
.fp-update-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(250, 176, 5, 0.12);
    border: 1px solid rgba(250, 176, 5, 0.3);
    color: #f59e0b;
}

/* Open module button */
.fp-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.fp-open-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-light);
    background: var(--c-accent-glow);
    text-decoration: none;
}

/* Status strip */
.fp-status-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--c-border-subtle);
    background: var(--c-elevated);
}

.fp-status-sep {
    width: 1px;
    height: 14px;
    background: var(--c-border);
    margin: 0 0.875rem;
    flex-shrink: 0;
}

.fp-status-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-text-subtle);
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.fp-status-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-subtle);
    transition: color 0.2s ease;
}

.fp-status-item--on .fp-status-dot {
    background: var(--c-success);
    box-shadow: 0 0 5px rgba(39, 201, 122, 0.55);
    animation: fp-pulse 1.8s ease-in-out infinite;
}

.fp-status-item--on .fp-status-label {
    color: var(--c-success);
}

.fp-status-item--off .fp-status-dot {
    background: var(--c-text-subtle);
}

@keyframes fp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Meta table (replaces datagrid) */
.fp-meta-table {
    width: 100%;
    border-collapse: collapse;
}

.fp-meta-table tr {
    border-bottom: 1px solid var(--c-border-subtle);
}

.fp-meta-table tr:last-child {
    border-bottom: none;
}

.fp-meta-key {
    padding: 0.5625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-subtle);
    white-space: nowrap;
    width: 38%;
    vertical-align: middle;
}

.fp-meta-val {
    padding: 0.5625rem 1rem 0.5625rem 0;
    font-size: 0.8125rem;
    color: var(--c-text);
    vertical-align: middle;
}

.fp-meta-val code {
    font-family: var(--c-font-mono);
    font-size: 0.75rem;
    background: var(--c-elevated);
    border: 1px solid var(--c-border);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--c-accent-light);
}

/* Long path code — wraps cleanly */
.fp-path-code {
    font-size: 0.6875rem !important;
    word-break: break-all;
    display: block;
    line-height: 1.5;
}

/* File existence chips */
.fp-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.fp-file-chip--found {
    background: var(--c-success-dim);
    border: 1px solid var(--c-success-bdr);
    color: var(--c-success);
}

.fp-file-chip--missing {
    background: var(--c-elevated);
    border: 1px solid var(--c-border);
    color: var(--c-text-subtle);
}

.fp-meta-none {
    color: var(--c-text-subtle);
    font-family: var(--c-font-mono);
    font-size: 0.875rem;
}

/* Dependency sections */
.fp-dep-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-border-subtle);
}

.fp-dep-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fp-dep-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-subtle);
    margin-bottom: 0.5rem;
}

.fp-dep-count {
    color: var(--c-text-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.fp-dep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fp-dep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-family: var(--c-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.fp-dep-chip--module {
    background: var(--c-accent-dim);
    border-color: var(--c-accent-bdr);
    color: var(--c-accent-light);
}

.fp-dep-chip--req {
    background: rgba(var(--c-accent-rgb), 0.06);
    border-color: rgba(var(--c-accent-rgb), 0.15);
    color: var(--c-text-muted);
}

.fp-dep-chip--pyproject {
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text-muted);
}

.fp-dep-chip--optional {
    background: var(--c-purple-dim);
    border-color: rgba(167, 139, 250, 0.28);
    color: var(--c-purple);
}

.fp-dep-ver {
    opacity: 0.6;
    margin-left: 0.125rem;
}

.fp-dep-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 0.5rem;
    color: var(--c-text-subtle);
    font-size: 0.8125rem;
}

.fp-dep-empty i {
    font-size: 2rem;
    opacity: 0.4;
}

/* Errors card — red top border */
.fp-errors-card {
    border-top: 2px solid var(--tblr-danger, #d63939);
}

/* Light mode adjustments for admin components */
[data-bs-theme="light"] .fp-meta-val code {
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-accent);
}

[data-bs-theme="light"] .fp-status-strip {
    background: var(--c-elevated);
}
