/* SEO Map - styles layered on top of ../assets/style.css */

.nav-pill {
    padding: 4px 10px; border-radius: 4px; font-size: .7rem; font-weight: 600;
    color: var(--c); text-decoration: none;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    transition: .15s;
}
.nav-pill:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.nav-pill-active { box-shadow: inset 0 0 0 1px var(--c); }

.seo-layout { display: flex; min-height: calc(100vh - var(--topbar-height)); }
.seo-layout .content { flex: 1; padding: 20px 24px; overflow-x: hidden; }

/* market switch */
.market-switch { display: flex; gap: 4px; }
.market-btn {
    padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-secondary); font-size: .72rem; font-weight: 700;
    cursor: pointer; text-transform: uppercase; letter-spacing: .03em;
}
.market-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* sidebar */
.sidebar-uploads { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.uploads-list { display: flex; flex-direction: column; gap: 6px; }
.upload-chip {
    font-size: .68rem; padding: 6px 8px; border-radius: var(--radius-sm);
    background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary);
}
.upload-chip b { color: var(--text); }
.upload-chip .tag {
    display: inline-block; font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    margin-right: 4px; text-transform: uppercase;
}
.tag-gap { background: #ddd6fe; color: #6d28d9; }
.tag-positions { background: #cffafe; color: #0e7490; }

.comp-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
}
.comp-item:hover { background: var(--bg); }
.comp-item.active { background: var(--primary-light); border-color: var(--primary); }
.comp-item.is-own { font-weight: 700; }
.comp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.comp-name { flex: 1; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-count { font-size: .68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* metrics */
.metric-card .metric-sub { font-size: .65rem; color: var(--text-muted); margin-top: 2px; }
.own-domain-badge { font-size: .7rem; font-weight: 600; color: var(--text-muted); }

/* charts */
.charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 18px; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.chart-card canvas { max-height: 220px; }
@media (max-width: 1100px) { .charts-row { grid-template-columns: 1fr; } }

/* toolbar */
.seo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.seo-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.view-hint { font-size: .74rem; color: var(--text-secondary); margin-bottom: 10px; }

/* table */
#kw-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
#kw-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; }
#kw-table th.sorted-asc::after { content: " ▲"; color: var(--primary); }
#kw-table th.sorted-desc::after { content: " ▼"; color: var(--primary); }
#kw-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
#kw-table tbody tr:hover { background: var(--bg); }
.kw-cell { font-weight: 600; color: var(--text); max-width: 320px; }
.kw-cell a { color: var(--link); text-decoration: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-pill { display: inline-block; min-width: 22px; text-align: center; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.pos-1 { background: #dcfce7; color: #15803d; }      /* 1-3 */
.pos-2 { background: #fef9c3; color: #a16207; }      /* 4-10 */
.pos-3 { background: #fee2e2; color: #b91c1c; }      /* 11+ */
.pos-0 { background: var(--border-light); color: var(--text-muted); }
.intent-chip { font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-right: 3px; text-transform: capitalize; }
.in-Informational, .in-i { background: #dbeafe; color: #1d4ed8; }
.in-Commercial, .in-c { background: #fef3c7; color: #b45309; }
.in-Transactional, .in-t { background: #dcfce7; color: #15803d; }
.in-Navigational, .in-n { background: #f3e8ff; color: #7e22ce; }
.url-cell { max-width: 280px; font-size: .7rem; }
.url-cell a { color: var(--text-secondary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; white-space: nowrap; }
.url-cell a:hover { color: var(--link); }
.is-own-col { background: #eef2ff; }
#kw-table th.is-own-col { color: #6366f1; }
.muted { color: var(--text-muted); }
.small { font-size: .68rem; }

/* empty */
.seo-empty { text-align: center; padding: 80px 20px; color: var(--text-secondary); }
.seo-empty h2 { color: var(--text); margin-bottom: 8px; }
.seo-empty p { margin-bottom: 16px; }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--surface); border-radius: var(--radius); width: 560px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-md); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 1rem; }
.modal-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-muted); }
.dropzone { margin: 20px; padding: 32px; border: 2px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--text-secondary); transition: .15s; }
.dropzone.drag { border-color: var(--primary); background: var(--primary-light); }
.dropzone .small { margin-top: 10px; }
.upload-queue { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.queue-item { display: flex; align-items: center; gap: 10px; font-size: .76rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.queue-item .spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.queue-item.ok { border-color: #86efac; background: #f0fdf4; }
.queue-item.err { border-color: #fca5a5; background: #fef2f2; }
.queue-meta { color: var(--text-muted); font-size: .68rem; }

/* --- Suggested Articles --- */
.sug-row { cursor: pointer; }
.sug-row:hover { background: var(--bg-hover, #f6f8fa); }
.sug-toggle { display: inline-block; width: 12px; color: var(--text-muted); font-size: .7rem; }
.sug-badge { font-size: .6rem; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }
.sug-badge.new { background: #dcfce7; color: #166534; }
.sug-badge.cov { background: #fef3c7; color: #92400e; }
.sug-detail-box { padding: 10px 14px 14px 26px; background: var(--bg-soft, #f9fafb); border-left: 2px solid var(--primary, #58a6ff); }
.sug-section { margin-top: 8px; }
.sug-label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 5px; }
.sug-kws { display: flex; flex-wrap: wrap; gap: 5px; }
.sug-kw { font-size: .7rem; background: #eef2ff; color: #3730a3; padding: 2px 8px; border-radius: 6px; }
.sug-kw.is-cov { background: #fef3c7; color: #92400e; text-decoration: line-through; opacity: .8; }
.sug-refs { display: flex; flex-direction: column; gap: 3px; }
.sug-refs a { font-size: .72rem; color: var(--primary, #2563eb); }

.sug-comps { white-space: normal; line-height: 1.7; }
.sug-comp { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; margin-right: 10px; color: var(--text, #1f2937); }
.sug-comp .cdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.sug-comp b { font-weight: 600; color: var(--text-muted); font-size: .66rem; }