/* Organic Ranking Checker - tool-specific overrides on top of the shared
 * tool primitives in code/assets/css/tools.css.
 *
 * Cross-tool primitives (mode toggle, input form, primary/ghost button,
 * progress region, errors region, results region, table base, sortable
 * headers, pagination, toasts, history region, sticky chrome, upgrade
 * banner) live in tools.css. Only the bits genuinely specific to this
 * tool sit here:
 *
 *   1. Per-column widths on the results table (keyword / position / volume
 *      / CPC / competition / ranking URL / originating input).
 *   2. The Competition metric-badge family.
 *   3. Bulk-mode + URL-mode column visibility classes.
 */

/* ========================================================================
   Form layout - put the country dropdown alongside type select + submit
   ======================================================================== */
.input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}
.input-row .text-input {
    flex: 1 1 240px;
    min-width: 200px;
}
.input-row .type-select {
    flex: 0 0 auto;
    min-width: 0;
}
.input-row .primary-btn {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .input-row {
        gap: 8px;
    }
    .input-row .text-input {
        flex-basis: 100%;
    }
    .input-row .type-select {
        flex: 1 1 0;
    }
    .input-row .primary-btn {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ========================================================================
   Results table - per-column sizing.

   Three always-on columns from the get-domain-keywords / get-url-keywords
   response (Keyword, Position, Traffic) plus four enrichment columns
   (Volume, CPC, Competition, Trend) that load on demand via SVC.
   Domains/URLs is bulk-only.

   Width budget on a wide viewport totals roughly 100% so columns share
   space proportionally; min-widths keep things readable on narrower
   viewports where the wrap may scroll horizontally.
   ======================================================================== */
.results-table th[data-col="keyword"] {
    width: 22%;
    min-width: 200px;
    text-align: left;
}
.results-table th[data-col="position"] {
    width: 8%;
    min-width: 80px;
}
.results-table th[data-col="etv"] {
    width: 10%;
    min-width: 90px;
}
.results-table th[data-col="volume"] {
    width: 10%;
    min-width: 100px;
}
.results-table th[data-col="cpc"] {
    width: 8%;
    min-width: 80px;
}
.results-table th[data-col="competition"] {
    width: 12%;
    min-width: 110px;
}
.results-table th[data-col="trend"] {
    width: 18%;
    min-width: 160px;
}
.results-table th[data-col="query"] {
    width: 12%;
    min-width: 110px;
}

.results-table tbody td {
    padding-top: 16px;
    padding-bottom: 16px;
}

.results-table .td-keyword {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.1px;
}
.results-table .td-position {
    color: var(--ink);
    font-weight: 600;
    font-size: 15.5px;
    font-feature-settings: var(--tnum);
}
.results-table .td-etv {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    font-feature-settings: var(--tnum);
}
.results-table .td-volume {
    color: var(--ink);
    font-weight: 500;
    font-size: 15.5px;
    font-feature-settings: var(--tnum);
}
.results-table .td-cpc {
    color: var(--ink-700);
    font-weight: 500;
    font-size: 15.5px;
    font-feature-settings: var(--tnum);
}
/* Competition pill (matches SVC's family: low = good / green, high = bad
   / red, since less competition is better for the user). BLC's tool.css
   has its own `.metric-badge` family with the inverted mapping for
   domain-authority etc., so we deliberately keep this here per-tool
   instead of in shared `tools.css`. */
.metric-badge {
    display: inline-block;
    min-width: 64px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-feature-settings: var(--tnum);
    letter-spacing: 0.1px;
}
.metric-badge--low    { background: var(--good-bg); color: var(--good-fg); }
.metric-badge--medium { background: var(--mid-bg);  color: var(--mid-fg); }
.metric-badge--high   { background: var(--bad-bg);  color: var(--bad-fg); }
.metric-badge--muted  { background: var(--ink-100); color: var(--ink-400); }

.results-table .td-competition .metric-badge {
    font-size: 12px;
    padding: 4px 12px;
    min-width: 70px;
}
.results-table .td-trend {
    line-height: 0;  /* tighten row height around the inline SVG */
}

/* ========================================================================
   Conditional column visibility

   The "Domains/URLs" column is shown only in bulk mode; tool.js toggles
   `is-bulk` on `.results-region`.
   ======================================================================== */
.results-region.is-bulk .th-bulk,
.results-region.is-bulk td.td-bulk { display: table-cell; }
.th-bulk, td.td-bulk { display: none; }

/* ========================================================================
   Enrichment overlay

   Sits inside .results-table-wrap and covers the right portion where
   the four SVC-style columns (Volume / CPC / Competition / Trend) live.
   Soft fade from the table on the left side so users still see what's
   coming, with the call-to-action button anchored on the right.

   Only visible when results are loaded but not yet enriched. tool.js
   toggles the `hidden` attribute. In bulk mode the overlay leaves a
   sliver of room on the right for the Domains/URLs column.
   ======================================================================== */
.results-table-wrap {
    position: relative;
}
.enrich-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40%;
    right: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0)   0%,
        rgba(255, 255, 255, 0.92) 18%,
        rgba(255, 255, 255, 0.96) 100%
    );
    display: flex;
    /* Anchor the card to the top of the overlay (instead of vertically
       centering) so it's visible without scrolling on tall result sets.
       The sticky rule on .enrich-overlay-card below keeps it in view
       while the user scrolls through long tables. */
    align-items: flex-start;
    justify-content: center;
    z-index: 4;
    padding: 90px 24px 24px;
}
/* The class rules above set display:flex, which overrides the UA's
   default [hidden] { display: none } at lower specificity. Restore the
   hide behavior with a class+attribute selector that ties at the same
   specificity. Same pattern .upgrade-banner uses in tools.css. */
.enrich-overlay[hidden] {
    display: none;
}
.results-region.is-bulk .enrich-overlay {
    /* Leave room on the right for the Domains/URLs column in bulk mode. */
    right: 12%;
}
.enrich-overlay-card {
    max-width: 340px;
    text-align: center;
    /* Sits at the top of the overlay (via the parent's flex-start +
       padding-top) and scrolls with the page. We tried position:sticky
       so the card would track the user as they scrolled long result
       sets, but the sticky chrome (results-header + thead, with z-index
       higher than the overlay) clipped the top of the card on scroll-up
       at every threshold we tried. Plain in-flow positioning is the
       reliable choice; users who scroll down past the button can scroll
       back up to click it.

       The explicit white card with border + shadow keeps the message
       readable when it sits over the table's first row of data. */
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}
.enrich-overlay-text {
    margin: 0 0 14px;
    color: var(--ink-700);
    font-size: 14px;
    line-height: 1.45;
}
.enrich-cta {
    /* Inherits .primary-btn styling from shared tools.css */
    box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
    /* On narrow viewports the table wraps awkwardly; show the CTA full
       width so it stays usable instead of squeezing into the right
       portion. */
    .enrich-overlay {
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
    }
    .results-region.is-bulk .enrich-overlay {
        right: 0;
    }
}

/* ========================================================================
   Confirmation modal (paid users about to spend credits)
   ======================================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modal-backdrop-in 0.12s ease-out;
}
/* Same [hidden] override as .enrich-overlay: display:flex on the class
   beats the UA's [hidden] rule, so we have to match specificity to
   actually hide the modal. */
.modal-backdrop[hidden] {
    display: none;
}
@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    max-width: 460px;
    width: 100%;
    padding: 24px 28px;
    animation: modal-card-in 0.18s ease-out;
}
@keyframes modal-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}
.modal-body {
    margin: 0 0 20px;
    color: var(--ink-700);
    font-size: 14px;
    line-height: 1.5;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ========================================================================
   Sparkline + per-row trend tooltip (copied from SVC pattern)

   The sparkline is an inline SVG of red bars; tool.js renders one per
   row when the row has trend data. The full tooltip lives in a single
   floating .trend-tooltip element appended to <body> by tool.js, with
   per-row HTML carried via a base64-encoded `data-tip` attribute on
   each .sparkline (cheaper than rendering 12 trend rows in every cell).
   ======================================================================== */
.sparkline {
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}
.trend-tooltip {
    position: fixed;
    z-index: 1100;
    background: var(--ink);
    color: #fff;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    min-width: 160px;
    max-width: 240px;
    animation: trend-tip-in 0.12s ease-out;
}
@keyframes trend-tip-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.trend-tip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 2px 0;
    font-feature-settings: var(--tnum);
}
.trend-tip-month {
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}
.trend-tip-value {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}