@import "variables.css";

/* ==============================
   Marketplace-specific styles
   ============================== */

/* Footer extras */
footer .footer-links {
    display: flex;
    gap: var(--space-4);
    margin-left: var(--space-6);
}
footer .footer-links a {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
footer .footer-links a:hover { color: var(--text-primary); }

/* Plugin grid (extends articles cards) */
.plugin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.plugin-card {
    display: flex !important;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    color: inherit;
    text-decoration: none;
    gap: var(--space-3);
}
.plugin-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
    color: inherit;
}

.plugin-card-head {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.plugin-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}
.plugin-icon img {
    width: 100%; height: 100%; object-fit: cover;
}

.plugin-card-title {
    flex: 1;
    min-width: 0;
}
.plugin-card-title h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin: 0 0 2px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plugin-card-title small {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.plugin-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    flex: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plugin-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}
.plugin-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.plugin-meta .rating { color: var(--warning); letter-spacing: 1px; }
.plugin-meta .cat {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
    margin-left: auto;
}

/* Trust badges */
.badge-trust {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid var(--border);
}
.badge-trust.badge-reviewed   { color: var(--success); border-color: var(--success-0t5); background: var(--success-light); }
.badge-trust.badge-community  { color: var(--accent); border-color: var(--accent-0t5); background: var(--accent-0t1); }
.badge-trust.badge-unverified { color: var(--text-muted); }

/* Status badges */
.badge.badge-pending  { color: var(--warning); background: var(--warning-light); }
.badge.badge-approved { color: var(--success); background: var(--success-light); }
.badge.badge-rejected { color: var(--danger);  background: var(--danger-light); }
.badge.badge-disabled { color: var(--text-muted); background: var(--bg-tertiary); }

/* Features strip on home */
.features-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    padding: var(--space-12) 0;
    margin-top: var(--space-10);
    border-top: 1px solid var(--border);
}
.features-strip .feature {
    text-align: left;
    color: var(--text-muted);
}
.features-strip .feature h3 {
    font-size: var(--text-base);
    color: var(--text-primary);
    margin: var(--space-2) 0;
}
.features-strip .feature iconify-icon {
    color: var(--accent);
}

/* Browse filters */
.browse-filters {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.search-bar {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}
.search-bar iconify-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.search-bar input {
    flex: 1;
    border: none;
    padding: 0;
    background: transparent;
    font-size: var(--text-base);
}
.search-bar input:focus { outline: none; border: none; }
.search-bar .btn { white-space: nowrap; }

.filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.filter-row select {
    min-width: 160px;
    width: auto;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}
.pagination .page-info {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Plugin detail page */
.plugin-detail-hero {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-8);
}
.plugin-detail-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-secondary);
}
.plugin-detail-icon img { width: 100%; height: 100%; object-fit: cover; }
.plugin-detail-meta h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.plugin-detail-meta .lede { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-3); }
.plugin-detail-info {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.plugin-detail-info span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.plugin-detail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
    min-width: 220px;
}
.plugin-detail-actions .btn { justify-content: center; }

.plugin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-10);
}
.plugin-readme h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}
.plugin-readme h2:first-child { margin-top: 0; }
.plugin-readme pre {
    background: var(--bg-tertiary);
    padding: var(--space-4);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: var(--text-sm);
}
.plugin-readme code {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xs);
    font-size: 0.9em;
}
.plugin-readme pre code { padding: 0; background: transparent; }

.plugin-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.sidebar-block {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.sidebar-block h4 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    font-weight: var(--font-semibold);
}
.version-info { display: flex; flex-direction: column; gap: 4px; }
.version-info small { color: var(--text-muted); }

.perm-list, .version-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.perm-list li {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.version-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-light);
}
.version-list li:last-child { border-bottom: 0; }
.version-list li small { color: var(--text-muted); margin-left: auto; }

/* Auth */
.auth-card {
    max-width: 420px;
    margin: var(--space-12) auto;
    padding: var(--space-8);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.auth-card h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.auth-form .btn { margin-top: var(--space-3); }
.auth-alt {
    margin-top: var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}
.auth-alt a { color: var(--text-primary); text-decoration: underline; }

/* Alerts */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.alert-success { background: var(--success-light); color: var(--success); border: 1px solid var(--success-0t2); }
.alert-danger  { background: var(--danger-light);  color: var(--danger);  border: 1px solid var(--danger-0t2); }

/* Form card */
.form-card {
    padding: var(--space-6);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}
.form-card h2 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}
.form-card form { display: flex; flex-direction: column; gap: var(--space-3); }
.form-card .btn { align-self: flex-start; margin-top: var(--space-2); }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
.dashboard-table table {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Admin */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.stat-card {
    padding: var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.stat-card h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-1);
}
.stat-card span {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-card.warn h3   { color: var(--warning); }
.stat-card.ok h3     { color: var(--success); }
.stat-card.danger h3 { color: var(--danger); }

.admin-nav {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-5);
    overflow-x: auto;
}
.admin-nav a {
    padding: var(--space-3) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.admin-nav a:hover { color: var(--text-primary); }
.admin-nav a.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

/* Yanked row */
tr.yanked { opacity: 0.5; }

/* Docs */
.docs-content { max-width: 760px; }
.docs-content h2 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.docs-content h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); font-size: var(--text-base); }
.docs-content pre {
    background: var(--bg-tertiary);
    padding: var(--space-4);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.docs-content code {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xs);
    font-size: 0.9em;
}
.docs-content pre code { padding: 0; background: transparent; }

/* Responsive */
@media (max-width: 1024px) {
    .plugin-grid              { grid-template-columns: repeat(2, 1fr); }
    .features-strip           { grid-template-columns: 1fr; }
    .plugin-detail-grid       { grid-template-columns: 1fr; }
    .plugin-detail-hero       { grid-template-columns: 1fr; text-align: left; }
    .plugin-detail-actions    { min-width: 0; }
    .admin-stats              { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .grid-2  { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .plugin-grid     { grid-template-columns: 1fr; }
    .admin-stats     { grid-template-columns: 1fr 1fr; }
    .filter-row      { flex-direction: column; align-items: stretch; }
}