/* ============================================
   TamRank Redirect Manager Page
   ============================================ */
/* variables.css komt binnen via de tamrank-variables-late dependency (zie register_common_styles). */

/* ─── Page Layout ──────────────────────────── */

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

.tr-redir-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tr-space-6);
    flex-wrap: wrap;
    gap: var(--tr-space-4);
}

.tr-redir-page-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-redir-page-subtitle {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-1) 0 0 0;
}

.tr-redir-page-subtitle .tr-redir-limit-count {
    color: var(--tr-color-slate-400);
}

/* ─── Limit Notices ────────────────────────── */

.tr-redir-notice {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    padding: var(--tr-space-3) var(--tr-space-4);
    border-radius: var(--tr-radius-lg);
    margin-bottom: var(--tr-space-4);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
}

.tr-redir-notice--warning {
    background: var(--tr-color-warning-bg);
    border: 1px solid var(--tr-color-warning-light);
    color: var(--tr-color-slate-700);
}

.tr-redir-notice--error {
    background: var(--tr-color-error-bg);
    border: 1px solid var(--tr-color-error-light);
    color: var(--tr-color-slate-700);
}

.tr-redir-notice--success {
    background: var(--tr-color-success-bg);
    border: 1px solid var(--tr-color-success-light);
    color: var(--tr-color-slate-700);
}

.tr-redir-notice a {
    color: var(--tr-color-primary);
    font-weight: var(--tr-font-semibold);
    text-decoration: none;
}

.tr-redir-notice a:hover {
    text-decoration: underline;
}

/* ─── Import / Export ──────────────────────── */

.tr-redir-ie-wrap {
    position: relative;
}

.tr-redir-ie-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--tr-space-2));
    right: 0;
    min-width: 380px;
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-lg);
    border: 1px solid var(--tr-color-surface);
    padding: var(--tr-space-4);
    z-index: var(--tr-z-dropdown);
}

.tr-redir-ie-dropdown.is-open {
    display: block;
}

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

.tr-redir-csv-code {
    display: block;
    background: var(--tr-color-slate-800);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-3) var(--tr-space-4);
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-400);
    margin: 0 0 var(--tr-space-4) 0;
    overflow-x: auto;
    white-space: nowrap;
    word-break: keep-all;
}

.tr-redir-ie-actions {
    display: flex;
    gap: var(--tr-space-2);
    flex-wrap: nowrap;
}

.tr-redir-ie-btn {
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-2) var(--tr-space-3);
    cursor: pointer;
    transition: all var(--tr-transition-base);
    border: 1.5px solid var(--tr-color-surface);
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    text-decoration: none;
    line-height: 1;
}

.tr-redir-ie-btn--secondary {
    background: var(--tr-color-white);
    color: var(--tr-color-slate-700);
}

.tr-redir-ie-btn--secondary:hover {
    background: var(--tr-color-base);
    color: var(--tr-color-slate-800);
}

.tr-redir-ie-btn--primary {
    background: var(--tr-color-primary);
    color: var(--tr-color-white);
    border-color: var(--tr-color-primary);
}

.tr-redir-ie-btn--primary:hover {
    background: var(--tr-color-primary-hover);
}

.tr-redir-import-filename {
    margin-top: var(--tr-space-3);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    display: none;
    align-items: center;
    gap: var(--tr-space-2);
}

.tr-redir-import-filename.is-visible {
    display: flex;
}

.tr-redir-import-result {
    display: none;
    margin-top: var(--tr-space-3);
    padding: var(--tr-space-3) var(--tr-space-4);
    border-radius: var(--tr-radius-md);
    font-size: var(--tr-text-sm);
}

.tr-redir-import-result.is-visible {
    display: block;
}

.tr-redir-import-result--success {
    background: var(--tr-color-success-bg);
    border: 1px solid var(--tr-color-success-light);
    color: var(--tr-color-slate-700);
}

.tr-redir-import-result--error {
    background: var(--tr-color-error-bg);
    border: 1px solid var(--tr-color-error-light);
    color: var(--tr-color-slate-700);
}

/* ─── Add Redirect Form ────────────────────── */

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

.tr-redir-add-title {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-800);
    margin: 0 0 var(--tr-space-3) 0;
}

.tr-redir-add-row {
    display: flex;
    align-items: flex-end;
    gap: var(--tr-space-3);
}

.tr-redir-add-field {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-1);
}

.tr-redir-add-field--from {
    flex: 2;
}

.tr-redir-add-field--to {
    flex: 3.5;
}

.tr-redir-add-field--type {
    width: 100px;
    flex-shrink: 0;
    position: relative;
}

.tr-redir-add-label {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--tr-space-1);
}

.tr-redir-add-input {
    font-family: var(--tr-font-family) !important;
    font-size: 14px !important;
    color: var(--tr-color-slate-800) !important;
    background: var(--tr-color-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--tr-radius-lg) !important;
    padding: 9px var(--tr-space-3) !important;
    width: 100% !important;
    box-sizing: border-box;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--tr-transition-fast), box-shadow var(--tr-transition-fast);
    -webkit-appearance: none;
    appearance: none;
    min-height: unset;
    height: auto;
    line-height: var(--tr-leading-normal);
}

.tr-redir-add-input:focus {
    border-color: var(--tr-color-primary) !important;
    box-shadow: var(--tr-shadow-focus) !important;
}

.tr-redir-add-input::placeholder {
    color: var(--tr-color-slate-400);
}

.tr-redir-add-hint {
    font-size: 11px;
    color: var(--tr-color-slate-400);
    margin: var(--tr-space-2) 0 0 0;
}

/* Redirect type select */
.tr-redir-type-select {
    font-family: var(--tr-font-family) !important;
    font-size: 14px !important;
    font-weight: var(--tr-font-semibold) !important;
    color: var(--tr-color-slate-800) !important;
    background: var(--tr-color-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--tr-radius-lg) !important;
    padding: 0 28px 0 12px !important;
    width: 100% !important;
    box-sizing: border-box;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: none !important;
    transition: border-color var(--tr-transition-fast), box-shadow var(--tr-transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-height: unset !important;
    height: 41px !important;
    line-height: 39px;
    margin: 0 !important;
}

.tr-redir-type-select:focus {
    border-color: var(--tr-color-primary) !important;
    box-shadow: var(--tr-shadow-focus) !important;
}

/* Type tooltip: migrated to canonical .tr-tooltip component. */

/* ─── Section Header with Filter Pills ─────── */

.tr-redir-section-header {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    padding: var(--tr-space-4) var(--tr-space-5);
    flex-wrap: wrap;
}

.tr-redir-section-title {
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-800);
    margin: 0;
}

.tr-redir-count-pill {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-500);
    background: var(--tr-color-base);
    border: 1px solid var(--tr-color-surface);
    border-radius: var(--tr-radius-full);
    padding: 2px 10px;
}

/* Filter pills: uses shared .tr-pill-nav + .tr-pill from common/tabs.css */
.tr-redir-section-header .tr-pill-nav {
    margin-left: var(--tr-space-1);
}

.tr-redir-section-actions {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    margin-left: auto;
}

/* Search */
.tr-redir-search-wrap {
    position: relative;
}

.tr-redir-search-input {
    font-family: var(--tr-font-family) !important;
    font-size: var(--tr-text-sm) !important;
    color: var(--tr-color-slate-800) !important;
    background: var(--tr-color-white) !important;
    border: 1px solid var(--tr-color-slate-200) !important;
    border-radius: var(--tr-radius-lg) !important;
    padding: 9px var(--tr-space-4) 9px var(--tr-space-10) !important;
    width: 200px;
    outline: none !important;
    transition: border-color var(--tr-transition-fast), box-shadow var(--tr-transition-fast);
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: unset !important;
    height: auto !important;
    line-height: var(--tr-leading-normal) !important;
    box-shadow: none !important;
}

.tr-redir-search-input::placeholder {
    color: var(--tr-color-slate-400) !important;
}

.tr-redir-search-input:focus {
    border-color: var(--tr-color-primary) !important;
    box-shadow: var(--tr-shadow-focus) !important;
}

.tr-redir-search-icon {
    position: absolute;
    left: var(--tr-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tr-color-slate-400);
    pointer-events: none;
}

/* ─── Redirects Table ──────────────────────── */

.tr-redir-table-wrap {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--tr-space-5);
}

.tr-redir-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tr-font-family);
}

.tr-redir-table thead th {
    background: var(--tr-color-base);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 11px var(--tr-space-4);
    text-align: left;
    border-bottom: 1px solid var(--tr-color-surface);
    white-space: nowrap;
}

.tr-redir-table thead th.tr-th-center {
    text-align: center;
}

.tr-redir-table tbody tr {
    border-bottom: 1px solid var(--tr-color-slate-100);
    transition: background var(--tr-transition-fast);
}

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

.tr-redir-table tbody tr:hover {
    background: var(--tr-color-slate-100);
}

.tr-redir-table tbody tr.is-inactive {
    opacity: 0.6;
}

.tr-redir-table td {
    padding: 13px var(--tr-space-4);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    vertical-align: middle;
}

/* From URL cell. Flex, because the value chip is an overflow:hidden
   inline-block: its baseline is its bottom edge, so anything set beside it
   would sit a line too low on plain inline alignment. */
.tr-redir-from-cell {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
}

.tr-redir-url-code {
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-800);
    background: var(--tr-color-slate-100);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-sm);
    padding: var(--tr-space-1) var(--tr-space-2);
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Source badge */
.tr-redir-source-badge {
    font-size: 10px;
    font-weight: var(--tr-font-bold);
    border-radius: var(--tr-radius-sm);
    padding: 1px 6px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tr-redir-source-badge--auto {
    color: var(--tr-color-info);
    background: var(--tr-color-info-bg);
}

/* Brought in by the setup wizard from another SEO plugin. Warning amber, so it
   reads as its own thing next to Auto (info) and Manual (neutral) instead of
   as a third shade of grey. */
.tr-redir-source-badge--import {
    color: var(--tr-color-warning);
    background: var(--tr-color-warning-bg);
}

.tr-redir-source-badge--manual {
    color: var(--tr-color-slate-500);
    background: var(--tr-color-slate-100);
}

/* To URL link */
.tr-redir-to-link {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-primary);
    text-decoration: none;
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-redir-to-link:hover {
    text-decoration: underline;
    color: var(--tr-color-primary-hover);
}

/* Type badge */
.tr-redir-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--tr-font-bold);
    border-radius: var(--tr-radius-full);
    padding: 3px 10px;
}

.tr-redir-type-badge--301 {
    color: var(--tr-color-success);
    background: var(--tr-color-success-bg);
}

.tr-redir-type-badge--302 {
    color: var(--tr-color-warning);
    background: var(--tr-color-warning-bg);
}

.tr-redir-type-badge--307 {
    color: var(--tr-color-info);
    background: var(--tr-color-info-bg);
}

.tr-redir-type-badge--410 {
    color: var(--tr-color-error);
    background: var(--tr-color-error-bg);
}

/* 451 shares the 410 colours: both are "this page is not coming back",
   just with a different reason. A badge without a rule falls back to bare
   text and reads as a bug. */
.tr-redir-type-badge--451 {
    color: var(--tr-color-error);
    background: var(--tr-color-error-bg);
}

/* Status toggle */
.tr-redir-status {
    display: flex;
    align-items: center;
    gap: var(--tr-space-1);
}

.tr-redir-status-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--tr-radius-full);
    flex-shrink: 0;
}

.tr-redir-status-dot--active {
    background: var(--tr-color-success);
}

.tr-redir-status-dot--inactive {
    background: var(--tr-color-slate-300);
}

.tr-redir-status-label {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-500);
}

/* Chain status */
.tr-redir-chain-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    padding: var(--tr-space-1) var(--tr-space-2);
    border-radius: var(--tr-radius-full);
    font-size: 11px;
    font-weight: var(--tr-font-semibold);
}

.tr-redir-chain-badge--ok {
    color: var(--tr-color-success);
    background: var(--tr-color-success-bg);
}

.tr-redir-chain-badge--chain {
    color: var(--tr-color-warning);
    background: var(--tr-color-warning-bg);
}

.tr-redir-chain-badge--loop {
    color: var(--tr-color-error);
    background: var(--tr-color-error-bg);
}

/* Action buttons in table */
.tr-redir-actions {
    display: flex;
    align-items: center;
    gap: var(--tr-space-1);
    justify-content: center;
}

.tr-redir-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: none;
    border-radius: var(--tr-radius-md);
    cursor: pointer;
    transition: all var(--tr-transition-base);
    line-height: 1;
}

.tr-redir-action-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.tr-redir-action-btn--toggle-active {
    background: var(--tr-color-warning);
}

.tr-redir-action-btn--toggle-active:hover {
    background: var(--tr-color-warning-hover);
    transform: translateY(-1px);
}

.tr-redir-action-btn--toggle-inactive {
    background: var(--tr-color-primary);
}

.tr-redir-action-btn--toggle-inactive:hover {
    background: var(--tr-color-primary-hover);
    transform: translateY(-1px);
}

.tr-redir-action-btn--delete {
    background: var(--tr-color-error);
}

.tr-redir-action-btn--delete:hover {
    background: var(--tr-color-error-hover);
    transform: translateY(-1px);
}

.tr-redir-action-btn--edit {
    background: var(--tr-color-slate-600, #475569);
}

.tr-redir-action-btn--edit:hover {
    background: var(--tr-color-slate-700, #334155);
    transform: translateY(-1px);
}

.tr-redir-action-btn--chain {
    background: var(--tr-color-info);
}

.tr-redir-action-btn--chain:hover {
    background: var(--tr-color-info-hover);
    transform: translateY(-1px);
}

.tr-redir-action-btn--hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Empty table state */
.tr-redir-empty-table {
    padding: var(--tr-space-12);
    text-align: center;
    color: var(--tr-color-slate-400);
    font-size: var(--tr-text-sm);
}

.tr-redir-empty-table svg {
    color: var(--tr-color-slate-300);
    margin-bottom: var(--tr-space-2);
}

.tr-redir-empty-table p {
    margin: 0;
}

.tr-redir-empty-table .tr-redir-empty-table__hint {
    margin-top: var(--tr-space-1);
    color: var(--tr-color-slate-500);
}

/* ─── AI Suggestions Card ──────────────────── */

.tr-redir-suggestions-card {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--tr-space-5);
    position: relative;
}

.tr-redir-suggestions-header {
    display: flex;
    align-items: center;
    padding: var(--tr-space-4) var(--tr-space-5);
    border-bottom: 1px solid var(--tr-color-surface);
    gap: var(--tr-space-3);
}

.tr-redir-suggestions-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--tr-radius-md);
    background: var(--tr-color-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tr-color-primary);
}

.tr-redir-suggestions-info {
    flex: 1;
}

.tr-redir-suggestions-title {
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-800);
    margin: 0 0 2px 0;
}

.tr-redir-suggestions-desc {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    margin: 0;
}

.tr-redir-suggestions-counts {
    display: flex;
    gap: var(--tr-space-2);
    align-items: center;
}

.tr-redir-count-badge {
    padding: var(--tr-space-1) var(--tr-space-3);
    border-radius: var(--tr-radius-full);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
}

.tr-redir-count-badge--pending {
    color: var(--tr-color-success);
    background: var(--tr-color-success-bg);
}

.tr-redir-count-badge--accepted {
    color: var(--tr-color-info);
    background: var(--tr-color-info-bg);
}

/* PRO badge overlay */
.tr-redir-pro-badge {
    position: absolute;
    top: var(--tr-space-4);
    right: var(--tr-space-4);
    background: var(--tr-color-primary-light);
    color: var(--tr-color-primary);
    border: 1px solid rgba(16, 185, 129, 0.2);
    font-size: 10px;
    font-weight: var(--tr-font-bold);
    padding: 3px var(--tr-space-2);
    border-radius: var(--tr-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Suggestion items */
.tr-redir-suggestions-list {
    max-height: 300px;
    overflow-y: auto;
}

.tr-redir-suggestion-row {
    display: flex;
    align-items: center;
    padding: var(--tr-space-3) var(--tr-space-5);
    border-bottom: 1px solid var(--tr-color-slate-100);
    gap: var(--tr-space-4);
    transition: all var(--tr-transition-base);
}

.tr-redir-suggestion-row:last-child {
    border-bottom: none;
}

.tr-redir-suggestion-content {
    flex: 1;
    min-width: 0;
}

.tr-redir-suggestion-from {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    margin-bottom: var(--tr-space-1);
}

.tr-redir-suggestion-to {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    margin: 0;
}

.tr-redir-suggestion-to span {
    color: var(--tr-color-primary);
    font-weight: var(--tr-font-medium);
}

.tr-redir-suggestion-score {
    font-size: 11px;
    font-weight: var(--tr-font-semibold);
    border-radius: var(--tr-radius-full);
    padding: 3px 10px;
    flex-shrink: 0;
}

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

.tr-redir-btn-accept {
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-white);
    background: var(--tr-color-primary);
    border: none;
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-2) var(--tr-space-3);
    cursor: pointer;
    transition: all var(--tr-transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    line-height: 1;
}

.tr-redir-btn-accept:hover {
    background: var(--tr-color-primary-hover);
    transform: translateY(-1px);
}

.tr-redir-btn-dismiss {
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--tr-space-2) var(--tr-space-3);
    border-radius: var(--tr-radius-md);
    transition: all var(--tr-transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    line-height: 1;
}

.tr-redir-btn-dismiss:hover {
    color: var(--tr-color-slate-700);
    background: var(--tr-color-base);
}

/* Empty state suggestions */
.tr-redir-suggestions-empty {
    padding: var(--tr-space-8) var(--tr-space-5);
    text-align: center;
}

.tr-redir-suggestions-empty svg {
    color: var(--tr-color-success);
    margin-bottom: var(--tr-space-2);
}

.tr-redir-suggestions-empty p {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-400);
    margin: 0;
}

/* PRO locked state */
.tr-redir-pro-locked {
    text-align: center;
    padding: var(--tr-space-10) var(--tr-space-5);
}

.tr-redir-pro-locked-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--tr-radius-lg);
    background: var(--tr-color-primary);
    color: var(--tr-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tr-space-5);
}

.tr-redir-pro-locked h4 {
    margin: 0 0 var(--tr-space-3) 0;
    color: var(--tr-color-slate-800);
    font-size: var(--tr-text-lg);
    font-weight: var(--tr-font-semibold);
}

.tr-redir-pro-locked p {
    margin: 0 0 var(--tr-space-5) 0;
    color: var(--tr-color-slate-500);
    font-size: var(--tr-text-sm);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.tr-redir-pro-locked .tr-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: var(--tr-btn-height-md) !important;
    padding: var(--tr-btn-padding-md) !important;
    font-size: var(--tr-text-sm) !important;
    font-weight: var(--tr-font-semibold) !important;
    font-family: var(--tr-font-family) !important;
    border-radius: var(--tr-radius-md) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    margin-right: auto;
}

/* Fade-out animation for suggestion rows */
@keyframes tr-redir-fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 80px;
    }

    to {
        opacity: 0;
        transform: translateX(20px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.tr-redir-suggestion-row.is-removing {
    animation: tr-redir-fade-out 0.3s ease forwards;
    overflow: hidden;
}

/* ─── TamRank Learning Footer ──────────────── */

.tr-redir-learning-footer {
    background: var(--tr-color-base);
    padding: var(--tr-space-4) var(--tr-space-5);
    border-top: 1px solid var(--tr-color-surface);
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
}

.tr-redir-learning-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--tr-radius-md);
    background: var(--tr-color-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tr-redir-learning-text {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    margin: 0;
    line-height: 1.5;
}

.tr-redir-learning-highlight {
    color: var(--tr-color-primary);
    font-weight: var(--tr-font-semibold);
}

.tr-redir-learning-stats {
    display: flex;
    gap: var(--tr-space-3);
    margin-left: auto;
}

.tr-redir-learning-stat {
    text-align: center;
}

.tr-redir-learning-stat-value {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-800);
}

.tr-redir-learning-stat-label {
    font-size: 10px;
    color: var(--tr-color-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Chain detector tooltip + Type tooltip: migrated to canonical .tr-tooltip
   component (assets/css/common/tooltip.css) — markup uses new wrapper. */

/* ─── Responsive ───────────────────────────── */

@media (max-width: 900px) {
    .tr-redir-add-row {
        flex-wrap: wrap;
    }

    .tr-redir-add-field--from,
    .tr-redir-add-field--to {
        flex-basis: 100%;
    }

    .tr-redir-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tr-redir-section-actions {
        margin-left: 0;
        width: 100%;
    }

    .tr-redir-search-input {
        width: 100%;
    }

    .tr-redir-url-code {
        max-width: 150px;
    }

    .tr-redir-ie-dropdown {
        width: 320px;
    }
}

@media (max-width: 480px) {
    .tr-redir-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tr-redir-ie-dropdown {
        width: calc(100vw - 40px);
        right: -20px;
    }

    .tr-redir-section-header .tr-pill-nav {
        margin-left: 0;
    }
}
/* ==========================================================================
   Regex redirects (FREE, 1.3.7)
   ========================================================================== */

.tr-redir-add-field--match {
    flex: 0 0 110px;
    min-width: 110px;
}

/* A regex rule is worth marking, but it is the least important thing in the
   row — the pattern itself is what you read. So the marker trails the value as
   a muted annotation instead of leading it as a chip: no background, no border,
   nothing that outweighs the URL. Trailing also keeps the From column starting
   on the same x for regex and exact rows alike. */
.tr-redir-match-note {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    color: var(--tr-color-slate-500, #64748b);
    cursor: default;
}

/* The same trailing annotation, but for a rule that cannot work: a pattern
   saved on Exact never matches anything. It keeps the size and position of its
   neutral sibling, so the From column still starts on the same x for every row,
   and only the colour carries the meaning.

   Error red, not warning amber, for two reasons. Semantically the rule is
   broken rather than merely worth a look: it claims Active and forwards
   nothing. And practically, --tr-color-warning (#f59e0b) does not clear the
   4.5:1 contrast minimum for 11px text on white, while --tr-color-error-hover
   (#e11d48) does. */
.tr-redir-match-note--warn {
    color: var(--tr-color-error-hover, #e11d48);
    font-weight: 500;
    cursor: help;
}

/* Add form: the row keeps its layout, the hint sits underneath it so the
   fields stay bottom-aligned. */
.tr-redir-add-hint {
    margin: var(--tr-space-2) 0 0;
    font-size: var(--tr-text-xs);
    line-height: 1.5;
    color: var(--tr-color-slate-500);
}

/* Shown under the To field the moment 410 is picked: the status has no
   destination, so the field is no longer required. Absolutely positioned so
   appearing and disappearing cannot shift the form row it hangs under. */
.tr-redir-add-field--to {
    position: relative;
}

.tr-redir-add-note {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    font-size: var(--tr-text-xs);
    line-height: 1.4;
    color: var(--tr-color-slate-500);
}

.tr-redir-add-note[hidden] {
    display: none;
}

/* A 410 row has no target. The dash keeps the column aligned without pretending
   there is a link to click. */
.tr-redir-no-target {
    color: var(--tr-color-slate-400, #94a3b8);
}
