/**
 * TradeGenius Market Structure Screener — Styles
 * Enqueued by crypto-trading-strategy.php on pages containing [cts_screener]
 */

/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
    --cts-yellow:     #FFE000;
    --cts-navy:       #002B42;
    --cts-ink:        #1A1A1A;
    --cts-muted:      #6B7680;
    --cts-page:       #F6F6F6;
    --cts-card:       #FFFFFF;
    --cts-line:       #E4E7EA;
    --cts-near-bg:    rgba(255, 224, 0, 0.12);
    --cts-near-border:#ccb800;
    --cts-green:      #1F9D6B;
    --cts-red:        #C0492E;
    --cts-radius:     4px;
}

/* ─── Wrapper ───────────────────────────────────────────────────────────────── */
.cts-screener-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 36px 20px 64px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--cts-ink);
    background: var(--cts-page);
    box-sizing: border-box;
}

/* ─── Stale notice ──────────────────────────────────────────────────────────── */
.cts-stale-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ff9800;
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 18px;
    border-radius: var(--cts-radius);
}

/* ─── Header ────────────────────────────────────────────────────────────────── */
.cts-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--cts-navy);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    margin-top: 0;
    line-height: 1.2;
}

.cts-dateline {
    font-size: 13px;
    color: var(--cts-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* ─── Summary block ─────────────────────────────────────────────────────────── */
.cts-summary {
    background: var(--cts-card);
    border: 1px solid var(--cts-line);
    border-left: 4px solid var(--cts-yellow);
    padding: 16px 20px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cts-ink);
}

.cts-summary strong {
    color: var(--cts-navy);
    font-weight: 700;
}

.cts-count {
    display: inline-block;
    background: var(--cts-yellow);
    color: var(--cts-navy);
    font-weight: 700;
    padding: 0 7px;
    border-radius: 3px;
}

.cts-context {
    font-size: 13px;
    color: var(--cts-muted);
    margin-bottom: 28px;
    padding-left: 4px;
    line-height: 1.5;
}

/* ─── Table card ────────────────────────────────────────────────────────────── */
.cts-tablecard {
    background: var(--cts-card);
    border: 1px solid var(--cts-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 600px;
}

/* ─── Table head ────────────────────────────────────────────────────────────── */
.cts-table thead th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cts-muted);
    font-weight: 600;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--cts-line);
    white-space: nowrap;
    position: relative;
}

.cts-table thead th.col-price,
.cts-table thead th.col-change {
    text-align: right;
}

/* ─── Tooltip ───────────────────────────────────────────────────────────────── */
.cts-tip {
    display: inline-block;
    font-size: 12px;
    color: var(--cts-muted);
    cursor: help;
    position: relative;
    margin-left: 3px;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.15s;
    text-transform: none;
    letter-spacing: 0;
}

.cts-tip:hover {
    opacity: 1;
    color: var(--cts-navy);
}

/* Tooltip bubble (opens BELOW header to prevent clipping by table overflow) */
.cts-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cts-navy);
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 999;
    width: max-content;
    max-width: 210px;
    white-space: normal;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 43, 66, 0.25);
}

/* Tooltip arrow (pointing UP) */
.cts-tip::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--cts-navy);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 1000;
}

.cts-tip:hover::after,
.cts-tip:hover::before,
.cts-tip:focus::after,
.cts-tip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Align rightmost header tooltips leftward so they don't clip off container right edge */
.col-structure .cts-tip::after,
.col-change .cts-tip::after {
    left: auto;
    right: -10px;
    transform: none;
}
.col-structure .cts-tip::before,
.col-change .cts-tip::before {
    left: auto;
    right: 2px;
    transform: none;
}

/* ─── Table body ────────────────────────────────────────────────────────────── */
.cts-table tbody td {
    padding: 15px 14px;
    border-bottom: 1px solid var(--cts-line);
    vertical-align: middle;
}

.cts-table tbody tr:last-child td {
    border-bottom: none;
}

/* Near-edge row highlight */
.cts-table tbody tr.cts-near td {
    background: var(--cts-near-bg);
}

/* ─── Column: rank ──────────────────────────────────────────────────────────── */
.cts-table .col-rank {
    color: var(--cts-muted);
    font-size: 13px;
    width: 36px;
}

/* ─── Column: coin ──────────────────────────────────────────────────────────── */
.cts-table .col-coin {
    white-space: nowrap;
    width: 220px;
    max-width: 220px;
    box-sizing: border-box;
}

.cts-coin-cell-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    overflow: hidden;
}

/* Logo: 40px, circular — matches CoinGecko */
.cts-coin-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Coin text: name (large) stacked above ticker (small) */
.cts-coin-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

/* Name: primary, bold — like CoinGecko "Bitcoin" */
.cts-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--cts-navy);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Ticker: secondary, muted — like CoinGecko "BTC" */
.cts-ticker {
    font-size: 11px;
    font-weight: 500;
    color: var(--cts-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ─── Column: price ─────────────────────────────────────────────────────────── */
.cts-table .col-price {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
}

/* ─── Column: 24h change ────────────────────────────────────────────────────── */
.cts-table .col-change {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
    font-size: 13px;
}

.cts-table .col-change.cts-pos { color: var(--cts-green); }
.cts-table .col-change.cts-neg { color: var(--cts-red);   }

/* ─── Direction badge ───────────────────────────────────────────────────────── */
.cts-state {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--cts-line);
    border-radius: 3px;
    color: var(--cts-navy);
    background: var(--cts-page);
    white-space: nowrap;
}

/* Coloured direction variants */
.cts-dir-up    { background: rgba(31,157,107,0.10); color: #1F9D6B; border-color: rgba(31,157,107,0.30); }
.cts-dir-down  { background: rgba(192,73,46,0.10);  color: #C0492E; border-color: rgba(192,73,46,0.30); }
.cts-dir-range { background: var(--cts-page); color: var(--cts-muted); border-color: var(--cts-line); }

/* ─── 7-day range bar ───────────────────────────────────────────────────────── */
.cts-table .col-structure {
    width: 220px;
    min-width: 180px;
}

.cts-bar {
    position: relative;
    height: 12px;
    display: flex;
    align-items: center;
}

.cts-track {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--cts-line);
}

.cts-bar-flat {
    position: relative;
    height: 12px;
    display: flex;
    align-items: center;
}

.cts-track-flat {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--cts-line) 0 6px,
        transparent 6px 12px
    );
}

.cts-edge {
    position: absolute;
    top: -3px;
    height: 18px;
    width: 2px;
    background: var(--cts-navy);
}

.cts-edge-low  { left: 0; }
.cts-edge-high { right: 0; }

.cts-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cts-navy);
    transform: translateX(-50%);
    top: 1px;
}

.cts-dot-near {
    background: var(--cts-yellow);
    border: 2px solid var(--cts-navy);
    width: 12px;
    height: 12px;
    top: 0;
}

.cts-bar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cts-muted);
    margin-top: 7px;
}

.cts-near .cts-bar-label {
    color: var(--cts-navy);
}

/* ─── Column: action (Analyze coin button) ─────────────────────────────────── */
.cts-table .col-action {
    text-align: right;
    white-space: nowrap;
    padding-left: 12px;
}

/* ─── Analyze coin button ────────────────────────────────────────────────────── */
.cts-report-btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cts-navy) !important;
    background: var(--cts-yellow);
    padding: 8px 14px;
    border-radius: var(--cts-radius);
    text-decoration: none !important;
    transition: filter 0.15s ease, transform 0.1s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.cts-report-btn:hover,
.cts-report-btn:focus-visible {
    filter: brightness(0.90);
    transform: translateY(-1px);
    outline: none;
}

/* ─── Legend ─────────────────────────────────────────────────────────────────── */
.cts-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--cts-muted);
    margin: 18px 2px 0;
    align-items: center;
}

.cts-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cts-chip { display: inline-block; flex-shrink: 0; }

.cts-chip-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--cts-navy);
}

.cts-chip-near {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--cts-yellow);
    border: 2px solid var(--cts-navy);
}

.cts-chip-row {
    width: 14px; height: 9px;
    background: var(--cts-near-bg);
    border: 1px solid var(--cts-near-border);
    border-radius: 2px;
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.cts-footer {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--cts-line);
    font-size: 12px;
    color: var(--cts-muted);
    line-height: 1.7;
}

.cts-footer a {
    color: var(--cts-navy);
    font-weight: 600;
    text-decoration: none;
}

.cts-footer a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — clean horizontal table scroll below 760px
   Standard overflow-x table scroll without sticky positioning issues on iOS.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* ── Page ── */
    .cts-screener-wrap {
        padding: 16px 16px 48px;
        overflow-x: hidden;   /* stop page-level horizontal scroll: only .cts-tablecard scrolls */
    }
    .cts-title    { font-size: 20px; }
    .cts-summary  { font-size: 13px; padding: 12px 14px; }
    .cts-context  { font-size: 12px; }
    .cts-legend   { flex-direction: column; gap: 8px; align-items: flex-start; }
    .cts-footer   { margin-top: 24px; padding-top: 14px; }

    /* ── Table container: clean horizontal scroll on mobile ── */
    .cts-tablecard {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--cts-radius);
        margin: 12px 0;
    }

    /* ── Hide rank on mobile for cleaner layout ── */
    .cts-table .col-rank { display: none; }

    /* ── Sticky Coin column for Safari / Mobile ── */
    .cts-table th.col-coin,
    .cts-table td.col-coin {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 10;
        box-shadow: 3px 0 6px rgba(0, 43, 66, 0.08);
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .cts-table th.col-coin {
        background: var(--cts-page);
    }

    .cts-table td.col-coin {
        background: #ffffff;
    }

    .cts-table tbody tr.cts-near td.col-coin {
        background: #fffbcc;
    }


    /* ── Compact logo + text on mobile ── */
    .cts-coin-logo { width: 30px; height: 30px; }
    .cts-name      { font-size: 13px; }
    .cts-ticker    { font-size: 10px; }

    /* ── Compact button on mobile ── */
    .cts-report-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* ── Tooltips: open downward on mobile ── */
    .cts-tip::after {
        top: calc(100% + 8px); bottom: auto;
        white-space: normal; max-width: 180px;
    }
    .cts-tip::before {
        top: calc(100% + 2px); bottom: auto;
        border-top-color: transparent;
        border-bottom-color: var(--cts-navy);
    }
}

/* ─── Very small screens (< 380px) ──────────────────────────────────────── */
@media (max-width: 380px) {
    .cts-screener-wrap { padding: 12px 12px 36px; }
    .cts-coin-logo     { width: 26px; height: 26px; }
    .cts-name          { font-size: 12px; }
    .cts-ticker        { display: none; }
}