/*
 * FlatSEO Admin Panel — Stylesheet
 * Plugin: FlatSEO for Flatboard 5
 *
 * Loaded via PluginAssetHelper::loadCss('flatseo', 'assets/css/admin.css')
 * through the view.header.styles hook.
 */

/* ==========================================================================
   Rank Tracker — CSS Bar Chart
   ========================================================================== */

.rt-chart-wrap {
    overflow-x: auto;
    padding-bottom: 4px;
}

.rt-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 180px;
    padding: 8px 0 32px;
}

.rt-bar-col {
    flex: 0 0 auto;
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.rt-bar-inner {
    width: 34px;
    border-radius: 3px 3px 0 0;
    position: relative;
    transition: height 0.35s ease;
    min-height: 4px;
    cursor: default;
}

.rt-bar-inner:hover {
    opacity: 0.82;
    transform: scaleY(1.04);
    transform-origin: bottom;
}

.rt-bar-tip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #212529;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.rt-bar-inner:hover .rt-bar-tip {
    opacity: 1;
}

.rt-bar-val {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.rt-bar-date {
    font-size: 0.62rem;
    color: #6c757d;
    text-align: center;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%) rotate(-35deg);
    transform-origin: top center;
    white-space: nowrap;
}

.rt-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    color: #6c757d;
    font-size: 0.9rem;
}

.rt-chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 148px;
    padding-right: 8px;
    font-size: 0.67rem;
    color: #6c757d;
    text-align: right;
    flex-shrink: 0;
}

.rt-chart-outer {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* ==========================================================================
   Rank Tracker — Engine Badges
   Always visible in both light and dark themes.
   ========================================================================== */

.rt-engine-badge {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    font-weight: 600;
    padding: 3px 7px;
}

.rt-engine-google     { background: #ea4335; color: #fff; }
.rt-engine-bing       { background: #0078d4; color: #fff; }
.rt-engine-duckduckgo { background: #de5833; color: #fff; }
.rt-engine-other      { background: #6f42c1; color: #fff; }

/* ==========================================================================
   SEO Audit — Table
   ========================================================================== */

/* SEO title override indicator shown below native title */
.audit-seo-title {
    font-size: 0.72rem;
    color: #0d6efd;
    font-style: italic;
    margin-top: 1px;
}

.audit-seo-title::before {
    content: "\2197 "; /* ↗ */
    font-style: normal;
}

/* ==========================================================================
   SEO Audit — Score Badges
   Solid background with guaranteed contrast — theme-independent.
   ========================================================================== */

.score-badge-success,
.score-badge-warning,
.score-badge-danger,
.score-badge-info,
.score-badge-secondary {
    font-size: 0.95rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-weight: 700;
    line-height: 1.4;
}

.score-badge-success   { background: #198754; color: #fff; }
.score-badge-warning   { background: #d97706; color: #fff; }
.score-badge-danger    { background: #dc3545; color: #fff; }
.score-badge-info      { background: #0dcaf0; color: #000; }
.score-badge-secondary { background: #6c757d; color: #fff; }

/* ==========================================================================
   SEO Audit — Summary Cards
   Solid border + subtle tinted background — readable in both themes.
   ========================================================================== */

.audit-card-total   { border: 2px solid #6c757d; background: rgba(108, 117, 125, 0.07); }
.audit-card-good    { border: 2px solid #198754; background: rgba(25, 135, 84, 0.07); }
.audit-card-ok      { border: 2px solid #d97706; background: rgba(217, 119, 6, 0.07); }
.audit-card-bad     { border: 2px solid #dc3545; background: rgba(220, 53, 69, 0.07); }
.audit-card-noindex { border: 2px solid #6f42c1; background: rgba(111, 66, 193, 0.07); }
.audit-card-avg     { border: 2px solid #0d6efd; background: rgba(13, 110, 253, 0.07); }

.audit-card-total   .audit-card-val { color: #495057; }
.audit-card-good    .audit-card-val { color: #146c43; }
.audit-card-ok      .audit-card-val { color: #92400e; }
.audit-card-bad     .audit-card-val { color: #b02a37; }
.audit-card-noindex .audit-card-val { color: #4e2d8a; }
.audit-card-avg     .audit-card-val { color: #084298; }

.audit-card-label {
    font-size: 0.75rem;
    font-weight: 600;
}

/* ==========================================================================
   Utility Classes — replaces all inline styles from admin.php
   ========================================================================== */

/* Inputs */
.flatseo-input-narrow  { max-width: 120px; }
.flatseo-search-input  { max-width: 200px; }

/* SEO title preview */
.seo-title-preview { font-size: 1.05em; line-height: 1.3; }

/* OG image preview */
.flatseo-og-preview { max-height: 120px; max-width: 300px; }

/* Social icon colours */
.flatseo-icon-facebook { color: #1877f2; }

/* robots.txt textarea */
.flatseo-robots-textarea { resize: vertical; font-size: 0.85em; }

/* Redirection table column widths */
.flatseo-col-60  { width: 60px; }
.flatseo-col-70  { width: 70px; }
.flatseo-col-80  { width: 80px; }

/* Audit table */
.flatseo-col-40pct { width: 40%; }

/* Truncation helpers */
.flatseo-truncate-180 { max-width: 180px; }
.flatseo-truncate-200 { max-width: 200px; }
.flatseo-truncate-220 { max-width: 220px; }
.audit-seo-title      { max-width: 360px; }

/* Progress bars */
.flatseo-progress-thin  { height: 4px; margin-top: 0.25rem; }
.flatseo-score-progress { width: 200px; height: 8px; }

/* Slug line in audit table */
.flatseo-slug-text { font-size: 0.75em; }

/* Dynamic icon colour — set via JS: el.style.color = el.dataset.color */
.flatseo-icon-dynamic { /* colour applied dynamically via data-color */ }