/* ============================================
   Container & Page Layout
   ============================================ */

.abj404-container {
    max-width: none;
    margin: 0;
    background: var(--abj404-surface);
    border-radius: 8px;
    box-shadow: var(--abj404-shadow-sm);
}

.abj404-page-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--abj404-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.abj404-page-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--abj404-text);
    margin: 0;
}

.abj404-settings-content {
    padding: 32px;
}

/* ============================================
   Card System
   ============================================ */

.abj404-card {
    background: var(--abj404-card-bg);
    border: 1px solid var(--abj404-border);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 24px;
    transition: box-shadow 0.3s ease;
}

.abj404-card:hover {
    box-shadow: var(--abj404-shadow-md);
}

.abj404-card:last-child {
    margin-bottom: 0;
}

/* Cards rendered outside the main form (Engine Profiles, GSC) are direct children
   of the settings container. Give them top margin to match the 24px gap between cards. */
.abj404-settings-content > .abj404-card {
    margin-top: 24px;
}

/* Flow layout for stats page - cards in a flexible grid */
.abj404-flow-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}

.abj404-flow-layout .abj404-card {
    margin-bottom: 0;
}

/* For smaller cards that should stay compact */
.abj404-flow-layout .abj404-card-compact {
    max-width: 400px;
}

.abj404-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.abj404-card-header:hover {
    background: var(--abj404-card-header-hover);
}

.abj404-card.expanded .abj404-card-header {
    border-bottom-color: var(--abj404-border);
}

.abj404-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--abj404-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.abj404-card-icon {
    width: 22px;
    height: 22px;
    color: var(--abj404-accent);
    flex-shrink: 0;
}

.abj404-collapse-icon {
    color: var(--abj404-text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.abj404-card.expanded .abj404-collapse-icon {
    transform: rotate(180deg);
}

.abj404-card-content {
    padding: 24px;
    display: none;
}

.abj404-card.expanded .abj404-card-content {
    display: block;
}

/* ============================================
   Info Badge
   ============================================ */

.abj404-info-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--abj404-info);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 8px;
}

/* ============================================
   Warning & Danger Boxes
   ============================================ */

.abj404-warning-box {
    background: var(--abj404-warning-bg);
    border-left: 4px solid var(--abj404-warning-border);
    padding: 12px 16px;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--abj404-warning-text);
}

.abj404-danger-box {
    background: var(--abj404-danger-bg);
    border-left: 4px solid var(--abj404-danger-border);
    padding: 12px 16px;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--abj404-danger-text);
}

.abj404-warning-box strong,
.abj404-danger-box strong {
    display: inline;
}

/* ============================================
   Sticky Save Bar
   ============================================ */

.abj404-sticky-save-bar {
    position: sticky;
    bottom: 0;
    background: var(--abj404-surface);
    border-top: 1px solid var(--abj404-border);
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--abj404-shadow-up);
    margin: 32px -32px -32px -32px;
    border-radius: 0 0 8px 8px;
    z-index: 10;
}

.abj404-save-bar-status {
    color: var(--abj404-text-muted);
    font-size: 13px;
}

.abj404-save-bar-actions {
    display: flex;
    gap: 12px;
}

/* ============================================
   Success Toast Notification
   ============================================ */

.abj404-toast {
    background: var(--abj404-success);
    color: var(--abj404-on-accent);
    padding: 12px 20px;
    position: fixed;
    top: 50px;
    right: 32px;
    border-radius: 4px;
    box-shadow: var(--abj404-shadow-md);
    z-index: 999999;
    display: none;
    animation: abj404-slideIn 0.3s ease;
}

.abj404-toast.show {
    display: block;
}

.abj404-toast.error {
    background: var(--abj404-danger-border);
}

@keyframes abj404-slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   Form Elements (Shared)
   ============================================ */

.abj404-form-group {
    margin-bottom: 24px;
}

.abj404-form-group:last-child {
    margin-bottom: 0;
}

.abj404-form-label {
    display: block;
    font-weight: 600;
    color: var(--abj404-text);
    margin-bottom: 8px;
    font-size: 14px;
}

.abj404-form-input,
.abj404-form-select {
    width: 100%;
    max-width: 500px;
    padding: 10px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--abj404-surface);
    color: var(--abj404-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.abj404-form-input:focus,
.abj404-form-select:focus {
    outline: none;
    border-color: var(--abj404-accent);
    box-shadow: 0 0 0 1px var(--abj404-accent);
}

.abj404-form-input-small {
    max-width: 120px;
}

.abj404-form-help {
    color: var(--abj404-text-muted);
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
}

.abj404-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.abj404-checkbox-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--abj404-accent);
}

.abj404-checkbox-label {
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    color: var(--abj404-text);
}

.abj404-inline-fields {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.abj404-inline-fields .abj404-form-input {
    max-width: 200px;
}

.abj404-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .abj404-field-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Button Styles
   ============================================ */

.abj404-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

.abj404-btn-primary {
    background: var(--abj404-accent);
    color: var(--abj404-on-accent);
}

.abj404-btn-primary:hover {
    background: var(--abj404-accent-hover);
    color: var(--abj404-on-accent);
}

.abj404-btn-secondary {
    background: var(--abj404-surface);
    color: var(--abj404-accent);
    border: 1px solid var(--abj404-accent);
}

.abj404-btn-secondary:hover {
    background: var(--abj404-bg);
}

/* ============================================
   Header Row with Inline Mode Toggle
   ============================================ */

.abj404-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.abj404-header-row h2 {
    margin: 0;
    flex-shrink: 0;
    order: 1;
}

/* Header controls - groups mode toggle and expand button */
.abj404-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
    order: 2;
}

/* Notices moved into header-row by WordPress JS - force to own row */
.abj404-header-row .notice {
    order: 3;
    flex-basis: 100%;
    margin: 8px 0 0 0;
}

/* Review notice in plugin header areas */
.abj404-review-notice {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 8px 0 0 0;
    padding-right: 40px;
}

.abj404-review-notice p {
    margin-right: 4px;
}

.abj404-review-notice-close {
    position: absolute;
    top: 8px;
    right: 10px;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--abj404-text-muted);
    text-decoration: none;
}

.abj404-review-notice-close:hover,
.abj404-review-notice-close:focus {
    color: var(--abj404-text);
    text-decoration: none;
}

.abj404-header-controls #abj404-expand-collapse-all {
    white-space: nowrap;
}

/* ============================================
   Simple/Advanced Mode Toggle
   ============================================ */

.abj404-mode-toggle {
    background: var(--abj404-surface);
    border: 1px solid var(--abj404-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

/* Inline (compact) mode toggle in header */
.abj404-mode-toggle.abj404-mode-toggle-inline {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.abj404-mode-toggle-inline .abj404-mode-toggle-buttons {
    background: var(--abj404-bg);
    border-radius: 4px;
    padding: 2px;
    gap: 2px;
}

.abj404-mode-toggle-inline .abj404-mode-btn {
    padding: 6px 12px;
    font-size: 13px;
    gap: 0;
}

.abj404-mode-toggle-inline .abj404-mode-btn-icon {
    display: none;
}

.abj404-mode-toggle-buttons {
    display: inline-flex;
    background: var(--abj404-bg);
    border-radius: 6px;
    padding: 4px;
    gap: 4px;
}

.abj404-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--abj404-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.abj404-mode-btn:hover {
    background: var(--abj404-surface);
    color: var(--abj404-text);
}

.abj404-mode-btn.active {
    background: var(--abj404-accent);
    color: var(--abj404-on-accent);
    box-shadow: var(--abj404-shadow-sm);
}

.abj404-mode-btn.active:hover {
    background: var(--abj404-accent-hover);
    color: var(--abj404-on-accent);
}

.abj404-mode-btn.loading {
    opacity: 0.7;
    cursor: wait;
}

.abj404-mode-btn-icon {
    display: flex;
    align-items: center;
}

.abj404-mode-btn-icon svg {
    width: 16px;
    height: 16px;
}

.abj404-mode-description {
    margin: 12px 0 0 0;
    color: var(--abj404-text-muted);
    font-size: 13px;
}

/* ============================================
   Simple Mode Options
   ============================================ */

.abj404-simple-options {
    max-width: 100%;
}

/* Destination field styling for the search input */
.abj404-dest-field .add_a_redirect_label {
    display: none;
}

.abj404-dest-field #redirect_to_user_field {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--abj404-surface);
    color: var(--abj404-text);
}

.abj404-dest-field br {
    display: none;
}

.abj404-dest-field #redirect_to_user_field_explanation,
.abj404-dest-field #redirect_to_user_field_warning {
    display: block;
    margin-top: 4px;
}

.abj404-simple-section {
    background: var(--abj404-surface);
    border: 1px solid var(--abj404-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

.abj404-simple-section h3 {
    margin: 0 0 20px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--abj404-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--abj404-text);
}

.abj404-simple-field {
    margin-bottom: 20px;
}

.abj404-simple-field:last-child {
    margin-bottom: 0;
}

.abj404-simple-field > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--abj404-text);
}

.abj404-simple-field > label input[type="checkbox"] {
    margin-right: 8px;
}

.abj404-simple-field input[type="text"],
.abj404-simple-field select {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--abj404-surface);
    color: var(--abj404-text);
}

.abj404-simple-field input[type="text"]:focus,
.abj404-simple-field select:focus {
    border-color: var(--abj404-accent);
    box-shadow: 0 0 0 1px var(--abj404-accent);
    outline: none;
}

.abj404-input-with-suffix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.abj404-input-with-suffix input[type="text"] {
    width: 80px;
    text-align: right;
}

.abj404-input-suffix {
    color: var(--abj404-text-muted);
    font-size: 14px;
}

.abj404-field-description {
    margin: 6px 0 0 0;
    color: var(--abj404-text-muted);
    font-size: 13px;
}

.abj404-simple-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--abj404-border);
}

.abj404-simple-actions .button-large {
    padding: 8px 24px;
    font-size: 14px;
}

/* Advanced Mode Hint */
.abj404-mode-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--abj404-bg);
    border: 1px solid var(--abj404-border);
    border-radius: 8px;
    margin-top: 24px;
}

.abj404-mode-hint-icon {
    flex-shrink: 0;
    color: var(--abj404-accent);
}

.abj404-mode-hint-icon svg {
    display: block;
}

.abj404-mode-hint-text {
    color: var(--abj404-text-muted);
    font-size: 14px;
}

.abj404-mode-hint-text a,
a.abj404-switch-to-advanced {
    color: var(--abj404-accent);
    text-decoration: none;
    font-weight: 500;
}

.abj404-mode-hint-text a:hover,
a.abj404-switch-to-advanced:hover {
    color: var(--abj404-accent-hover);
    text-decoration: underline;
}

/* ============================================
   Original Styles Below
   ============================================ */

.destination-does-not-exist {
	background-color: var(--abj404-danger-row-bg);
}

.exclude-pages-page-type {
	font-style: italic;
}
.exclude-pages-cell {
	vertical-align: top;
}

.closeable-ul {
	box-sizing: border-box;
	max-height: 12em;
	overflow: auto;
}
/* Style the list (remove margins and bullets, etc) */
.closeable-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Style the list items */
.closeable-ul li {
  border: 1px solid var(--abj404-border);
  margin-top: -1px; /* Prevent double borders */
  background-color: var(--abj404-surface-muted);
  text-decoration: none;
  font-size: 1.2em;
  color: black;
  display: block;
  position: relative;
}

/* Add a light grey background color on hover */
.closeable-ul li:hover {
  background-color: var(--abj404-surface-hover);
}

/* Style the close button (span) */
.closeable-ul .close {
	background: var(--abj404-surface-hover);
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 0px 16px;
  transform: translate(0%, -50%);
}

.closeable-ul .close:hover {background: var(--abj404-border);}


.hide-when-true {
	display: none;
}

/* Make the pagination links easier to click for steveraven */
.pagination-link {
	border-radius: 0 3px 3px 0;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    text-decoration-line: none;
}

.displaying-num {
    padding-left: 10px;
}

/* This is for the redirect page search dropdown. */
.indent-depth-0.ui-menu-item {
    padding-left: 10px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-1.ui-menu-item {
    padding-left: 20px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-2.ui-menu-item {
    padding-left: 30px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-3.ui-menu-item {
    padding-left: 40px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-4.ui-menu-item {
    padding-left: 50px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-5.ui-menu-item {
    padding-left: 60px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-6.ui-menu-item {
    padding-left: 70px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-7.ui-menu-item {
    padding-left: 80px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-8.ui-menu-item {
    padding-left: 90px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.indent-depth-9.ui-menu-item {
    padding-left: 100px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: stretch;
}
.ui-autocomplete li {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
    padding: 0px 10px;
    max-height: 400px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    padding-left: 0px;
}
ul .ui-autocomplete-category {
    font-weight: bold;
    margin: .8em 0 .2em;
    line-height: 1.5;

    /** custom **/
    display: flex;
    color: gray;
    font-weight: normal;
    padding-left: 0px;
}

/* This hides the last empty element when the data is truncated and the final element is added only
    so that the final category will be added. */
.hide-me-please {
    display: none;
}
ul .ui-autocomplete-category.data-overflow-category {
    color: black;
    font-weight: bold;
    font-style: italic;        
}

/* -- - - - - -- - - - - - -- - - - - - - - - - - - - - -*/
.lefty-tooltip {
    position: relative;
    border-bottom: 1px dotted var(--abj404-text-muted);
    cursor: help;
}

.abj404-header-tooltip.lefty-tooltip {
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border: 1px solid var(--abj404-border);
    border-radius: 999px;
    color: var(--abj404-text-muted);
    background: var(--abj404-surface);
    vertical-align: middle;
}

.abj404-header-tooltip-icon {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.abj404-header-tooltip.lefty-tooltip:hover {
    color: var(--abj404-accent);
    border-color: var(--abj404-accent);
}

.abj404-header-tooltip .lefty-tooltiptext {
    top: calc(100% + 6px);
}

.lefty-tooltip .lefty-tooltiptext {
    visibility: hidden;
    opacity: 0;
    background-color: var(--abj404-text);
    color: var(--abj404-on-accent);
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: normal;
    white-space: normal;
    word-wrap: break-word;
    text-transform: none;

    /* Position the tooltip */
    position: absolute;
    width: max-content;
    max-width: 300px;
    min-width: 150px;
    top: calc(100% - 8px);
    left: 0;
    transform: none;
    z-index: 1000;
    box-shadow: var(--abj404-shadow-md);

    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

/* No arrow - tooltip appears below without pointer */
.lefty-tooltip .lefty-tooltiptext::before {
    display: none;
}

.lefty-tooltip:hover .lefty-tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Tooltips in last columns - align right to prevent overflow */
th:nth-last-child(-n+3) .lefty-tooltiptext {
    left: auto;
    right: 0;
}
/* -- - - - - -- - - - - - -- - - - - - - - - - - - - - -*/

/* Include a space after the apply button so that the Trash button isn't right next to it. */
#captured_404s_bulk_apply {
    margin-right: 10px;
}

/* -- - - - - -- - - - - - -- - - - - - - - - - - - - - -*/
.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }

/* ============================================
   Options Page Accordion
   ============================================ */

/* Accordion controls (Expand All button and Save Settings) */
.abj404-accordion-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px 0;
    padding: 12px 0;
}

/* Make accordion controls sticky on larger screens */
@media (min-width: 783px) {
    .abj404-accordion-controls {
        position: sticky;
        top: 75px;
        z-index: 100;
        background: var(--abj404-bg-muted);
        padding: 12px 16px;
        margin: 0 -16px 20px -16px;
        box-shadow: var(--abj404-shadow-sm);
    }

    /* Dark theme background for sticky controls */
    html[data-theme="neon"] .abj404-accordion-controls,
    html[data-theme="obsidian"] .abj404-accordion-controls {
        background: var(--abj-bg-primary);
    }
}

/* Accordion section container */
.abj404-accordion-section {
    margin-bottom: 16px;
}

/* Accordion header (clickable) */
.abj404-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 14px 16px;
    background: var(--abj404-surface);
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.abj404-accordion-header:hover {
    background: var(--abj404-surface-hover);
    border-color: var(--abj404-primary);
}

.abj404-accordion-header:focus-visible {
    outline: 2px solid var(--abj404-primary);
    outline-offset: 2px;
}

/* Accordion header text */
.abj404-accordion-header > span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--abj404-text);
}

/* Accordion toggle arrow */
.abj404-accordion-toggle {
    font-size: 12px;
    color: var(--abj404-text-muted);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Rotate arrow when expanded */
.abj404-accordion-header[aria-expanded="true"] .abj404-accordion-toggle {
    transform: rotate(180deg);
}

/* Accordion content */
.abj404-accordion-content {
    margin-top: -1px; /* Overlap border with header */
}

.abj404-accordion-content .postbox {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Mobile adjustments */
@media (max-width: 782px) {
    .abj404-accordion-header {
        padding: 12px 14px;
    }

    .abj404-accordion-controls {
        flex-wrap: wrap;
    }

    .abj404-accordion-controls input[type="submit"] {
        width: 100%;
    }
}

/* ============================================
   Save Loading Overlay
   ============================================ */

/* Overlay backdrop */
.abj404-save-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--abj404-overlay-bg);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay content box */
.abj404-save-overlay-content {
    background: var(--abj404-surface);
    padding: 32px 48px;
    border-radius: 8px;
    box-shadow: var(--abj404-shadow-lg);
    text-align: center;
    max-width: 400px;
}

/* WordPress-style spinner */
.abj404-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 4px solid var(--abj404-border);
    border-top-color: var(--abj404-accent);
    border-radius: 50%;
    animation: abj404-spin 0.8s linear infinite;
}

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

/* Save message text */
.abj404-save-message {
    margin: 0;
    font-size: 16px;
    color: var(--abj404-text);
    font-weight: 500;
}

/* Error state */
.abj404-save-overlay.error .abj404-spinner {
    display: none;
}

.abj404-save-overlay.error .abj404-save-overlay-content {
    border-left: 4px solid var(--abj404-danger);
}

.abj404-save-overlay.error .abj404-save-message {
    color: var(--abj404-danger);
}

/* ============================================
   Navigation Tabs (Modern Design)
   ============================================ */

/* Top sub-navigation tabs use the native WordPress .nav-tab-wrapper / .nav-tab
   pattern. No custom positioning, colors, icons, or branding chrome here; core
   admin styles apply. */

/* ============================================
   Table Page Layout (Redirects, Captured, Logs)
   ============================================ */

.abj404-table-page {
    background: var(--abj404-surface);
    border-radius: 8px;
    box-shadow: var(--abj404-shadow-sm);
    overflow-x: clip; /* Prevent tooltips from causing horizontal scroll, doesn't break sticky */
}

/* All card-surface rows above the table (header, subsubsub list-top,
   filter/tablenav bar) and the table itself share the same 8px
   left/right gutter so the h1, subtabs, bulk actions, and table
   edge stack on one vertical line, matching the WordPress core
   Pages screen layout where everything aligns to the page wrap edge. */
.abj404-table-header {
    padding: 4px 8px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.abj404-table-header h1 {
    font-size: 23px;
    font-weight: 400;
    color: var(--abj404-text);
    margin: 0;
    padding: 9px 0 4px;
    line-height: 1.3;
}

/* ============================================
   Content Tabs (All, Manual, Automatic, Trash)
   ============================================ */

/* Native WordPress .subsubsub markup is used for list-table filter rows.
   No custom tab chrome is needed; core handles pipes and active state. The only
   adjustment is to align the row's left edge with the card's 32px content gutter
   (filter bar, pagination) instead of butting against the card edge. The bottom
   margin is intentionally small so the gap to the .abj404-filter-bar tablenav
   row below stays in line with WordPress's native subsubsub-to-tablenav spacing
   (~6px). The .abj404-list-top wrapper provides the row's own vertical padding. */
.abj404-table-page .subsubsub {
    margin: 4px 0 0;
}

/* Native WP_List_Table top row: filter links (subsubsub) plus the view
   settings (rows-per-page, confidence) on the left, search box on the right.
   These view settings deliberately live here rather than on the .tablenav row
   so the tablenav can hold only the native bulk-actions + pagination pair and
   never wraps to a second line when a selection is active. */
.abj404-list-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 2px 8px 6px;
}

.abj404-list-top .subsubsub {
    margin: 0;
}

.abj404-view-settings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.abj404-list-top .abj404-search-box {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}

.abj404-list-top .abj404-search-box input {
    width: 280px;
    max-width: 100%;
}

/* ============================================
   Filter Bar
   ============================================ */

.abj404-filter-bar {
    padding: 6px 8px;
    background: var(--abj404-bg);
    border-bottom: 1px solid var(--abj404-border);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.abj404-search-box {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    position: relative;
}

.abj404-search-box input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    line-height: normal;
    background: var(--abj404-surface);
    color: var(--abj404-text);
}

.abj404-search-box input:focus {
    outline: none;
    border-color: var(--abj404-accent);
    box-shadow: 0 0 0 1px var(--abj404-accent);
}

.abj404-filter-select {
    padding: 10px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    line-height: normal;
    background: var(--abj404-surface);
    color: var(--abj404-text);
    cursor: pointer;
    min-width: 120px;
}

.abj404-filter-select:focus {
    outline: none;
    border-color: var(--abj404-accent);
    box-shadow: 0 0 0 1px var(--abj404-accent);
}

.abj404-rows-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--abj404-text-muted);
}

.abj404-rows-per-page select {
    padding: 8px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    line-height: normal;
    background: var(--abj404-surface);
    cursor: pointer;
}

/* The rows-per-page select only ever shows a small number; it does not need
   the 120px min-width the other filter selects use. */
.abj404-rows-per-page select.perpage {
    min-width: 0;
    width: auto;
}

/* ============================================
   Bulk Actions Bar
   ============================================ */

/* Bulk actions sit inline on the tablenav row, always visible (matching the
   native WordPress Posts/Pages layout where "Bulk actions" + "Apply" are shown
   even with no selection). When nothing is selected, dim the container so the
   row visually reads as inactive without the layout shifting when a selection
   appears. The .active class is added by tableInteractions.js when the user
   checks at least one row. */
.abj404-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.abj404-bulk-actions:not(.active) {
    opacity: 0.55;
}

.abj404-selection-info {
    font-weight: 500;
    color: var(--abj404-text-muted);
    font-size: 13px;
}

.abj404-selection-info strong {
    font-weight: 700;
}

.abj404-bulk-actions .abj404-btn {
    padding: 4px 10px;
    font-size: 13px;
}

/* ============================================
   Modern Table Styling
   ============================================ */

.abj404-table-container {
    margin: 0;
    padding: 0 8px;
}

.abj404-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Checkbox column: match WP core .check-column. No explicit width;
   let the cell size to its 2.2em content + the asymmetric padding
   in the override block below (8px left, 0 right). */
.abj404-table th:first-child,
.abj404-table td:first-child {
    width: 2.2em;
    min-width: 2.2em;
    box-sizing: border-box;
}


.abj404-table thead {
    background: var(--abj404-bg);
    border-bottom: 1px solid var(--abj404-border);
}

/* Column header row matches WP core's .wp-list-table th but tighter:
   4px vertical padding. white-space: nowrap on the th alone is not
   enough when the cell contains a sibling tooltip span the browser
   may wrap; the .abj404-th-inner wrapper below pins title + tooltip
   into one inline-flex line so the header is single-row even when
   the Hits/Last Used columns carry a "?" tooltip icon. */
.abj404-table th {
    text-align: left;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--abj404-text);
    white-space: nowrap;
    position: sticky;
    top: 32px;  /* WordPress admin bar; the nav tabs scroll away (not fixed) */
    z-index: 10;
    background: var(--abj404-bg);
}

/* The checkbox column on both the Page Redirects and Captured 404s
   tabs uses class="manage-column column-cb check-column". WordPress
   admin loads .check-column rules from common.css that can override
   our left padding; pin 10px here so both tabs are visually
   identical regardless of WP-core CSS load order. */
.abj404-table th.check-column,
.abj404-table td.check-column,
.abj404-table th:first-child,
.abj404-table td:first-child {
    padding-left: 8px;
    padding-right: 0;
}

.abj404-table th .abj404-th-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Each sticky th (z-index:10, opaque background) is its own stacking context,
   so a header tooltip's z-index:1000 only ranks WITHIN its own th and is
   painted over by later sibling th cells (the dropped-down tooltip lands behind
   the next columns). Raise the active header above its siblings while its
   tooltip is open so the popup escapes over the adjacent headers. :focus-within
   covers keyboard access to the "?" affordance. */
.abj404-table th:hover,
.abj404-table th:focus-within {
    z-index: 11;
}

@media screen and (max-width: 782px) {
    .abj404-table th {
        top: 46px;  /* taller mobile admin bar */
    }
}

.abj404-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.abj404-table th.sortable:hover {
    color: var(--abj404-accent);
}

.abj404-table th.sorted {
    color: var(--abj404-accent);
}

.abj404-table th .sorting-indicator,
.abj404-table th .sort-indicator {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.5;
    min-width: 0.8em;
    text-align: center;
}

.abj404-table th .sorting-indicator::before,
.abj404-table th .sort-indicator::before {
    content: "↕";
    font-size: 12px;
    line-height: 1;
}

.abj404-table th.sorted .sorting-indicator,
.abj404-table th.sorted .sort-indicator {
    opacity: 1;
}

.abj404-table th.sorted.asc .sorting-indicator::before,
.abj404-table th.sorted.asc .sort-indicator::before {
    content: "↑";
}

.abj404-table th.sorted.desc .sorting-indicator::before,
.abj404-table th.sorted.desc .sort-indicator::before {
    content: "↓";
}

.abj404-table th input[type="checkbox"] {
    cursor: pointer;
}

.abj404-table tbody tr {
    border-bottom: 1px solid var(--abj404-border);
    transition: background-color 0.15s;
}

.abj404-table tbody tr:hover {
    background: var(--abj404-bg);
}

.abj404-table tbody tr:nth-child(even) {
    background: var(--abj404-row-stripe);
}

.abj404-table tbody tr:nth-child(even):hover {
    background: var(--abj404-row-stripe-hover);
}

.abj404-table tbody tr.destination-does-not-exist,
.abj404-table tbody tr.destination-does-not-exist:nth-child(even) {
    background: var(--abj404-danger-row-bg);
}

.abj404-table tbody tr.destination-does-not-exist:hover,
.abj404-table tbody tr.destination-does-not-exist:nth-child(even):hover {
    background: var(--abj404-danger-row-bg-hover);
}

.abj404-table tbody tr.destination-does-not-exist .abj404-dest-warning {
    color: var(--abj404-danger-row-text);
    font-weight: 600;
}

.abj404-table td {
    padding: 12px 8px;
    font-size: 13px;
    vertical-align: middle;
    overflow: visible;
}

.abj404-table td input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

/* URL Cell */
.abj404-url-cell {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--abj404-accent);
    word-break: break-word;
    position: relative;
}

.abj404-url-cell::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 28px;
    display: none;
}

.abj404-url-cell:hover::after,
.abj404-url-cell:focus-within::after {
    display: block;
}

.abj404-url-cell a {
    color: inherit;
    text-decoration: none;
}

.abj404-url-cell a:hover {
    text-decoration: underline;
}

/* Hits Cell */
.abj404-hits-cell {
    text-align: right;
    font-weight: 600;
    color: var(--abj404-text);
}

/* Date Cell */
.abj404-date-cell {
    color: var(--abj404-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Destination Cell */
.abj404-dest-cell {
    word-break: break-word;
}

.abj404-dest-cell a {
    display: block;
}

/* ============================================
   Status & Type Badges
   ============================================ */

/* Native bordered-label pattern: 1px border carries semantic, no fill,
   regular text weight. Mirrors WP Site Health Security/Performance badges
   (wp-admin/css/edit.css ~L925). Colors come from --abj404-* custom
   properties defined in adminThemes.css so admin-theme plugins (Dark Mode,
   etc.) can recolor by overriding the variables. */
.abj404-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--abj404-border);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.abj404-badge-auto     { border-color: var(--abj404-info); }
.abj404-badge-manual   { border-color: var(--abj404-border); }
.abj404-badge-regex    { border-color: var(--abj404-info); }
.abj404-badge-301      { border-color: var(--abj404-success); }
.abj404-badge-302      { border-color: var(--abj404-warning); }
.abj404-badge-307      { border-color: var(--abj404-info); }
.abj404-badge-308      { border-color: var(--abj404-info); }
.abj404-badge-410      { border-color: var(--abj404-danger); }
.abj404-badge-451      { border-color: var(--abj404-danger); }
.abj404-badge-meta     { border-color: var(--abj404-border); }
.abj404-badge-captured { border-color: var(--abj404-warning); }
.abj404-badge-ignored  { border-color: var(--abj404-border); }
.abj404-badge-later    { border-color: var(--abj404-info); }
.abj404-badge-trash    { border-color: var(--abj404-danger); }
.abj404-badge-404      { border-color: var(--abj404-danger); }
.abj404-badge-redirect { border-color: var(--abj404-success); }

.abj404-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--abj404-border);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.abj404-never-used {
    color: var(--abj404-danger-text);
    font-style: italic;
    font-size: 13px;
}

/* ============================================
   Row Actions (WordPress-style under URL)
   ============================================ */

.abj404-row-actions {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% - 18px);
    margin-top: 0;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--abj404-border);
    background: var(--abj404-card-bg);
    box-shadow: var(--abj404-shadow-md);
    font-size: 12px;
    color: var(--abj404-text-muted);
    white-space: nowrap;
    z-index: 2;
    pointer-events: auto;
}

.abj404-table tbody tr:hover .abj404-row-actions,
.abj404-url-cell:hover .abj404-row-actions,
.abj404-url-cell:focus-within .abj404-row-actions,
.abj404-row-actions:hover,
.abj404-row-actions:focus-within {
    display: block;
}

.abj404-table tbody tr:focus-within .abj404-row-actions {
    display: block;
}

.abj404-table tbody tr {
    position: relative;
    z-index: 0;
}

.abj404-table tbody tr:hover,
.abj404-table tbody tr:focus-within {
    z-index: 1;
}

/* Always show actions on touch devices */
@media (hover: none) {
    .abj404-row-actions {
        display: block;
        position: static;
        margin-top: 4px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

.abj404-row-actions a {
    color: var(--abj404-accent);
    text-decoration: none;
}

.abj404-row-actions a:hover {
    color: var(--abj404-accent-hover);
    text-decoration: underline;
}

.abj404-row-actions a.danger,
.abj404-row-actions a.abj404-action-trash {
    color: var(--abj404-danger-text);
}

.abj404-row-actions a.danger:hover,
.abj404-row-actions a.abj404-action-trash:hover {
    color: var(--abj404-danger);
}

/* Action links with icons */
.abj404-action-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.abj404-action-link svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Legacy button style - for backwards compatibility */
.abj404-action-btn {
    color: var(--abj404-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.abj404-action-btn svg {
    width: 14px;
    height: 14px;
}


/* ============================================
   Modern Pagination
   ============================================ */

/* The pagination strip (count + First/Prev/Next/Last nav) is a flex item
   inside the .abj404-filter-bar tablenav row, which already supplies the row's
   horizontal padding and border. The strip itself must stay padding- and
   border-free, otherwise it renders as a second indented, bordered block that
   doubles the vertical gap above the table (top strip) and below the last row
   (bottom strip). The search filter and rows-per-page controls live in the
   static filter bar, not here. */
.abj404-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
}

/* Right-justify the count + nav at the end of the tablenav row, matching the
   native Posts list table where pagination sits hard-right. The descendant
   selector is required to outrank WordPress core's
   `.tablenav .tablenav-pages { margin-left: 0 }` (load-styles.php), which the
   strip also matches via its tablenav-pages class. */
.abj404-filter-bar .abj404-pagination {
    margin-left: auto;
}

/* WordPress core gives .tablenav a fixed 30px height and .tablenav-pages a
   fixed 28px height. Our filter/pagination bars reuse those classes but hold
   taller, wrapping content (the search box; the refresh-status badge; the
   pagination controls, which wrap to a second line while a background refresh
   is running). A fixed-height box cannot grow for that second line, so it
   overflowed downward and overlapped the footer/credits. Let the bars size to
   their content instead. */
.abj404-filter-bar.tablenav,
.abj404-pagination.tablenav-pages {
    height: auto;
}

.abj404-pagination-info {
    color: var(--abj404-text-muted);
    font-size: 13px;
}

/*
 * Inline progress badge shown by the page-redirects AJAX pipeline while a
 * cold-cache build is running (case-a). The same `.abj404-refresh-status`
 * span sits in both the filter row and the bottom pagination strip and is
 * populated by view_updater_build_advance.js / view_updater_table_warmup.js
 * via jQuery.text(). When empty it stays out of the layout so the existing
 * case-b toast (which collapses to a 28px spinner after 2s) remains the
 * dominant signal once the table is already visible.
 */
.abj404-refresh-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--abj404-info-bg);
    color: var(--abj404-info-text);
    border: 1px solid var(--abj404-info-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abj404-refresh-status:empty {
    display: none;
}

.abj404-refresh-status::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 2px solid var(--abj404-info-border);
    border-top-color: var(--abj404-info-text);
    border-radius: 50%;
    animation: abj404-spin 0.8s linear infinite;
}

.abj404-pagination-controls {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* Compact, square-ish page buttons matching WordPress core's .tablenav-pages
   navigation so pagination does not eat horizontal room on the tablenav row.
   WP core uses ~24px square chevrons. */
.abj404-page-btn {
    padding: 0 2px;
    min-width: 24px;
    height: 24px;
    line-height: 22px;
    border: 1px solid var(--abj404-border);
    background: var(--abj404-surface);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--abj404-accent);
    transition: all 0.15s;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.abj404-page-btn:hover {
    background: var(--abj404-bg);
    border-color: var(--abj404-accent);
    text-decoration: none;
}

.abj404-page-btn.active {
    background: var(--abj404-accent);
    color: var(--abj404-on-accent);
    border-color: var(--abj404-accent);
}

.abj404-page-btn:disabled,
.abj404-page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.abj404-page-ellipsis {
    padding: 8px 4px;
    color: var(--abj404-text-muted);
}

.abj404-pagination-text {
    padding: 0 4px;
    color: var(--abj404-text-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* ============================================
   Table Loading Overlay
   ============================================ */

.abj404-table-wrapper {
    position: relative;
}

.abj404-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--abj404-loading-overlay-bg);
    z-index: 10;
    border-radius: 8px;
    animation: abj404-fade-in 0.2s ease-out;
    overflow: hidden;
    pointer-events: none;
}

@keyframes abj404-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.abj404-spinner-container {
    position: sticky;
    top: 50vh;
    display: flex;
    justify-content: center;
    transform: translateY(-50%);
    pointer-events: none;
}

.abj404-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--abj404-border);
    border-top-color: var(--abj404-accent);
    border-radius: 50%;
    animation: abj404-spin 0.8s linear infinite;
}

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

/* ============================================
   Regex Explanation Toggle
   ============================================ */

.abj404-regex-toggle {
    font-size: 12px;
    color: var(--abj404-accent);
    text-decoration: none;
    cursor: pointer;
}

.abj404-regex-toggle:hover {
    text-decoration: underline;
}

.abj404-regex-info {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--abj404-bg);
    border-left: 3px solid var(--abj404-accent);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    line-height: 1.5;
}

.abj404-regex-info code {
    background: var(--abj404-surface);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.abj404-regex-info p {
    margin: 0 0 8px 0;
}

.abj404-regex-info p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Modal Styles
   ============================================ */

.abj404-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--abj404-overlay-bg);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.abj404-modal.active {
    display: flex;
}

.abj404-modal-content {
    background: var(--abj404-surface);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--abj404-shadow-lg);
    animation: abj404-modal-slideUp 0.3s ease;
}

@keyframes abj404-modal-slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.abj404-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--abj404-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.abj404-modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--abj404-text);
}

.abj404-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--abj404-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.abj404-modal-close:hover {
    background: var(--abj404-bg);
}

.abj404-modal-body {
    padding: 24px;
}

.abj404-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--abj404-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Modal redirect-to field structure */
.abj404-modal .abj404-redirect-to-field {
    margin-bottom: 0;
}

.abj404-modal .abj404-input-row {
    display: block;
}

/* Modal autocomplete field styling */
.abj404-modal #redirect_to_user_field {
    width: 100% !important;
    padding: 8px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--abj404-surface);
    box-sizing: border-box;
}

.abj404-modal #redirect_to_user_field:focus {
    border-color: var(--abj404-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--abj404-primary);
}

/* Loading spinner for modal autocomplete */
.abj404-modal #redirect_to_user_field.ui-autocomplete-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23c3c4c7' stroke-width='2' fill='none'/%3E%3Cpath d='M8 2 A6 6 0 0 1 14 8' stroke='%232271b1' stroke-width='2' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-color: var(--abj404-surface);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

/* Hide legacy tooltip in modal - label already present */
.abj404-modal .lefty-tooltip {
    display: none;
}

/* Style explanation text in modal */
.abj404-modal #redirect_to_user_field_explanation {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--abj404-text-muted);
    font-style: italic;
}

.abj404-modal #redirect_to_user_field_warning {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-style: italic;
    font-weight: bold;
    color: var(--abj404-danger-text);
}

/* Hide template label since we have our own */
.abj404-modal .add_a_redirect_label {
    display: none;
}

/* Modal: button-grid and form inputs fill modal width */
.abj404-modal .abj404-form-input,
.abj404-modal .abj404-form-select {
    max-width: 100%;
}

/* Modal: advanced options section needs a bit more room */
.abj404-modal .abj404-advanced-options {
    margin: 0 0 16px 0;
}

/* Autocomplete input wrapper */
.abj404-input-with-spinner {
    display: inline;
}

/* Hide the separate spinner element - we use background-image instead */
.abj404-loading-spinner {
    display: none !important;
}

/* Show loading spinner inside input as background-image when loading */
#redirect_to_user_field.ui-autocomplete-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23c3c4c7' stroke-width='2' fill='none'/%3E%3Cpath d='M8 2 A6 6 0 0 1 14 8' stroke='%232271b1' stroke-width='2' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px !important;
}

/* ============================================
   Edit Redirect Page
   ============================================ */

.abj404-edit-page {
    margin: 20px 20px 20px 0;
}

.abj404-edit-container {
    background: var(--abj404-surface);
    border: 1px solid var(--abj404-border);
    border-radius: 8px;
    padding: 24px 32px;
    max-width: 520px;
}

.abj404-edit-container h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--abj404-text);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--abj404-border);
}

/* Edit page header row: title + back link */
.abj404-edit-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--abj404-border);
}

.abj404-edit-page-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--abj404-text);
    margin: 0;
    border: none;
    padding: 0;
}

.abj404-back-link {
    font-size: 13px;
    color: var(--abj404-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.abj404-back-link:hover {
    text-decoration: underline;
    color: var(--abj404-accent-hover);
}

/* Redirect type button grid */
.abj404-redirect-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.abj404-redirect-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    background: var(--abj404-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    color: var(--abj404-text);
    line-height: 1.3;
    font-family: inherit;
}

.abj404-redirect-type-btn strong {
    font-size: 15px;
    font-weight: 700;
    display: block;
}

.abj404-redirect-type-btn span {
    font-size: 11px;
    color: var(--abj404-text-muted);
    display: block;
}

.abj404-redirect-type-btn:hover {
    border-color: var(--abj404-accent);
    background: var(--abj404-info-bg);
}

.abj404-redirect-type-btn--active {
    border-color: var(--abj404-accent);
    background: var(--abj404-accent);
    color: var(--abj404-on-accent);
}

.abj404-redirect-type-btn--active strong {
    color: var(--abj404-on-accent);
}

.abj404-redirect-type-btn--active span {
    color: var(--abj404-on-accent);
}

.abj404-redirect-type-btn--active:hover {
    background: var(--abj404-accent-hover);
    border-color: var(--abj404-accent-hover);
}

/* Meta Refresh button spans full width */
.abj404-redirect-type-btn--full {
    grid-column: 1 / -1;
}

/* URL list for bulk editing */
.abj404-url-list {
    background: var(--abj404-bg);
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    padding: 12px 16px;
    max-height: 200px;
    overflow-y: auto;
}

.abj404-url-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.abj404-url-list li {
    padding: 4px 0;
    font-size: 13px;
    color: var(--abj404-text);
    border-bottom: 1px solid var(--abj404-border);
}

.abj404-url-list li:last-child {
    border-bottom: none;
}

.abj404-url-list code {
    background: transparent;
    padding: 0;
    font-size: 13px;
}

/* Button group for form actions */
.abj404-button-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--abj404-border);
}

/* Edit page: inputs fill the narrower card */
.abj404-edit-container .abj404-form-input,
.abj404-edit-container .abj404-form-select {
    max-width: 100%;
}

/* Redirect-to field wrapper structure */
.abj404-edit-container .abj404-redirect-to-field {
    margin-bottom: 20px;
}

.abj404-edit-container .abj404-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Style the template label to match form labels */
.abj404-edit-container .add_a_redirect_label {
    display: block;
    font-weight: 600;
    color: var(--abj404-text);
    margin-bottom: 8px;
    font-size: 14px;
}

/* Style the autocomplete field on edit page */
.abj404-edit-container #redirect_to_user_field {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--abj404-surface);
    box-sizing: border-box;
}

.abj404-edit-container #redirect_to_user_field:focus {
    border-color: var(--abj404-accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--abj404-accent);
}

/* Loading spinner for edit page autocomplete */
.abj404-edit-container #redirect_to_user_field.ui-autocomplete-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23c3c4c7' stroke-width='2' fill='none'/%3E%3Cpath d='M8 2 A6 6 0 0 1 14 8' stroke='%232271b1' stroke-width='2' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-color: var(--abj404-surface);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

/* Style the explanation text */
.abj404-edit-container #redirect_to_user_field_explanation {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--abj404-text-muted);
    font-style: italic;
}

/* Style the warning text */
.abj404-edit-container #redirect_to_user_field_warning {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-style: italic;
    font-weight: bold;
    color: var(--abj404-danger-text);
}

/* Style the tooltip inline with the input */
.abj404-edit-container .lefty-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--abj404-text-muted);
    cursor: help;
}

/* ============================================
   Empty State
   ============================================ */

.abj404-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--abj404-text-muted);
}

.abj404-empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.abj404-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--abj404-text);
    margin: 0 0 8px 0;
}

.abj404-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   Destination with Warning
   ============================================ */

.abj404-dest-warning {
    color: var(--abj404-danger-text);
    font-weight: 600;
}

.abj404-dest-tooltip {
    position: relative;
    display: inline-block;
}

.abj404-dest-tooltip .abj404-tooltip-text {
    visibility: hidden;
    background-color: var(--abj404-tooltip-bg);
    color: var(--abj404-on-accent);
    text-align: center;
    border-radius: 4px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: normal;
    opacity: 0;
    transition: opacity 0.2s;
}

.abj404-dest-tooltip .abj404-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--abj404-tooltip-bg) transparent transparent transparent;
}

.abj404-dest-tooltip:hover .abj404-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Keep top-row destination tooltips readable: show below the row instead of under sticky headers. */
.abj404-table tbody tr:nth-child(-n+2) .abj404-dest-tooltip .abj404-tooltip-text {
    top: 125%;
    bottom: auto;
}

.abj404-table tbody tr:nth-child(-n+2) .abj404-dest-tooltip .abj404-tooltip-text::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--abj404-tooltip-bg) transparent;
}

/* ============================================
   URL with Regex Warning
   ============================================ */

.url-looks-like-regex {
    background-color: var(--abj404-warning-bg);
}

.abj404-url-warning {
    color: var(--abj404-warning-text);
    font-weight: 600;
}

.abj404-url-tooltip {
    position: relative;
    display: inline-block;
}

.abj404-url-tooltip .abj404-tooltip-text {
    visibility: hidden;
    background-color: var(--abj404-tooltip-bg);
    color: var(--abj404-on-accent);
    text-align: left;
    border-radius: 4px;
    padding: 10px 14px;
    position: absolute;
    z-index: 1000;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: normal;
    opacity: 0;
    transition: opacity 0.2s;
    width: 320px;
    line-height: 1.5;
    box-shadow: var(--abj404-shadow-md);
}

.abj404-url-tooltip .abj404-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--abj404-tooltip-bg) transparent transparent transparent;
}

.abj404-url-tooltip:hover .abj404-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ============================================
   Mobile Responsiveness for Tables
   ============================================ */

@media screen and (max-width: 782px) {
    .abj404-table-header,
    .abj404-filter-bar,
    .abj404-table-container,
    .abj404-pagination {
        padding-left: 16px;
        padding-right: 16px;
    }

    .abj404-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .abj404-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .abj404-search-box {
        min-width: auto;
        max-width: none;
    }

    .abj404-list-top {
        flex-direction: column;
        align-items: stretch;
        padding-left: 16px;
        padding-right: 16px;
    }

    .abj404-list-top .abj404-search-box {
        margin-left: 0;
    }

    .abj404-list-top .abj404-search-box input {
        width: 100%;
    }

    .abj404-rows-per-page {
        margin-left: 0;
        justify-content: flex-start;
    }

    .abj404-pagination {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .abj404-filter-bar .abj404-pagination {
        margin-left: 0;
    }

    .abj404-table th,
    .abj404-table td {
        padding: 12px 8px;
    }

    /* Hide less important columns on mobile */
    .abj404-table .hide-on-mobile {
        display: none;
    }

    .abj404-row-actions {
        opacity: 1;
        flex-wrap: wrap;
    }
}

/* Tablets - hide Created column (Last Used is more useful) */
@media screen and (max-width: 960px) {
    .abj404-table .hide-on-tablet {
        display: none;
    }

    /* Smaller badges on tablet */
    .abj404-badge,
    .abj404-type-badge {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* Small tablets / large phones */
@media screen and (max-width: 600px) {
    .abj404-table th,
    .abj404-table td {
        padding: 10px 6px;
        font-size: 12px;
    }

    .abj404-url-cell {
        font-size: 11px;
    }

    .abj404-date-cell {
        font-size: 11px;
    }

    /* Stack bulk actions */
    .abj404-bulk-actions {
        flex-direction: column;
        gap: 8px;
    }

    .abj404-bulk-actions select,
    .abj404-bulk-actions .button {
        width: 100%;
    }
}

/* ============================================
   Dark Theme Support for Table Pages
   ============================================ */

html[data-theme="neon"] .abj404-table-page,
html[data-theme="obsidian"] .abj404-table-page {
    background: var(--abj404-surface);
}

html[data-theme="neon"] .abj404-table tbody tr:nth-child(even),
html[data-theme="obsidian"] .abj404-table tbody tr:nth-child(even) {
    background: var(--abj404-row-stripe-soft);
}

html[data-theme="neon"] .abj404-table tbody tr:hover,
html[data-theme="obsidian"] .abj404-table tbody tr:hover {
    background: var(--abj404-row-stripe-med);
}

html[data-theme="neon"] .abj404-filter-bar,
html[data-theme="obsidian"] .abj404-filter-bar {
    background: var(--abj404-bg);
}

/* ============================================
   Logs Page Specific Styles
   ============================================ */

.abj404-logs-table {
    table-layout: fixed;
}

/* Fixed column widths for the logs table (6 columns: toggle, URL, IP, Referrer, Action, Date) */
.abj404-logs-table thead th:nth-child(1) { width: 32px;  } /* Trace toggle */
.abj404-logs-table thead th:nth-child(2) { width: 28%;  } /* URL */
.abj404-logs-table thead th:nth-child(3) { width: 10%;  } /* IP Address */
.abj404-logs-table thead th:nth-child(4) { width: 22%;  } /* Referrer */
.abj404-logs-table thead th:nth-child(5) { width: 22%;  } /* Action */
.abj404-logs-table thead th:nth-child(6) { width: auto;  } /* Date (takes remaining) */

/* Override the generic first-child 40px checkbox width for the narrow trace toggle */
.abj404-logs-table th:first-child,
.abj404-logs-table td:first-child {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
}

/* Prevent URL/Referrer/Action text from overflowing into adjacent columns */
.abj404-logs-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.abj404-logs-table .abj404-url-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abj404-logs-table .abj404-url-cell:hover {
    white-space: normal;
    word-break: break-all;
}

/* Logs table URL cells use same word-break as regular tables */

.abj404-logs-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.abj404-logs-search-form input[type="text"],
.abj404-logs-search-form input.ui-autocomplete-input {
    flex: 1;
    min-width: 120px;
    line-height: normal;
}

.abj404-logs-search-form label {
    font-weight: 500;
    color: var(--abj404-text);
    white-space: nowrap;
}

.abj404-ip-cell {
    font-family: monospace;
    font-size: 12px;
    color: var(--abj404-text-muted);
}

.abj404-url-detail {
    color: var(--abj404-text-muted);
    font-size: 12px;
}

.abj404-action-url {
    max-width: 200px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.abj404-text-muted {
    color: var(--abj404-text-muted);
}

.abj404-engine-label {
    font-size: 11px;
    color: var(--abj404-text-muted);
    font-style: italic;
}

/* Pipeline trace detail row */
.abj404-trace-th {
    width: 28px;
    padding: 4px 2px;
}

.abj404-trace-toggle-cell {
    width: 28px;
    padding: 4px 2px;
    text-align: center;
}

.abj404-trace-toggle {
    background: none;
    border: 1px solid var(--abj404-border);
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 4px;
    color: var(--abj404-text-muted);
    line-height: 1;
}

.abj404-trace-toggle:disabled {
    opacity: 0.3;
    cursor: default;
}

.abj404-trace-toggle:not(:disabled):hover {
    background: var(--abj404-bg-hover);
}

.abj404-trace-detail td.abj404-trace-detail-cell {
    background: var(--abj404-bg-subtle);
    padding: 10px 16px;
    border-top: none;
}

.abj404-trace-steps {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 13px;
    color: var(--abj404-text);
    line-height: 1.5;
}

.abj404-trace-steps li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    padding: 3px 0;
    border-bottom: 1px solid var(--abj404-bg-hover);
}

.abj404-trace-steps li:last-child {
    border-bottom: none;
}

.abj404-trace-step-name {
    flex: 0 0 auto;
    min-width: 180px;
    font-weight: 600;
    color: var(--abj404-text);
}

.abj404-trace-outcome {
    flex: 0 0 auto;
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

.abj404-trace-outcome-pass {
    background: var(--abj404-success-bg);
    color: var(--abj404-success-text);
}

.abj404-trace-outcome-fail {
    background: var(--abj404-danger-bg);
    color: var(--abj404-danger-text);
}

.abj404-trace-outcome-neutral {
    background: var(--abj404-bg-hover);
    color: var(--abj404-text-muted);
}

.abj404-trace-outcome-result {
    background: var(--abj404-info-bg);
    color: var(--abj404-info-text);
}

.abj404-trace-detail-text {
    flex: 1 1 auto;
    color: var(--abj404-text-muted);
    font-size: 12px;
}

.abj404-suggestion-type {
    display: inline-block;
    font-size: 12px;
    color: var(--abj404-text-muted);
    margin-left: 6px;
}

.abj404-score-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--abj404-border);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.abj404-score-high   { border-color: var(--abj404-success); }
.abj404-score-medium { border-color: var(--abj404-warning); }
.abj404-score-low    { border-color: var(--abj404-danger); }

.abj404-score-manual {
    color: var(--abj404-text-muted);
    font-size: 14px;
}

.abj404-confidence-cell {
    text-align: center;
    white-space: nowrap;
}

.abj404-username-label {
    font-size: 11px;
    color: var(--abj404-accent);
}

/* Empty trash button - use higher specificity to override WordPress .button */
.button.abj404-empty-trash-btn,
a.abj404-empty-trash-btn {
    margin-left: auto;
    background: var(--abj404-danger-bg) !important;
    color: var(--abj404-danger-text) !important;
    border-color: var(--abj404-danger-text) !important;
}

.button.abj404-empty-trash-btn:hover,
a.abj404-empty-trash-btn:hover {
    background: var(--abj404-danger-text) !important;
    color: var(--abj404-on-accent) !important;
    border-color: var(--abj404-danger-text) !important;
}

/* ============================================
   Options Page Content Styling
   ============================================ */

/* Form field rows - each paragraph is a form field group */
.abj404-accordion-content p {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid var(--abj404-border-light);
    background: var(--abj404-surface);
}

.abj404-accordion-content p:last-child {
    border-bottom: none;
}

/* Alternate row coloring for better readability */
.abj404-accordion-content p:nth-child(even) {
    background: var(--abj404-surface-alt);
}

/* Labels in form fields */
.abj404-accordion-content p > label:first-child,
.abj404-accordion-content p > label[for] {
    flex: 0 0 280px;
    font-weight: 600;
    color: var(--abj404-text);
    padding-top: 4px;
}

/* Inputs and selects */
.abj404-accordion-content input[type="text"],
.abj404-accordion-content input[type="number"],
.abj404-accordion-content select {
    padding: 6px 10px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    background: var(--abj404-input-bg);
    color: var(--abj404-text);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.abj404-accordion-content input[type="text"]:focus,
.abj404-accordion-content input[type="number"]:focus,
.abj404-accordion-content select:focus {
    border-color: var(--abj404-primary);
    box-shadow: 0 0 0 1px var(--abj404-primary);
    outline: none;
}

/* Checkboxes - align better */
.abj404-accordion-content input[type="checkbox"] {
    margin-top: 5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Help text styling - target BR followed by text */
.abj404-accordion-content p br {
    display: none;
}

/* Style inline help text that follows inputs */
.abj404-accordion-content p > br + text,
.abj404-accordion-content p::after {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--abj404-text-muted);
    line-height: 1.5;
    padding-left: 288px;
    margin-top: 4px;
}

/* Tables in options - modernize the old border=1 tables */
.abj404-accordion-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
}

.abj404-accordion-content table tr {
    background: var(--abj404-surface);
}

.abj404-accordion-content table tr:nth-child(even) {
    background: var(--abj404-surface-alt);
}

.abj404-accordion-content table td {
    padding: 16px 20px;
    vertical-align: top;
    border-bottom: 1px solid var(--abj404-border-light);
    border-right: 1px solid var(--abj404-border-light);
}

.abj404-accordion-content table tr:last-child td {
    border-bottom: none;
}

.abj404-accordion-content table td:last-child {
    border-right: none;
}

/* First column (labels) in table */
.abj404-accordion-content table td:first-child {
    width: 45%;
    font-weight: 500;
    color: var(--abj404-text);
    background: var(--abj404-surface-alt);
}

/* Second column (inputs) in table */
.abj404-accordion-content table td:last-child {
    width: 55%;
}

/* Textareas in tables */
.abj404-accordion-content textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    background: var(--abj404-input-bg);
    color: var(--abj404-text);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.abj404-accordion-content textarea:focus {
    border-color: var(--abj404-primary);
    box-shadow: 0 0 0 1px var(--abj404-primary);
    outline: none;
}

/* Lists in options (bullet points) */
.abj404-accordion-content ul {
    margin: 8px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.abj404-accordion-content ul li {
    margin-bottom: 4px;
    color: var(--abj404-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.abj404-accordion-content ul li.closeLI {
    margin-bottom: 2px;
}

/* Warning text (red warnings) */
.abj404-accordion-content div[style*="color: red"],
.abj404-accordion-content div[style*="color:red"] {
    background: var(--abj404-danger-bg) !important;
    color: var(--abj404-danger-text) !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    border-left: 4px solid var(--abj404-danger-text) !important;
    margin: 12px 0 !important;
    font-weight: 500 !important;
}

/* Note text */
.abj404-accordion-content td br + text,
.abj404-accordion-content p br + text {
    font-size: 13px;
    color: var(--abj404-text-muted);
}

/* Info/help section at top of sections */
.abj404-accordion-content > p:first-child {
    background: var(--abj404-surface-alt);
    border-left: 4px solid var(--abj404-primary);
}

/* Horizontal rule/separator styling */
.abj404-accordion-content hr {
    border: none;
    border-top: 1px solid var(--abj404-border-light);
    margin: 16px 0;
}

/* DB version info and similar technical info */
.abj404-accordion-content p:has(> label:empty),
.abj404-accordion-content p:first-of-type:not(:has(label[for])) {
    font-size: 13px;
    color: var(--abj404-text-muted);
    background: var(--abj404-surface-alt);
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 782px) {
    .abj404-accordion-content p {
        flex-direction: column;
        padding: 12px 16px;
    }

    .abj404-accordion-content p > label:first-child,
    .abj404-accordion-content p > label[for] {
        flex: none;
        width: 100%;
        margin-bottom: 8px;
    }

    .abj404-accordion-content table td {
        display: block;
        width: 100% !important;
        padding: 12px 16px;
    }

    .abj404-accordion-content table td:first-child {
        border-bottom: none;
        padding-bottom: 8px;
    }

    .abj404-accordion-content textarea {
        min-height: 100px;
    }
}

/* Dark theme adjustments for options */
html[data-theme="neon"] .abj404-accordion-content p:nth-child(even),
html[data-theme="obsidian"] .abj404-accordion-content p:nth-child(even) {
    background: var(--abj404-row-stripe-soft);
}

html[data-theme="neon"] .abj404-accordion-content table td:first-child,
html[data-theme="obsidian"] .abj404-accordion-content table td:first-child {
    background: var(--abj404-cell-stripe);
}

html[data-theme="neon"] .abj404-accordion-content table tr:nth-child(even),
html[data-theme="obsidian"] .abj404-accordion-content table tr:nth-child(even) {
    background: var(--abj404-row-stripe-soft);
}

html[data-theme="neon"] .abj404-accordion-content textarea,
html[data-theme="obsidian"] .abj404-accordion-content textarea,
html[data-theme="neon"] .abj404-accordion-content input[type="text"],
html[data-theme="obsidian"] .abj404-accordion-content input[type="text"],
html[data-theme="neon"] .abj404-accordion-content select,
html[data-theme="obsidian"] .abj404-accordion-content select {
    background: var(--abj404-input-bg);
    border-color: var(--abj404-border);
}

/* Autocomplete dropdown field (redirect to) styling */
/* Redirect field wrapper in accordion */
.abj404-accordion-content .abj404-redirect-to-field {
    padding: 0 20px;
}

.abj404-accordion-content .abj404-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.abj404-accordion-content label.add_a_redirect_label,
.abj404-accordion-content label.add_exclude_page_field_label {
    display: block;
    font-weight: 600;
    color: var(--abj404-text);
    margin-bottom: 8px;
    padding: 16px 20px 0;
}

.abj404-accordion-content #redirect_to_user_field,
.abj404-accordion-content input#add_exclude_page_field {
    padding: 8px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    font-size: 14px;
    width: 50% !important;
    max-width: 400px;
}

.abj404-accordion-content #redirect_to_user_field:focus,
.abj404-accordion-content input#add_exclude_page_field:focus {
    border-color: var(--abj404-primary);
    box-shadow: 0 0 0 1px var(--abj404-primary);
    outline: none;
}

/* Loading spinner for accordion autocomplete */
.abj404-accordion-content #redirect_to_user_field.ui-autocomplete-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23c3c4c7' stroke-width='2' fill='none'/%3E%3Cpath d='M8 2 A6 6 0 0 1 14 8' stroke='%232271b1' stroke-width='2' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-color: var(--abj404-surface);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

/* Tooltip styling for autocomplete field */
.abj404-accordion-content .lefty-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--abj404-surface-alt);
    border: 1px solid var(--abj404-border);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--abj404-text-muted);
    cursor: help;
    vertical-align: middle;
}

/* Explanation text below autocomplete */
.abj404-accordion-content #redirect_to_user_field_explanation {
    display: block;
    font-size: 13px;
    color: var(--abj404-text-muted);
    margin-bottom: 16px;
    font-style: italic;
}

/* Warning text styling */
.abj404-accordion-content #redirect_to_user_field_warning {
    display: block;
    font-size: 13px;
    font-style: italic;
    font-weight: bold;
    color: var(--abj404-danger-text);
    margin-bottom: 8px;
}

/* Section title styling for text without labels */
.abj404-accordion-content > label[for] > br:first-of-type {
    display: block;
    margin-bottom: 8px;
}

/* Make table label cells have better typography */
.abj404-accordion-content table td:first-child label {
    font-weight: 600;
    font-size: 14px;
    color: var(--abj404-text);
    display: block;
    margin-bottom: 8px;
}

/* Style the explanation paragraph in 404 Page Suggestions */
.abj404-accordion-content > p:first-child:not(:has(label)) {
    background: var(--abj404-info-bg);
    border-left: 4px solid var(--abj404-primary);
    padding: 16px 20px;
    margin: 0 0 16px;
    line-height: 1.6;
    font-size: 14px;
    color: var(--abj404-text);
}

/* Add bottom border to first row intro text */
.abj404-accordion-content > p:first-child {
    border-bottom: 1px solid var(--abj404-border-light);
}

/* Make inline styles in table cells less prominent */
.abj404-accordion-content table td div[style*="display: inline"] {
    color: var(--abj404-text-muted);
}

/* Note text below textareas in table cells */
.abj404-accordion-content table td:last-child > br + text,
.abj404-accordion-content table td:last-child > textarea + br + text {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--abj404-text-muted);
}

/* Closeable list items for exclude pages */
.abj404-accordion-content .closeable-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.abj404-accordion-content .closeable-ul li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--abj404-surface-alt);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 4px;
    font-size: 13px;
}

/* Better styling for button groups */
.abj404-accordion-content button,
.abj404-accordion-content input[type="button"] {
    padding: 6px 12px;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    background: var(--abj404-surface);
    color: var(--abj404-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.abj404-accordion-content button:hover,
.abj404-accordion-content input[type="button"]:hover {
    background: var(--abj404-surface-hover);
    border-color: var(--abj404-primary);
}

/* Delete Debug File button - danger styling */
.abj404-accordion-content input#deleteDebugFile,
#deleteDebugFile {
    background: var(--abj404-danger-bg) !important;
    border: 1px solid var(--abj404-danger) !important;
    color: var(--abj404-danger) !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

.abj404-accordion-content input#deleteDebugFile:hover,
#deleteDebugFile:hover {
    background: var(--abj404-danger) !important;
    color: var(--abj404-on-accent) !important;
    border-color: var(--abj404-danger) !important;
}

/* Links inside card content - style as action links */
.abj404-card-content p a,
.abj404-card-content td a {
    color: var(--abj404-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border: 1px solid var(--abj404-primary) !important;
    border-radius: 4px !important;
    background: var(--abj404-info-bg) !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

.abj404-card-content p a:hover,
.abj404-card-content td a:hover {
    background: var(--abj404-primary) !important;
    color: var(--abj404-on-accent) !important;
}

/* ============================================
   Accessibility: Link-styled Buttons
   ============================================ */

.abj404-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--abj404-accent);
    text-decoration: none;
    cursor: pointer;
}

.abj404-link-button:hover {
    text-decoration: underline;
    color: var(--abj404-accent-hover);
}

.abj404-link-button:focus {
    outline: 2px solid var(--abj404-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================
   Accessibility: Focus Indicators
   ============================================ */

/* Visible focus indicators for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.abj404-tab:focus-visible,
.abj404-page-btn:focus-visible,
.abj404-btn:focus-visible,
.abj404-action-link:focus-visible {
    outline: 2px solid var(--abj404-accent);
    outline-offset: 2px;
}

/* Remove focus outline removal for tabs - they should have visible focus */
.abj404-tab:focus {
    outline: 2px solid var(--abj404-accent);
    outline-offset: -2px;
    box-shadow: none;
}

/* Ensure checkboxes have visible focus */
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--abj404-accent);
    outline-offset: 2px;
}

/* Table header links focus */
.abj404-table th a:focus-visible {
    outline: 2px solid var(--abj404-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Modal close button focus */
.abj404-modal-close:focus-visible {
    outline: 2px solid var(--abj404-accent);
    outline-offset: 2px;
}

/* ============================================
   Accessibility: Screen Reader Utilities
   ============================================ */

/* Visually hidden but accessible to screen readers */
.screen-reader-text,
.abj404-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link styles - visible when focused */
.abj404-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--abj404-accent);
    color: var(--abj404-on-accent);
    padding: 8px 16px;
    z-index: 100001;
    text-decoration: none;
    font-weight: 500;
}

.abj404-skip-link:focus {
    top: 0;
}

/* Live region for announcements */
.abj404-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific animations */
    .abj404-toast,
    .abj404-modal-content,
    .abj404-spinner,
    .abj404-collapse-icon,
    .abj404-accordion-toggle {
        animation: none !important;
        transition: none !important;
    }

    /* jQuery slideUp/slideDown alternatives - instant show/hide */
    .abj404-accordion-content {
        transition: none !important;
    }
}

/* ============================================
   Accessibility: High Contrast Mode Support
   ============================================ */

@media (forced-colors: active) {
    .abj404-badge,
    .abj404-type-badge {
        border: 1px solid currentColor;
    }

    .abj404-btn,
    .abj404-page-btn {
        border: 2px solid currentColor;
    }

    .abj404-table th,
    .abj404-table td {
        border: 1px solid currentColor;
    }
}

/* ============================================
   Tools Diagnostics
   ============================================ */

.abj404-diagnostics-summary table td {
    vertical-align: middle;
}

.abj404-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--abj404-border);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.abj404-pill-success { border-color: var(--abj404-success); }
.abj404-pill-warning { border-color: var(--abj404-warning); }
.abj404-pill-info    { border-color: var(--abj404-info); }

/* ── Advanced Options collapsible (Edit Redirect page) ─────────────────── */

.abj404-advanced-options {
    margin: 16px 0;
    border: 1px solid var(--abj404-border);
    border-radius: 4px;
    background: var(--abj404-bg);
}

.abj404-advanced-options__summary {
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.abj404-advanced-options__summary::-webkit-details-marker {
    display: none;
}

.abj404-advanced-options__summary::before {
    content: '▶';
    font-size: 10px;
    transition: transform 0.15s ease;
    display: inline-block;
}

.abj404-advanced-options[open] > .abj404-advanced-options__summary::before {
    transform: rotate(90deg);
}

.abj404-advanced-options__body {
    padding: 20px 28px 24px;
    border-top: 1px solid var(--abj404-border);
}

/* ── GSC Guided Setup UI ──────────────────────────────────────────────── */

/* Wizard steps list */
.abj404-wizard-steps {
    margin: 12px 0 16px 0;
    padding-left: 20px;
}
.abj404-wizard-steps li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Copy-URI widget */
.abj404-copy-uri-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.abj404-copy-uri-wrap code {
    flex: 1;
    padding: 5px 8px;
    background: var(--abj404-bg-muted);
    border: 1px solid var(--abj404-border);
    border-radius: 3px;
    font-size: 12px;
    word-break: break-all;
}
.abj404-copy-btn {
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.abj404-copy-btn--done {
    color: var(--abj404-success);
    border-color: var(--abj404-success);
}

/* GSC status: native bordered-label pattern */
.abj404-gsc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--abj404-border);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 12px;
}
.abj404-gsc-status--green { border-color: var(--abj404-success); }
.abj404-gsc-status--amber { border-color: var(--abj404-warning); }

/* Error box */
.abj404-gsc-error-box {
    background: var(--abj404-danger-bg);
    border: 1px solid var(--abj404-danger-border);
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--abj404-danger-text);
}
.abj404-gsc-error-box p {
    margin: 0 0 8px;
}
.abj404-gsc-error-box p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Behavior Tiles (404 Destination)
   ============================================ */

.abj404-behavior-tiles {
    margin: 0;
}

.abj404-tiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .abj404-tiles-grid {
        grid-template-columns: 1fr;
    }
}

.abj404-tile {
    position: relative;
    border: 2px solid var(--abj404-border);
    border-radius: 8px;
    padding: 20px 16px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    background: var(--abj404-surface);
    text-align: center;
}

.abj404-tile:hover {
    border-color: var(--abj404-primary);
    box-shadow: 0 0 0 1px var(--abj404-primary);
}

.abj404-tile:focus {
    outline: 2px solid var(--abj404-primary);
    outline-offset: 2px;
}

.abj404-tile.selected {
    border-color: var(--abj404-primary);
    background: color-mix(in srgb, var(--abj404-primary) 6%, var(--abj404-surface));
    box-shadow: 0 0 0 1px var(--abj404-primary);
}

.abj404-tile-badge {
    display: none;
    position: absolute;
    top: -10px;
    right: 12px;
    padding: 2px 8px;
    border: 1px solid var(--abj404-primary);
    border-radius: 2px;
    background: var(--abj404-surface);
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.abj404-tile[data-behavior="suggest"] .abj404-tile-badge {
    display: block;
}

.abj404-tile-icon {
    margin-bottom: 8px;
    color: var(--abj404-text-secondary);
}

.abj404-tile.selected .abj404-tile-icon {
    color: var(--abj404-primary);
}

.abj404-tile-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--abj404-text);
}

.abj404-tile-desc {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    color: var(--abj404-text-secondary);
}

.abj404-custom-page-picker {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--abj404-bg-subtle);
    border-radius: 6px;
    border: 1px solid var(--abj404-border);
}

/* Health status bar on Redirects landing page */
.abj404-health-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--abj404-bg-subtle);
    border: 1px solid var(--abj404-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--abj404-text);
}

.abj404-health-bar a {
    margin-left: 4px;
}

.abj404-health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.abj404-health-green {
    background: var(--abj404-success);
}

.abj404-health-yellow {
    background: var(--abj404-warning);
}

/* Used while the logs_hits rollup is being rebuilt: we don't know whether
   captured URLs need attention yet, so render an intentional muted dot
   instead of an uncolored (visually broken) circle. WordPress admin gray. */
.abj404-health-gray {
    background: var(--abj404-text-muted);
}

/* Header text wrapper — heading + guidance on same line */
.abj404-table-header-text {
    display: flex;
    align-items: baseline;
    gap: 24px;
}

/* Guidance text next to page headings (Simple mode) */
.abj404-guidance-subtitle {
    font-size: 13px;
    color: var(--abj404-text);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 6px 12px;
    background: var(--abj404-bg-subtle);
    border-left: 3px solid var(--abj404-accent);
    border-radius: 2px;
}

/* Suggested destination block on edit page */
.abj404-hidden {
    display: none !important;
}

.abj404-suggestion-block {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--abj404-info-bg);
    border: 1px solid var(--abj404-border);
    border-radius: 6px;
}

.abj404-suggestion-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--abj404-text-muted);
    margin-bottom: 8px;
}

.abj404-suggestion-content {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
}

.abj404-suggestion-actions {
    display: flex;
    gap: 8px;
}

body.abj404-dark-mode .abj404-guidance-subtitle {
    color: var(--abj404-dark-text-soft);
    background: var(--abj404-bg-subtle);
    border-left-color: var(--abj404-dark-accent-border);
}

body.abj404-dark-mode .abj404-suggestion-block {
    background: var(--abj404-dark-surface-deep);
    border-color: var(--abj404-dark-border-deep);
}

body.abj404-dark-mode .abj404-suggestion-label {
    color: var(--abj404-dark-text-muted);
}