/*
 * TamRank — SEO Audit stijlen
 * Variabelen komen uit variables.css (geladen via tamrank-admin-global dependency).
 * Definieer hier geen nieuwe variabelen. Gebruik uitsluitend var(--tr-*).
 */

/* ============================================
   PAGE STRUCTURE & HEADER
   ============================================ */

/* Layout via .tr-page-wrap in tamrank-admin-global.css */

.tr-audit-title {
    font-size: var(--tr-text-xl);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    margin: 0;
    letter-spacing: -0.02em;
}

.tr-audit-subtitle {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-1) 0 var(--tr-space-4) 0;
}

/* Tab navigation & panels: uses shared .tr-pill-nav + .tr-pill + .tr-tab-panel from common/tabs.css */
.tr-page-wrap--narrow > .tr-pill-nav {
    margin-bottom: var(--tr-space-5);
}

/* ============================================
   CARDS
   ============================================ */

.tr-card {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    padding: var(--tr-space-6);
}

.tr-card--lg {
    padding: var(--tr-space-8);
}

.tr-card--bg-green {
    background: var(--tr-color-primary-light);
}

.tr-card--bg-amber {
    background: var(--tr-color-warning-light);
}

.tr-card--bg-red {
    background: var(--tr-color-error-light);
}

/* ============================================
   SCAN BANNER (idle state)
   ============================================ */

.tr-scan-banner {
    background: var(--tr-color-primary-light);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-5) var(--tr-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-4);
    margin-bottom: var(--tr-space-5);
    flex-wrap: wrap;
}

.tr-scan-banner > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-scan-banner__label {
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-primary);
}

.tr-scan-banner__meta {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
}

/* ============================================
   PROGRESS BANNER (during scan)
   ============================================ */

.tr-progress-banner {
    background: var(--tr-color-primary-light);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-4) var(--tr-space-5);
    margin-bottom: var(--tr-space-5);
}

.tr-progress-banner__label {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-primary);
    margin-bottom: var(--tr-space-3);
}

.tr-progress-row {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
}

.tr-progress-bar-wrap {
    flex: 1;
    background: var(--tr-color-slate-200);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.tr-progress-bar-fill {
    background: var(--tr-color-primary);
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tr-progress-count {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-900);
    white-space: nowrap;
}

.tr-progress-status {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
}

@keyframes tr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.tr-icon-spin {
    animation: tr-spin 1.2s linear infinite;
}

.tr-info-banner {
    background: var(--tr-color-surface);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-3) var(--tr-space-4);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
}

/* ============================================
   STATS BAR
   ============================================ */

.tr-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tr-space-4);
    margin-bottom: var(--tr-space-5);
}

.tr-stat-card {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    padding: var(--tr-space-6);
}

.tr-stat-card__label {
    font-size: 11px;
    font-weight: var(--tr-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tr-color-slate-400);
    margin: 0 0 var(--tr-space-4) 0;
}

.tr-stat-card__value {
    font-size: var(--tr-text-3xl);
    font-weight: var(--tr-font-extrabold);
    display: flex;
    align-items: baseline;
    gap: var(--tr-space-1);
    margin: 0 0 var(--tr-space-4) 0;
    line-height: 1;
}

.tr-stat-card__value--green {
    color: var(--tr-color-status-excellent);
}

.tr-stat-card__value--teal {
    color: var(--tr-color-status-good);
}

.tr-stat-card__value--amber {
    color: var(--tr-color-status-attention);
}

.tr-stat-card__value--red {
    color: var(--tr-color-status-improve);
}

.tr-stat-card__status {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    margin-left: var(--tr-space-1);
}

.tr-stat-card__status--green  { color: var(--tr-color-status-excellent); }
.tr-stat-card__status--teal   { color: var(--tr-color-status-good); }
.tr-stat-card__status--amber  { color: var(--tr-color-status-attention); }
.tr-stat-card__status--red    { color: var(--tr-color-status-improve); }

.tr-stat-card__check {
    font-size: var(--tr-text-lg);
    color: var(--tr-color-status-excellent);
    margin-left: var(--tr-space-1);
}

.tr-stat-card__desc {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-400);
    margin: 0;
}

.tr-score-bar-wrap {
    background: var(--tr-color-slate-200);
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--tr-space-4);
}

.tr-score-bar-fill {
    background: var(--tr-color-primary);
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ============================================
   PROBLEMS GRID
   ============================================ */

.tr-problems-section {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    padding: var(--tr-space-6);
    margin-bottom: var(--tr-space-5);
}

.tr-problems-title {
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    margin: 0 0 var(--tr-space-5) 0;
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
}

.tr-problems-title svg {
    color: var(--tr-color-status-attention);
}

.tr-problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tr-space-4);
}

.tr-problem-item {
    background: var(--tr-color-warning-light);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-4) var(--tr-space-5);
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
}

.tr-problem-item svg {
    color: var(--tr-color-status-attention);
    flex-shrink: 0;
}

.tr-problem-item__text {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-800);
    font-weight: var(--tr-font-medium);
}

/* ============================================
   AUDIT TABLE
   ============================================ */

.tr-table-card {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    overflow: hidden;
}

.tr-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tr-space-4) var(--tr-space-6);
    border-bottom: 1px solid var(--tr-color-slate-200);
    flex-wrap: wrap;
    gap: var(--tr-space-3);
}

.tr-filter-pills {
    display: flex;
    gap: 6px;
}

.tr-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    background: var(--tr-color-surface);
    color: var(--tr-color-slate-500);
    border-radius: var(--tr-radius-full);
    padding: var(--tr-space-2) var(--tr-space-4);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    font-family: var(--tr-font-family);
    border: none;
    cursor: pointer;
    transition: all var(--tr-transition-base);
}

.tr-pill:hover {
    background: var(--tr-color-slate-200);
    color: var(--tr-color-slate-700);
}

.tr-pill.is-active {
    background: var(--tr-color-slate-800);
    color: var(--tr-color-white);
}

.tr-audit-table {
    width: 100%;
    border-collapse: collapse;
}

/*
 * Fixed layout for the main audit table so expanding a detail row never
 * reflows the column widths. With table-layout: auto the hidden
 * .tr-expand-row (colspan=7) widened the table's min-content on open,
 * squeezing the score cells until "bar + %" wrapped onto two lines.
 * Explicit col widths + fixed layout pin the columns regardless of row
 * content; the title column absorbs the remaining space.
 */
.tr-audit-table--fixed {
    table-layout: fixed;
}

.tr-audit-table--fixed .tr-col-title { width: auto; }
.tr-audit-table--fixed .tr-col-score { width: 90px; }
/* 140px = 32px celpadding + 38px getal (.tr-metric__value) + 8px gap + 60px
   balk. Op 130px paste "balk + getal" niet binnen de padding en liep het
   percentage het kolompad in; dat las als een rafelige rechterrand. */
.tr-audit-table--fixed .tr-col-meta { width: 140px; }
.tr-audit-table--fixed .tr-col-content { width: 140px; }
/* 110px wordt hier door de kop gezet, niet door de cijfers: "PAGESPEED" meet
   75px in de th-stijl, dus met 32px celpadding houdt deze kolom maar 3px over.
   De cellen zelf (een score van 54px, meestal een streepje) passen ruim. Hier
   valt dus niets weg te halen, hoe leeg de kolom er ook uitziet. */
.tr-audit-table--fixed .tr-col-pagespeed { width: 110px; }
/* 90px = 32px celpadding + 55px kop "SCHEMA" + 3px marge. De breedste cel is
   "✓ Active" (50px, Engels) en past daar ruim binnen. Stond op 120px en had
   33px dood; die ruimte is naar de actiekolom hiernaast gegaan. */
.tr-audit-table--fixed .tr-col-schema { width: 90px; }
/* 168px = 32px celpadding + 133px breedste knop + 3px marge. Breedst is niet
   het Nederlandse "Bekijken" met bolletje (104px) maar de ongelicentieerde
   PRO-knop in het Duits: "Anzeigen" plus de PRO-tag, 132px. Op 120px liep die
   44px over en at de knop zijn eigen rechterpadding op, waardoor hij tegen de
   rechter kaartrand plakte. */
.tr-audit-table--fixed .tr-col-action { width: 168px; }

/* Keep "bar + %" and score dots on a single line in every state. */
.tr-audit-table--fixed tbody td {
    white-space: nowrap;
}

.tr-audit-table thead th {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tr-color-slate-500);
    padding: var(--tr-space-3) var(--tr-space-4);
    border-bottom: 1px solid var(--tr-color-slate-200);
    text-align: left;
    white-space: nowrap;
}

.tr-audit-table tbody tr {
    border-bottom: 1px solid var(--tr-color-slate-200);
}

.tr-audit-table tbody tr.tr-row--alt {
    background: var(--tr-color-base);
}

.tr-audit-table tbody tr.is-expanded {
    background: var(--tr-color-primary-light);
    border-left: 2px solid var(--tr-color-primary);
}

.tr-audit-table tbody tr.is-selected {
    background: var(--tr-color-primary-light);
}

.tr-audit-table tbody td {
    padding: var(--tr-space-2) var(--tr-space-4);
    font-size: var(--tr-text-sm);
    vertical-align: middle;
}

.tr-row-title {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-900);
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-row-type-badge {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-400);
    display: block;
    margin-top: 2px;
}

/* ============================================
   METRIEK-CEL — getal eerst, beeld erna

   Elke cel in de cijferkolommen (Score, Meta, Inhoud, PageSpeed) volgt
   dezelfde regel: het getal staat vooraan en de visuele codering (balk of
   bol) komt erachter. Daardoor begint de waarde op exact dezelfde x als de
   kolomkop erboven. Daarvoor stond de balk vooraan en dreef het getal 80px
   van zijn kop af; de kop labelde toen de balk in plaats van de waarde.

   min-width past "100%" (36,06px gemeten op 13px Plus Jakarta Sans), zodat
   de balken op elke rij op dezelfde x beginnen. tabular-nums houdt de
   cijferbreedte gelijk tussen 6% en 90%.
   ============================================ */

.tr-metric {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
}

.tr-metric__value {
    min-width: 38px;
    font-variant-numeric: tabular-nums;
}

/* Score dot */
.tr-score-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.tr-score-dot--green {
    background: var(--tr-color-status-excellent);
}

.tr-score-dot--teal {
    background: var(--tr-color-status-good);
}

.tr-score-dot--amber {
    background: var(--tr-color-status-attention);
}

.tr-score-dot--red {
    background: var(--tr-color-status-improve);
}

/* Mini bars */
.tr-mini-bar-wrap {
    /* 60px in plaats van 80px: het getal staat nu vooraan in de cel en
       claimt 38px, dus de balk krijgt wat er binnen de 140px-kolom overblijft. */
    width: 60px;
    height: 6px;
    background: var(--tr-color-slate-200);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.tr-mini-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tr-mini-bar-fill--green {
    background: var(--tr-color-status-excellent);
}

.tr-mini-bar-fill--teal {
    background: var(--tr-color-status-good);
}

.tr-mini-bar-fill--amber {
    background: var(--tr-color-status-attention);
}

.tr-mini-bar-fill--red {
    background: var(--tr-color-status-improve);
}

.tr-schema-active {
    /* inline-flex met gap in plaats van het vinkteken tegen het woord aan:
       "✓Actief" stond zonder ruimte en las als één woord. */
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-primary);
}

.tr-keyword-pill {
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
}

.tr-dash-placeholder {
    color: var(--tr-color-slate-400);
}

.tr-bekijk-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tr-color-surface);
    border: none;
    border-radius: var(--tr-radius-md);
    padding: 6px 12px;
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-700);
    cursor: pointer;
    transition: all var(--tr-transition-fast);
}

/*
 * WordPress admin paints its own focus ring / link colour (blue, or green in
 * some admin colour schemes) on <button>/<a> focus. Pin every interactive
 * state to brand slate and drop the WP box-shadow/outline so the View toggle
 * stays on-brand regardless of the user's admin colour scheme.
 */
.tr-bekijk-btn:hover,
.tr-bekijk-btn:focus,
.tr-bekijk-btn:active {
    background: var(--tr-color-slate-200);
    color: var(--tr-color-slate-900);
    box-shadow: none;
    outline: none;
}

.tr-bekijk-btn .tr-expand-arrow {
    transition: transform var(--tr-transition-fast);
}

.tr-bekijk-btn.is-expanded .tr-expand-arrow {
    transform: rotate(180deg);
}

.tr-bekijk-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tr-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tr-status-dot--green {
    background: var(--tr-color-status-excellent);
}

.tr-status-dot--teal {
    background: var(--tr-color-status-good);
}

.tr-status-dot--amber {
    background: var(--tr-color-status-attention);
}

.tr-status-dot--red {
    background: var(--tr-color-status-improve);
}

.tr-status-dot--hidden {
    visibility: hidden;
}

/* ============================================
   INLINE EXPAND
   ============================================ */

.tr-expand-row td {
    padding: 0 !important;
}

.tr-expand-block {
    background: var(--tr-color-base);
}

.tr-expand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.tr-expand-section {
    background: var(--tr-color-white);
    border-right: 1px solid var(--tr-color-slate-200);
    overflow: hidden;
}

.tr-expand-section:last-child {
    border-right: none;
}

.tr-expand-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--tr-color-slate-200);
}

.tr-expand-section__header--green {
    background: rgba(16, 185, 129, 0.08);
}

.tr-expand-section__header--teal {
    background: rgba(20, 184, 166, 0.08);
}

.tr-expand-section__header--amber {
    background: rgba(245, 158, 11, 0.08);
}

.tr-expand-section__header--red {
    background: rgba(244, 63, 94, 0.08);
}

.tr-expand-section__header--neutral {
    background: rgba(148, 163, 184, 0.06);
}

.tr-expand-section__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tr-space-3);
    padding: 14px;
    background: var(--tr-color-white);
}

.tr-expand-section__title {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.tr-expand-section__score--green {
    color: var(--tr-color-status-excellent);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
}

.tr-expand-section__score--teal {
    color: var(--tr-color-status-good);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
}

.tr-expand-section__score--amber {
    color: var(--tr-color-status-attention);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
}

.tr-expand-section__score--red {
    color: var(--tr-color-status-improve);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
}

.tr-expand-section__score--neutral {
    color: var(--tr-color-slate-400);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
}

.tr-expand-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--tr-radius-sm);
    font-size: 11px;
    font-weight: var(--tr-font-medium);
}

.tr-expand-badge--green {
    background: var(--tr-color-primary-light);
    color: var(--tr-color-primary);
}

.tr-expand-badge--amber {
    background: var(--tr-color-warning-light);
    color: var(--tr-color-warning);
}

.tr-expand-issues {
    list-style: none;
    margin: var(--tr-space-3) 0 0 0;
    padding: 0;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
}

.tr-expand-issues li {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-2);
    padding: var(--tr-space-2) 0;
    border-bottom: 1px solid var(--tr-color-slate-100);
    line-height: var(--tr-leading-normal);
}

.tr-expand-issues li:last-child {
    border-bottom: none;
}

.tr-expand-issues .tr-icon-error {
    color: var(--tr-color-error);
    flex-shrink: 0;
}

.tr-expand-issues .tr-icon-warning {
    color: var(--tr-color-warning);
    flex-shrink: 0;
}

.tr-schema-pill {
    display: inline-block;
    background: var(--tr-color-primary-light);
    color: var(--tr-color-primary);
    border-radius: var(--tr-radius-sm);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--tr-font-medium);
}

/*
 * These are <a> tags, so WordPress admin's link colours (blue text, themed
 * hover — green in some admin colour schemes) win over a bare .tr-expand-btn
 * rule. Scope under .tr-expand-block and pin every link state to brand slate
 * so the buttons stay on-brand regardless of the user's admin colour scheme.
 */
.tr-expand-block .tr-expand-btn,
.tr-expand-block .tr-expand-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    background: var(--tr-color-surface);
    border: none;
    border-radius: var(--tr-radius-sm);
    padding: 5px 10px;
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-700);
    cursor: pointer;
    transition: all var(--tr-transition-fast);
    text-decoration: none;
    box-shadow: none;
}

.tr-expand-block .tr-expand-btn:hover,
.tr-expand-block .tr-expand-btn:focus,
.tr-expand-block .tr-expand-btn:active {
    background: var(--tr-color-slate-200);
    color: var(--tr-color-slate-900);
    box-shadow: none;
    outline: none;
}

/* ============================================
   BULK META TAB
   ============================================ */

.tr-card-title {
    margin: 0 0 4px 0;
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.tr-bulk-header-card {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    padding: var(--tr-space-6);
    margin-bottom: var(--tr-space-5);
}

.tr-bulk-filters {
    display: flex;
    gap: var(--tr-space-3);
    padding: var(--tr-space-4) 0;
}

/* High specificity to override WP admin forms.css */
.tr-page-wrap .tr-bulk-filters select.tr-bulk-filter,
.tr-page-wrap .tr-bulk-filters select.tr-bulk-filter[id] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 36px 8px 14px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 130px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    outline: none !important;
    margin: 0 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tr-page-wrap .tr-bulk-filters select.tr-bulk-filter:hover {
    border-color: #94a3b8 !important;
}

.tr-page-wrap .tr-bulk-filters select.tr-bulk-filter:focus {
    outline: none !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.tr-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tr-space-4) 0;
    flex-wrap: wrap;
    gap: var(--tr-space-3);
}

.tr-selection-bar__left {
    display: flex;
    align-items: center;
    gap: var(--tr-space-4);
}

.tr-selection-bar__label {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
    cursor: pointer;
}

.tr-selection-bar__count {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-400);
}

.tr-selection-bar__right {
    display: flex;
    gap: var(--tr-space-3);
}

/* De vinkjes van de Bulk Meta Editor gebruiken .tr-check uit
   tamrank-admin-global.css. Hier stond een eigen groene skin gescoped op
   .tr-audit-wrap; die klasse staat in geen enkele PHP- of JS-markup van FREE
   of PRO, dus het hele blok was onbereikbaar en core's blauwe vinkje won.
   Weggehaald in plaats van gerepareerd: een tweede skin vol !important zou
   .tr-check overschrijven zodra iemand die wrapper alsnog toevoegt. */

/* .tr-btn-outline → verplaatst naar common/buttons.css (BEM: .tr-btn--primary) */

.tr-page-wrap input.tr-meta-input,
.tr-page-wrap input.tr-meta-input[type="text"] {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    resize: none;
    transition: border-color 0.15s;
    box-sizing: border-box !important;
    height: 36px !important;
    line-height: 1.4 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none !important;
    outline: none !important;
}

.tr-page-wrap input.tr-meta-input:focus {
    outline: none !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.tr-page-wrap input.tr-meta-input.is-empty {
    border-color: #f43f5e !important;
}

.tr-page-wrap input.tr-meta-input.is-good {
    border-color: #10b981 !important;
}

.tr-page-wrap input.tr-meta-input.is-long {
    border-color: #f59e0b !important;
}

.tr-char-counter {
    font-size: 11px;
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-400);
    text-align: right;
    margin-top: 2px;
}

.tr-char-counter.is-empty {
    color: var(--tr-color-status-improve);
}

.tr-char-counter.is-good {
    color: var(--tr-color-status-excellent);
}

.tr-char-counter.is-long {
    color: var(--tr-color-status-attention);
}

.tr-meta-cell {
    position: relative;
}

.tr-bulk-score {
    font-weight: var(--tr-font-semibold);
    text-align: right;
}

.tr-bulk-footer {
    position: sticky;
    bottom: 0;
    background: var(--tr-color-white);
    border-top: 1px solid var(--tr-color-slate-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tr-space-4) var(--tr-space-6);
    z-index: var(--tr-z-sticky);
}

.tr-bulk-footer__count {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-400);
}

/* AI Progress Overlay */
.tr-ai-progress-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.tr-ai-progress-overlay.is-visible {
    display: flex;
}

.tr-ai-progress-card {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-lg, 0 8px 30px rgba(0,0,0,.12));
    padding: var(--tr-space-8) var(--tr-space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tr-space-3);
    min-width: 280px;
}

.tr-ai-progress-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--tr-color-slate-200);
    border-top-color: var(--tr-color-primary);
    border-radius: 50%;
    animation: tr-spin 0.7s linear infinite;
}

@keyframes tr-spin {
    to { transform: rotate(360deg); }
}

.tr-ai-progress-label {
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-800);
}

.tr-ai-progress-text {
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    font-variant-numeric: tabular-nums;
}

.tr-ai-progress-track {
    width: 100%;
    height: 6px;
    background: var(--tr-color-slate-200);
    border-radius: 3px;
    overflow: hidden;
    margin-top: var(--tr-space-1);
}

.tr-ai-progress-bar {
    height: 100%;
    width: 0;
    background: var(--tr-color-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ============================================
   TOOLS TAB
   ============================================ */

.tr-scan-action-card {
    background: var(--tr-color-white);
    border-left: none;
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    padding: var(--tr-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-4);
    margin-bottom: var(--tr-space-5);
    flex-wrap: wrap;
}

.tr-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tr-space-4);
    margin-bottom: var(--tr-space-5);
}

/* PRO-upsell variant of a Tools card (FREE shows this where PRO renders the
   active "Generate Report" card). Same card shape, quiet small "View PRO" link. */
.tr-card--pro-locked .tr-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tr-card--pro-locked .tr-upsell-link {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: var(--tr-btn-height-sm);
}

/* Equal-height Tools cards with the CTA pinned to the bottom, so the CSV
   button and the PRO-upsell link line up on the same baseline. */
.tr-tools-grid .tr-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.tr-tools-grid .tr-card .tr-btn,
.tr-tools-grid .tr-card .tr-upsell-link {
    margin-top: auto;
}

/* Quiet per-row PRO-upsell link in the audit overview Actions column (FREE
   fallback where PRO would render the per-post detail toggle). */
.tr-row-upsell,
.tr-row-upsell:visited {
    font-size: 12px;
    font-weight: 600;
    color: var(--tr-color-primary);
    text-decoration: none;
    white-space: nowrap;
}
.tr-row-upsell:hover,
.tr-row-upsell:focus {
    color: var(--tr-color-primary-hover);
    text-decoration: underline;
}

.tr-danger-separator {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    margin-bottom: var(--tr-space-5);
}

.tr-danger-separator::before,
.tr-danger-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tr-color-slate-200);
}

.tr-danger-separator__label {
    font-size: 11px;
    font-weight: var(--tr-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tr-color-slate-400);
    white-space: nowrap;
}

.tr-danger-card {
    background: var(--tr-color-error-light);
    border-left: none;
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-4);
    flex-wrap: wrap;
}

.tr-danger-card__title {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-error);
    margin: 0 0 var(--tr-space-1) 0;
}

.tr-danger-card__desc {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    margin: 0;
}

/* ============================================
   BUTTONS — verplaatst naar common/buttons.css
   (BEM: .tr-btn--primary, .tr-btn--ghost, .tr-btn--destructive)
   ============================================ */

/* ============================================
   TOAST
   ============================================ */

.tr-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--tr-color-slate-900);
    color: var(--tr-color-white);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-3) var(--tr-space-5);
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--tr-transition-base);
    z-index: var(--tr-z-toast);
    pointer-events: none;
    box-shadow: var(--tr-shadow-lg);
}

.tr-toast.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.tr-toast--success {
    background: var(--tr-color-primary);
}

.tr-toast--error {
    background: var(--tr-color-error);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .tr-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-expand-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-tools-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tr-stats-bar {
        grid-template-columns: 1fr;
    }

    .tr-problems-grid {
        grid-template-columns: 1fr;
    }

    .tr-expand-grid {
        grid-template-columns: 1fr;
    }

    .tr-audit-table {
        font-size: var(--tr-text-xs);
    }

    .tr-table-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   TOOLBAR ACTIONS GROUP
   ============================================ */

.tr-table-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    flex-shrink: 0;
}

/* ============================================
   EXCLUSION PANEL
   ============================================ */

.tr-exclusion-badge {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    font-weight: var(--tr-font-medium);
    margin-left: var(--tr-space-1);
}

.tr-exclusion-panel {
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-5);
    margin-bottom: var(--tr-space-4);
}

.tr-exclusion-panel__header h4 {
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    margin: 0 0 var(--tr-space-4) 0;
}

.tr-exclusion-panel__desc {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin: 0 0 var(--tr-space-4) 0;
}

/* Branded checkbox — hide native input, paint a green-filled visual box.
   Matches the onboarding wizard + topical authority pattern so the panel
   reads as TamRank rather than the default WP-admin blue checkbox skin. */
.tr-exclusion-panel .tr-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tr-exclusion-panel .tr-check-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--tr-color-slate-300);
    background: var(--tr-color-white);
    position: relative;
    transition: border-color 150ms ease, background 150ms ease;
}

.tr-exclusion-panel .tr-check-box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--tr-color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 150ms ease-out;
}

.tr-exclusion-panel .tr-check:checked + .tr-check-box {
    border-color: var(--tr-color-primary);
    background: var(--tr-color-primary);
}

.tr-exclusion-panel .tr-check:checked + .tr-check-box::after {
    transform: rotate(45deg) scale(1);
}

.tr-exclusion-panel .tr-check:focus-visible + .tr-check-box {
    outline: 2px solid var(--tr-color-primary);
    outline-offset: 2px;
}

.tr-exclusion-toggle .tr-check-box {
    margin-top: 1px;
}

/* Single setting row (auto-exclude noindex) */
.tr-exclusion-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-3);
    padding: var(--tr-space-3);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-md);
    cursor: pointer;
    transition: border-color var(--tr-transition-fast), background var(--tr-transition-fast);
}

.tr-exclusion-toggle:hover {
    background: var(--tr-color-slate-50);
}

.tr-exclusion-toggle input[type="checkbox"] {
    accent-color: var(--tr-color-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.tr-exclusion-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-exclusion-toggle__title {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-800);
}

.tr-exclusion-toggle__hint {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
}

/* Sections */
.tr-exclusion-section {
    margin-top: var(--tr-space-5);
}

.tr-exclusion-section__label {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tr-color-slate-500);
    margin: 0 0 var(--tr-space-2) 0;
}

/* Taxonomy checkbox grid */
.tr-exclusion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px var(--tr-space-3);
}

.tr-exclusion-check {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    padding: var(--tr-space-2);
    border-radius: var(--tr-radius-sm);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
    cursor: pointer;
    transition: background var(--tr-transition-fast);
}

.tr-exclusion-check:hover {
    background: var(--tr-color-slate-50);
}

.tr-exclusion-check input[type="checkbox"] {
    accent-color: var(--tr-color-primary);
    flex-shrink: 0;
}

.tr-exclusion-check span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-exclusion-search {
    margin-bottom: var(--tr-space-2);
}

.tr-exclusion-search .tr-input {
    width: 100%;
    height: var(--tr-input-height);
    padding: 0 var(--tr-space-3);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-md);
    font-size: var(--tr-text-sm);
    font-family: var(--tr-font-family);
    color: var(--tr-color-slate-900);
    background: var(--tr-color-white);
    transition: border-color var(--tr-transition-fast);
    box-sizing: border-box;
}

.tr-exclusion-search .tr-input:focus {
    outline: none;
    border-color: var(--tr-color-primary);
    box-shadow: var(--tr-shadow-focus);
}

.tr-exclusion-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-2);
    margin-bottom: var(--tr-space-4);
}

.tr-exclusion-item {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    padding: var(--tr-space-2);
    border-radius: var(--tr-radius-sm);
    cursor: pointer;
    font-size: var(--tr-text-sm);
    transition: background var(--tr-transition-fast);
}

.tr-exclusion-item:hover {
    background: var(--tr-color-slate-50);
}

.tr-exclusion-item input[type="checkbox"] {
    accent-color: var(--tr-color-primary);
    flex-shrink: 0;
}

.tr-exclusion-item__title {
    flex: 1;
    color: var(--tr-color-slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-exclusion-item__type {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.tr-exclusion-panel__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--tr-space-4);
    padding-top: var(--tr-space-4);
    border-top: 1px solid var(--tr-color-slate-100);
}

/* ==========================================================================
   Orphan pages — ignore / restore (B2)
   ========================================================================== */

/*
 * [hidden] on a <tr> is display:none per the HTML spec, but a stray
 * `tr { display: table-row }` anywhere in the admin cascade beats the UA
 * sheet. Pin it, otherwise ignored rows stay on screen.
 */
.tr-audit-table tr[hidden] {
    display: none;
}

.tr-orphan-row__actions {
    display: flex;
    gap: var(--tr-space-2);
    align-items: center;
    white-space: nowrap;
}

/* Revealed ignored rows read as parked, not as findings. */
.tr-orphan-row.is-ignored td {
    opacity: 0.55;
}

/*
 * Same inset as a table row on all four sides. With no padding-top the text
 * sat 2px under the last row's divider while every row above it centres its
 * content ~16px clear of one, so the line read as glued to the row above
 * instead of as the list's own footer.
 */
.tr-orphans-ignored-line {
    padding: var(--tr-space-4);
    margin: 0;
}

.tr-orphans-toggle-ignored {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--tr-color-primary);
    cursor: pointer;
    text-decoration: underline;
}

.tr-orphans-toggle-ignored:hover,
.tr-orphans-toggle-ignored:focus-visible {
    color: var(--tr-color-slate-800);
}
