/* ── AI Positions — Frontend Styles ─────────────────────── */
/* @since 1.7.0 */

/* Container */
.ai-positions {
    margin: 40px 0;
    font-family: var(--font-main, 'Muller', sans-serif);
}
.ai-positions__title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 20px;
    line-height: 1.2;
    color: #111827;
}

/* ── Tabs ── */
.ai-positions__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 12px;
}
.ai-positions__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}
.ai-positions__tab:hover {
    background: rgba(255,255,255,0.6);
    color: #374151;
}
.ai-positions__tab--active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ai-positions__tab-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Panel ── */
.ai-positions__panel {
    display: none;
    padding-top: 24px;
}
.ai-positions__panel--active {
    display: block;
    animation: aipFadeIn 0.3s ease;
}
@keyframes aipFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Chart ── */
.ai-positions__chart-wrap {
    position: relative;
    height: 320px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

/* ── Table wrapper ── */
.ai-positions__table-wrap {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* ── Table ── */
.ai-positions__table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.3;
}
.ai-positions__table th,
.ai-positions__table td {
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}
.ai-positions__table th:last-child,
.ai-positions__table td:last-child {
    border-right: none;
}

/* Header — sticky */
.ai-positions__table thead th {
    background: #f9fafb;
    font-weight: 700;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 3;
    color: #374151;
}

/* Sticky columns */
.ai-positions__th-num,
.ai-positions__num {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f9fafb;
    width: 44px;
    color: #6b7280;
    font-weight: 600;
}
.ai-positions__num {
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

.ai-positions__th-kw,
.ai-positions__kw {
    position: sticky;
    left: 44px;
    z-index: 2;
    background: #f9fafb;
    text-align: left !important;
    min-width: 250px;
    font-weight: 700;
}
.ai-positions__kw {
    background: #fff;
    font-weight: 600;
    color: #111827;
}

/* Corner cells */
.ai-positions__table thead .ai-positions__th-num,
.ai-positions__table thead .ai-positions__th-kw {
    z-index: 4;
}

/* Shadow on frozen columns */
.ai-positions__th-kw::after,
.ai-positions__kw::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    width: 6px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
    pointer-events: none;
}

.ai-positions__col-date {
    min-width: 100px;
}

/* ── Position cells ── */
.ai-positions__pos {
    font-weight: 700;
    font-size: 15px;
    position: relative;
    transition: background 0.15s;
}
.ai-positions__pos--top1   { background: #93c5fd; color: #1e3a5f; }
.ai-positions__pos--top3   { background: #b4d9f1; color: #1a5276; }
.ai-positions__pos--top10  { background: #c8f0da; color: #145a32; }
.ai-positions__pos--top30  { background: #fef9e7; color: #7d6608; }
.ai-positions__pos--top50  { background: #fdf2f2; color: #922b21; }
.ai-positions__pos--low    { background: #f9fafb; color: #6b7280; }
.ai-positions__pos--empty  { background: #f7f7f7; color: #6b7280; }

/* Change overlays */
.ai-positions__pos--up                                     { background: #edf9f3 !important; }
.ai-positions__pos--top1.ai-positions__pos--up              { background: #7db8f5 !important; }
.ai-positions__pos--top3.ai-positions__pos--up              { background: #a3d1ee !important; }
.ai-positions__pos--top10.ai-positions__pos--up             { background: #b4f0d1 !important; }
.ai-positions__pos--down                                   { background: #fff4f3 !important; }
.ai-positions__pos--top1.ai-positions__pos--down            { background: #a8d4f7 !important; }
.ai-positions__pos--top3.ai-positions__pos--down            { background: #c4dff0 !important; }

/* Change indicator */
.ai-positions__change {
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1;
}
.ai-positions__change--up   { color: #059669; }
.ai-positions__change--down { color: #DC2626; }

.ai-positions__val {
    display: block;
    line-height: 1.2;
}

/* ── Footer stats ── */
.ai-positions__foot td {
    font-weight: 600;
    font-size: 13px;
    border-top: 1px solid #e5e7eb;
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.ai-positions__foot--top1 td  { background: #dbeafe; bottom: calc(2 * 2.2em); }
.ai-positions__foot--top3 td  { background: #e0f2fe; bottom: calc(1 * 2.2em); }
.ai-positions__foot--top10 td { background: #f0fdf4; bottom: 0; }

.ai-positions__foot-label {
    text-align: left !important;
    color: #374151;
    position: sticky;
    left: 0;
    z-index: 3;
}
.ai-positions__top10-count {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #059669;
}
.ai-positions__top10-pct {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 2px;
}

/* ── Row hover ── */
.ai-positions__table tbody tr:hover td {
    background: #f3f4f6;
}
.ai-positions__table tbody tr:hover .ai-positions__num,
.ai-positions__table tbody tr:hover .ai-positions__kw {
    background: #f3f4f6;
}
.ai-positions__table tbody tr:hover .ai-positions__pos--top1  { background: #7db8f5 !important; }
.ai-positions__table tbody tr:hover .ai-positions__pos--top3  { background: #a3d1ee !important; }
.ai-positions__table tbody tr:hover .ai-positions__pos--top10 { background: #b4f0d1 !important; }
.ai-positions__table tbody tr:hover .ai-positions__pos--top30 { background: #fef3c7 !important; }
.ai-positions__table tbody tr:hover .ai-positions__pos--up    { background: #d1fae5 !important; }
.ai-positions__table tbody tr:hover .ai-positions__pos--down  { background: #fee2e2 !important; }

/* ── Striped rows ── */
.ai-positions__table tbody tr:nth-child(even) td {
    background: #fafafa;
}
.ai-positions__table tbody tr:nth-child(even) .ai-positions__num,
.ai-positions__table tbody tr:nth-child(even) .ai-positions__kw {
    background: #fafafa;
}

/* ── Legend ── */
.ai-positions__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    font-size: 12px;
    color: #6b7280;
}
.ai-positions__legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ai-positions__legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #ddd;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .ai-positions__title { font-size: 22px; }
    .ai-positions__tabs { gap: 4px; padding: 3px; }
    .ai-positions__tab { padding: 8px 12px; font-size: 13px; }
    .ai-positions__chart-wrap { height: 260px; padding: 12px; }
    .ai-positions__table { font-size: 13px; }
    .ai-positions__table th,
    .ai-positions__table td { padding: 6px 8px; }
    .ai-positions__kw,
    .ai-positions__th-kw { min-width: 180px; }
    .ai-positions__pos { font-size: 13px; }
}
@media (max-width: 576px) {
    .ai-positions { margin: 24px 0; }
    .ai-positions__title { font-size: 18px; }
    .ai-positions__tabs { gap: 3px; border-radius: 8px; }
    .ai-positions__tab { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
    .ai-positions__chart-wrap { height: 220px; padding: 8px; margin-bottom: 16px; }
    .ai-positions__table { font-size: 12px; }
    .ai-positions__table th,
    .ai-positions__table td { padding: 4px 6px; }
    .ai-positions__kw,
    .ai-positions__th-kw { min-width: 140px; }
}