/* Domain Authority Checker - tool-specific styles 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, debug
 * panel, upgrade banner, cell-xlink) live in tools.css. Only the bits
 * genuinely specific to this tool sit here:
 *
 *   1. Per-column widths on the 9-column results table.
 *   2. DA badge tiers (0-30 muted / 31-60 medium / 61+ strong).
 *   3. Spam-score badge tiers (0-30 good / 31-60 warn / 61+ bad).
 *   4. DA Trend inline-SVG sparkline + floating tooltip primitive.
 *   5. Daily lookup quota chip (free / anonymous only).
 *   6. The shared modal styles (lifted from WTC).
 */

/* ========================================================================
   Form layout - single input + submit, no country / type select since
   DAC only takes domains.
   ======================================================================== */
.input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}
.input-row .text-input {
    flex: 1 1 320px;
    min-width: 240px;
}
.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 .primary-btn {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ========================================================================
   Daily lookup quota chip (free / anonymous only). Single-chip variant
   of SVC's three-chip pattern. The shared `.quota-region` wrapper is
   styled the same way as `.results-region`; we lift the chip styling
   itself from SVC since it isn't yet in shared tools.css.
   ======================================================================== */
.quota-region {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.quota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.quota-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-500);
}
.quota-upgrade {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-red);
}
.quota-chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.quota-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
}
.quota-chip-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-500);
}
.quota-chip-text {
    font-feature-settings: var(--tnum);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.quota-chip-bar {
    display: block;
    height: 4px;
    background: var(--ink-200);
    border-radius: 999px;
    overflow: hidden;
}
.quota-chip-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
    transition: width 0.4s ease;
}
.quota-chip.is-warning .quota-chip-fill { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); }
.quota-chip.is-danger  .quota-chip-fill { background: linear-gradient(90deg, var(--bad-fg) 0%, #ef4444 100%); }
.quota-chip.is-warning .quota-chip-text { color: #b45309; }
.quota-chip.is-danger  .quota-chip-text { color: var(--bad-fg); }

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

   Nine columns. Big-number metrics (Total Backlinks, Followed Backlinks)
   can run into the tens of billions on top domains, so they need more
   horizontal room than the DA / Spam columns.
   ======================================================================== */
.results-table th[data-col="domain"] {
    width: 22%;
    min-width: 200px;
    text-align: left;
}
.results-table th[data-col="domain_authority"] {
    width: 6%;
    min-width: 64px;
}
.results-table th[data-col="da_trend"] {
    width: 11%;
    min-width: 110px;
    text-align: center;
}
.results-table th[data-col="linking_domains_total"],
.results-table th[data-col="linking_domains_followed"] {
    width: 11%;
    min-width: 110px;
}
.results-table th[data-col="backlinks_total"],
.results-table th[data-col="backlinks_followed"] {
    width: 11%;
    min-width: 120px;
}
.results-table th[data-col="link_propensity"] {
    width: 9%;
    min-width: 96px;
}
.results-table th[data-col="spam_score"] {
    width: 8%;
    min-width: 80px;
}

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

.results-table .td-domain {
    color: var(--ink);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.1px;
    word-break: break-all;
}
.results-table .td-domain .resolved-line {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-500);
    margin-top: 2px;
}

.results-table .td-domain_authority,
.results-table .td-linking_domains_total,
.results-table .td-linking_domains_followed,
.results-table .td-backlinks_total,
.results-table .td-backlinks_followed,
.results-table .td-link_propensity,
.results-table .td-spam_score {
    color: var(--ink);
    font-weight: 600;
    font-feature-settings: var(--tnum);
    text-align: right;
}
.results-table .td-domain_authority {
    font-size: 17px;
    font-weight: 700;
}
.results-table .td-no-data {
    color: var(--ink-400);
    font-weight: 500;
}
.results-table .td-da_trend {
    text-align: center;
}

/* DA tier badge: 0-30 muted, 31-60 medium, 61+ strong. Worn as
   background color behind the number. */
.da-badge {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-width: 44px;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-feature-settings: var(--tnum);
    font-size: 15px;
    font-weight: 700;
}
.da-badge--low    { background: var(--ink-100); color: var(--ink-700); }
.da-badge--medium { background: rgba(56, 130, 220, 0.14); color: rgb(36, 92, 168); }
.da-badge--high   { background: rgba(22, 163, 74, 0.16);  color: rgb(15, 109, 49); }

/* Spam tier badge: 0-30 good, 31-60 medium, 61+ bad. */
.spam-badge {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-width: 38px;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-feature-settings: var(--tnum);
    font-size: 14px;
    font-weight: 600;
}
.spam-badge--good   { background: rgba(22, 163, 74, 0.14); color: rgb(15, 109, 49); }
.spam-badge--medium { background: rgba(217, 119, 6, 0.16); color: rgb(146, 64, 14); }
.spam-badge--bad    { background: rgba(220, 38, 38, 0.16); color: rgb(159, 18, 18); }

/* ========================================================================
   DA Trend sparkline

   Per-row inline SVG. 90x24. Polyline + last-point dot. Each SVG must
   have a unique gradient id (we suffix with the row index) per the
   project's SVG-chart-gotchas memory.
   ======================================================================== */
.da-sparkline {
    display: inline-block;
    width: 90px;
    height: 24px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 3px;
    transition: background 0.12s ease;
}
.da-sparkline:hover,
.da-sparkline:focus {
    background: rgba(56, 130, 220, 0.07);
    outline: none;
}
.da-sparkline-line {
    fill: none;
    stroke: rgb(56, 130, 220);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.da-sparkline-area {
    fill: rgba(56, 130, 220, 0.10);
}
.da-sparkline-dot {
    fill: rgb(36, 92, 168);
}

/* Floating tooltip shared across the table. One element on body,
   repositioned per cell on hover. */
.trend-tooltip {
    position: fixed;
    z-index: 99999;
    background: #1f2937;
    color: #fff;
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    max-width: 280px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.trend-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.trend-tooltip strong {
    color: #f8fafc;
    font-weight: 700;
}
.trend-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 4px;
}
.trend-tooltip-row .k { color: rgba(255, 255, 255, 0.7); }
.trend-tooltip-row .v { color: #fff; font-feature-settings: var(--tnum); font-weight: 600; }

/* Modal chrome (.modal-backdrop, .modal-card, .modal-card--wide,
   .modal-title, .modal-body, .modal-actions, .invalid-list) lives in
   shared code/assets/css/tools.css. DAC's invalid-inputs modal AND
   the DA-trend zoom modal use those primitives directly. */

.primary-btn:disabled,
.primary-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================================================
   DA Trend zoom modal - large version of the sparkline rendered with
   axis labels + hover-readout. Reuses the shared `.modal-backdrop` +
   `.modal-card--wide` chrome.
   ======================================================================== */
.da-trend-modal-chart {
    position: relative;
    margin: 0 0 18px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    padding: 16px;
    overflow: hidden;
}
.da-trend-modal-chart svg.da-trend-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
}

/* Inner SVG primitives. */
.da-trend-chart-grid {
    stroke: var(--ink-200);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    fill: none;
}
.da-trend-chart-axis-text {
    fill: var(--ink-500);
    font-size: 10.5px;
    font-feature-settings: var(--tnum);
}
.da-trend-chart-area {
    fill: rgba(56, 130, 220, 0.12);
}
.da-trend-chart-line {
    fill: none;
    stroke: rgb(56, 130, 220);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.da-trend-chart-dot {
    fill: rgb(36, 92, 168);
}
.da-trend-chart-dot--min { fill: rgb(217, 119, 6); }
.da-trend-chart-dot--max { fill: rgb(22, 163, 74); }
.da-trend-chart-hover-line {
    stroke: var(--ink-400);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    visibility: hidden;
}
.da-trend-chart-hover-dot {
    fill: rgb(36, 92, 168);
    stroke: #fff;
    stroke-width: 2;
    visibility: hidden;
}
.da-trend-chart-overlay {
    fill: transparent;
    cursor: crosshair;
}

/* Floating HTML tooltip that tracks the chart pointer. */
.da-trend-chart-tooltip {
    position: absolute;
    z-index: 5;
    background: #1f2937;
    color: #fff;
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    font-feature-settings: var(--tnum);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-8px);
    transition: opacity 0.1s ease;
}
.da-trend-chart-tooltip.is-visible { opacity: 1; }

/* Summary row: First / Last / Min / Max. */
.da-trend-modal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 600px) {
    .da-trend-modal-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
.da-trend-modal-stats-item {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.da-trend-modal-stats-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-500);
}
.da-trend-modal-stats-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    font-feature-settings: var(--tnum);
}
.da-trend-modal-stats-sub {
    font-size: 11.5px;
    color: var(--ink-500);
    font-feature-settings: var(--tnum);
}