[v-cloak] {
    display: none;
}

/* Main Container */
.afi-container {
    /* max-width: 1000px; */
    margin-top: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Card Design */
.afi-card {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    padding: 30px;
    margin-bottom: 20px;
}

.afi-card-header {
    border-bottom: 1px solid #f0f0f1;
    margin: -30px -30px 20px -30px;
    padding: 20px 30px;
    background: #fcfcfc;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
}

.afi-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.afi-step-badge {
    background: #2271b1;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

/* Checkbox Styles for Settings Page */
.afi-checkbox-container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.afi-checkbox {
    position: relative;
    display: flex;
    flex-basis: 280px;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin: 10px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fefefa;
    box-shadow: 0 5px 18px 0 rgba(0, 4, 32, 0.08);
    transition: background-color 0.3s ease;
    border: 1px solid #e2e4e7;
}

/* Active platform styling - when checkbox is checked */
.afi-checkbox:has(input[type="checkbox"]:checked) {
    background-color: #edfaef;
    border-color: #4bce61;
}

/* Fallback for browsers that don't support :has() */
.afi-checkbox.active {
    background-color: #edfaef;
    border-color: #4bce61;
}

.afi-elements-info {
    display: flex;
    align-items: center;
}

p.afi-el-title {
    font-size: 15px;
    font-weight: 600;
    color: #3a3c40;
    margin: 0.5em;
}

.afi-el-title {
    position: relative;
}

.adfoin-toggle-form {
    width: 28px;
    height: 16px;
    float: left;
    margin-top: 3px;
    margin-right: 4px;
    position: relative;
}

.adfoin-toggle-form input[type=checkbox] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    z-index: 1
}

.adfoin-toggle-form input[type=checkbox]:checked+.afi-slider {
    background-color: #4bce61;
}

.adfoin-toggle-form input[type=checkbox]:checked+.afi-slider::before {
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}

.adfoin-toggle-form .afi-slider {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .4s;
    background-color: #cdd0d2;
    border-radius: 16px;
}

.adfoin-toggle-form .afi-slider::before {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    left: 2px;
    bottom: 2px;
    transition: .2s;
    background-color: #fff;
    border-radius: 50%;
}

/* Form Elements */
.afi-form-group {
    margin-bottom: 20px;
}

.afi-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #3c434a;
    font-size: 14px;
}

.afi-input,
.afi-select,
.afi-textarea {
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    background-color: #fff;
    color: #2c3338;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.afi-textarea {
    height: auto;
    padding: 12px;
    line-height: 1.5;
}

.afi-input:focus,
.afi-select:focus,
.afi-textarea:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 0;
}

.afi-helper-text {
    font-size: 12px;
    color: #646970;
    margin-top: 5px;
}

/* Free-tier upgrade notice shown inside the Step 2 trigger card */
.afi-upgrade-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fcf9e8;
    border: 1px solid #f0e3a1;
    border-left: 3px solid #c9970d;
    border-radius: 4px;
    color: #4a3d0c;
    font-size: 13px;
    line-height: 1.5;
}

.afi-upgrade-notice .dashicons {
    color: #c9970d;
    flex-shrink: 0;
    margin-top: 1px;
}

.afi-upgrade-notice p {
    margin: 0;
}

/* Grid System */
.afi-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.afi-col {
    padding: 0 10px;
    box-sizing: border-box;
}

.afi-col-12 {
    width: 100%;
}

.afi-col-6 {
    width: 50%;
}

.afi-col-4 {
    width: 33.333%;
}

/* Buttons */
.afi-btn-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.4;
    min-height: 36px;
    margin: 0;
    padding: 0 20px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.2s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.afi-btn-primary:hover {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.afi-btn-primary .dashicons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 1;
}
}

.afi-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


.afi-btn-secondary {
    color: #2271b1;
    border-color: #2271b1;
    background: #f6f7f7;
    vertical-align: top;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    min-height: 36px;
    margin: 0 0 0 10px;
    padding: 0 20px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


.afi-btn-secondary:hover {
    background: #f0f0f1;
    border-color: #0a4b78;
    color: #0a4b78;
}

.afi-btn-secondary .dashicons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 1;
}

/* Refresh Button (legacy class — now applied to a real <button>) */
.afi-refresh-button {
    cursor: pointer;
    transition: color 0.2s ease;
}

.afi-refresh-button:hover {
    color: #2271b1;
}

/* Icon-only buttons (replaces clickable spans for keyboard / a11y) */
.afi-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #50575e;
    cursor: pointer;
    padding: 0;
    margin: 0 0 0 6px;
    width: 32px;
    height: 32px;
    line-height: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    vertical-align: middle;
    text-align: center;
}

.afi-icon-btn:hover {
    color: #2271b1;
    background: rgba(34, 113, 177, 0.08);
}

.afi-icon-btn:focus {
    outline: 0;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    color: #2271b1;
}

.afi-icon-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.afi-icon-btn .dashicons {
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 1;
}

/* Destructive (Delete) button — reserved for actions that remove data */
.afi-btn-danger {
    color: #b32d2e;
    border-color: #b32d2e;
    background: #fff;
    vertical-align: top;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    min-height: 36px;
    margin: 0 0 0 10px;
    padding: 0 20px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.afi-btn-danger:hover,
.afi-btn-danger:focus {
    background: #b32d2e;
    border-color: #b32d2e;
    color: #fff;
    outline: 0;
    box-shadow: 0 4px 6px rgba(179, 45, 46, 0.15);
}

/* Loading Spinner */
.afi-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(34, 113, 177, 0.3);
    border-radius: 50%;
    border-top-color: #2271b1;
    animation: afi-spin 1s ease-in-out infinite;
    margin-left: 10px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.3s;
}

.afi-spinner.is-active {
    opacity: 1;
}

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

/* Mapping Table (Dynamic Fields) */
.afi-mapping-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.afi-mapping-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #f0f0f1;
    color: #646970;
    font-weight: 600;
}

.afi-mapping-table td {
    padding: 10px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: top;
}

.afi-mapping-table tr:last-child td {
    border-bottom: none;
}

/* Conditional Logic */
.afi-cl-group {
    background: #f6f7f7;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    border: 1px solid #dcdcde;
}

.afi-cl-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.afi-cl-row:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media only screen and (max-width: 768px) {

    .afi-col-6,
    .afi-col-4 {
        width: 100%;
    }

    .afi-cl-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Header Styles
 *
 * The custom .afi-header bar (logo + bell + KB icons) was retired in
 * 1.128.4 — it duplicated WordPress sidebar branding, fought
 * Screen Options for vertical space, and the bell linked to nowhere.
 * Page titles now use the WP-native h1.wp-heading-inline +
 * a.page-title-action pattern (rendered by
 * Advanced_Form_Integration_Admin_Header::render_page_title), and
 * the Knowledge Base link lives in the standard WP Help tab.
 *
 * The rules below are still consumed by views/view_log.php (the
 * single-log detail view), which keeps its own header strip. */
.afi-log-header {
    background: #fff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Counteract WordPress wrap margin */
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e4e7;
}

.afi-logo {
    margin-right: auto;
}

.afi-logo-text {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
    color: #1d2327;
}

/* Filter Controls */
.afi-filter-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Fix Admin Footer */
#wpfooter {
    clear: both;
    position: relative;
}

/* Save Button Styling */
.afi-save-button {
    background-color: #2271b1 !important;
    color: #fff !important;
    border: none !important;
    padding: 0 20px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.afi-save-button:hover {
    background-color: #135e96 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

.afi-save-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.afi-filter-links {
    display: inline-flex;
    background: #f0f0f1;
    border-radius: 4px;
    padding: 3px;
}

.afi-filter-btn {
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #646970;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    line-height: 1.4;
}

.afi-filter-btn:hover {
    color: #1d2327;
    background: rgba(255, 255, 255, 0.5);
}

.afi-filter-btn.active {
    background: #fff;
    color: #2271b1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.afi-search-wrapper {
    position: relative;
}

.afi-search-wrapper input[type="search"] {
    padding-left: 30px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%238c8f94%22%20d%3D%22M12.9%2014.32a8%208%200%201%201%201.41-1.41l5.35%205.33-1.42%201.42-5.33-5.34zM8%2014A6%206%200%201%200%208%202a6%206%200%200%200%200%2012z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 16px;
}

/* Adjust Checkbox Grid for better density */
.afi-checkbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.afi-checkbox {
    margin: 0;
    /* Reset margin as we use grid gap */
    flex-basis: auto;
    /* Reset flex-basis */
    width: auto;
}

/* =============================================================
 * Help Page — Top Support Cards
 * ============================================================= */
.afi-help-top-card {
    padding: 0;
    overflow: hidden;
}

.afi-help-top-grid {
    display: flex;
    flex-wrap: wrap;
}

.afi-help-top-item {
    flex: 1;
    min-width: 200px;
    padding: 36px 24px;
    text-align: center;
    border-right: 1px solid #e2e4e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.afi-help-top-item:last-child {
    border-right: none;
}

/* Coloured icon container */
.afi-help-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.afi-help-icon-wrap .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #fff;
}

.afi-help-icon-support { background: linear-gradient(135deg, #2271b1, #135e96); }
.afi-help-icon-docs    { background: linear-gradient(135deg, #00a32a, #007a1f); }
.afi-help-icon-video   { background: linear-gradient(135deg, #d63638, #a00000); }
.afi-help-icon-review  { background: linear-gradient(135deg, #f0a500, #c17f00); }

/* =============================================================
 * Help Page — Platform Documentation Card
 * ============================================================= */
.afi-help-docs-card {
    padding: 0;
    overflow: hidden;
}

/* Search bar strip */
.afi-help-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #fcfcfc;
    border-bottom: 1px solid #e2e4e7;
}

.afi-help-search-icon {
    color: #8c8f94;
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.afi-help-search-input {
    flex: 1;
    max-width: 400px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
    color: #2c3338;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.afi-help-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 0;
}

.afi-help-search-count {
    display: none;
    font-size: 13px;
    color: #646970;
    font-weight: 500;
}

/* Three-column docs grid */
.afi-help-docs-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.afi-help-docs-col {
    flex: 1;
    min-width: 260px;
    padding: 28px 28px 36px;
    text-align: left;
}

.afi-help-docs-col-bordered {
    border-left: 1px solid #e2e4e7;
    border-right: 1px solid #e2e4e7;
}

/* Section header inside a column */
.afi-help-section-header {
    margin-bottom: 12px;
}

.afi-help-section-header .afi-help-title {
    margin-bottom: 6px;
}

.afi-help-section-header .afi-help-desc {
    margin-bottom: 0;
}

/* Divider between stacked sections in column 1 */
.afi-help-section-divider {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #f0f0f1;
}

/* Count pill on section headings */
.afi-help-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f1;
    color: #50575e;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1.4;
}

/* Responsive — top cards wrap at 2 per row on medium screens */
@media only screen and (max-width: 960px) {
    .afi-help-top-item {
        flex: 1 1 50%;
        border-bottom: 1px solid #e2e4e7;
    }
    .afi-help-top-item:nth-child(even) {
        border-right: none;
    }
    .afi-help-top-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* Responsive — stack everything on small screens */
@media only screen and (max-width: 600px) {
    .afi-help-top-item {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #e2e4e7;
    }
    .afi-help-top-item:last-child {
        border-bottom: none;
    }
    .afi-help-docs-col {
        min-width: 100%;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e4e7;
    }
    .afi-help-docs-col:last-child {
        border-bottom: none;
    }
}

/* Help Page Styles */
.afi-help-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.afi-help-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f1;
    font-size: 14px;
    color: #3c434a;
}

.afi-help-list li:last-child {
    border-bottom: none;
}

.afi-help-list li a {
    text-decoration: none;
    color: #2271b1;
}

.afi-help-list li a:hover {
    color: #135e96;
    text-decoration: underline;
}

/* Help Page Grid Layout */
.afi-help-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.afi-help-col {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.afi-help-col .afi-card {
    height: 100%;
    margin-bottom: 0;
    /* Override default card margin */
    display: flex;
    flex-direction: column;
}

.afi-help-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
}

.afi-help-icon {
    font-size: 48px;
    color: #ed5255;
    margin-bottom: 20px;
    width: 48px;
    height: 48px;
}

.afi-help-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.afi-help-desc {
    color: #646970;
    margin: 0 0 25px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Unified Help Grid */
.afi-help-unified-grid {
    display: flex;
    flex-wrap: wrap;
}

.afi-help-unified-item {
    flex: 1;
    min-width: 200px;
    padding: 40px 20px;
    text-align: center;
    border-right: 1px solid #e2e4e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.afi-help-unified-item:last-child {
    border-right: none;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
    .afi-help-unified-item {
        border-right: none;
        border-bottom: 1px solid #e2e4e7;
    }

    .afi-help-unified-item:last-child {
        border-bottom: none;
    }
}

/* Log Table Styles */
/* .wp-list-table.logs {
    border: 1px solid #e2e4e7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
} */

/* .wp-list-table.logs thead th,
.wp-list-table.logs tfoot th {
    background: #fcfcfc;
    color: #1d2327;
    font-weight: 600;
    border-bottom: 1px solid #e2e4e7;
    border-top: none;
    padding: 15px 20px;
} */

/* .wp-list-table.logs tbody td {
    padding: 15px 20px;
    vertical-align: middle;
    color: #3c434a;
} */

/* Log Details Page Styles */
.afi-log-details-table {
    width: 100%;
    border-collapse: collapse;
}

.afi-log-details-table th {
    width: 200px;
    padding: 20px;
    text-align: left;
    vertical-align: top;
    font-weight: 600;
    color: #1d2327;
    border-bottom: 1px solid #f0f0f1;
}

.afi-log-details-table td {
    padding: 20px;
    vertical-align: top;
    color: #3c434a;
    border-bottom: 1px solid #f0f0f1;
}

.afi-log-details-table tr:last-child th,
.afi-log-details-table tr:last-child td {
    border-bottom: none;
}


/* .wp-list-table.logs tbody tr:nth-child(odd) {
    background-color: #fff;
} */

/* .wp-list-table.logs tbody tr:nth-child(even) {
    background-color: #fcfcfc;
} */

/* .wp-list-table.logs .column-integration_id span {
    font-weight: 500;
    color: #2271b1;
} */

/* Response Codes */
.afi-log-response-code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background: #f0f0f1;
    /* Default */
    color: #646970;
}

.afi-log-response-code.code-200 {
    background: #edfaef;
    color: #00a32a;
    border: 1px solid #c3e6cb;
}

.afi-log-response-code.code-400,
.afi-log-response-code.code-500 {
    background: #fbeaea;
    color: #d63638;
    border: 1px solid #f5c6cb;
}

.afi-log-date {
    font-size: 12px;
    color: #8c8f94;
    margin-top: 5px;
}

/* Action Icons */
.wp-list-table.logs .column-actions {
    text-align: right;
}

.afi-header-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.afi-code-block {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 15px;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    font-size: 13px;
    color: #2c3338;
    margin: 0;
}

/* Enhanced Log Details Table */
.afi-log-details-table th {
    width: 200px;
    padding: 20px;
    text-align: left;
    vertical-align: top;
    font-weight: 600;
    color: #1d2327;
    border-bottom: 1px solid #f0f0f1;
    background-color: #fcfcfc;
}

.afi-log-details-table tr:hover td {
    background-color: #fafafa;
}

.afi-log-details-table td {
    padding: 20px;
    vertical-align: top;
    color: #3c434a;
    border-bottom: 1px solid #f0f0f1;
}

/* Status Badge in Details */
.afi-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
}

.afi-status-badge.success {
    background: #edfaef;
    color: #00a32a;
    border: 1px solid #c3e6cb;
}

.afi-status-badge.error {
    background: #fbeaea;
    color: #d63638;
    border: 1px solid #f5c6cb;
}



.wp-list-table.logs .column-actions a {
    text-decoration: none;
    margin-left: 8px;
    display: inline-block;
}

.wp-list-table.logs .column-actions .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #8c8f94;
    transition: color 0.2s ease;
}

.wp-list-table.logs .column-actions .dashicons:hover {
    color: #2271b1;
}

.wp-list-table.logs .column-actions .afi-icon-copy-full-log:hover {
    color: #2271b1;
    cursor: pointer;
}

.afi-full-log-icon-container {
    display: inline-block;
    margin-left: 8px;
}

/* Fix CodeMirror Overflow */
.CodeMirror {
    height: auto !important;
    min-height: 100px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

.CodeMirror-scroll {
    max-height: 500px;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.afi-log-details-table td .CodeMirror {
    max-width: 800px;
    /* Prevent it from pushing the table too wide */
}

/* Log Navigation */
.afi-log-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e4e7;
}

.afi-log-navigation .afi-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: auto;
    min-height: 36px;
    line-height: 1.2;
    font-size: 14px;
    color: #50575e;
    background: #fff;
    border-color: #dcdcde;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.afi-log-navigation .afi-btn-secondary:hover {
    background: #fcfcfc;
    border-color: #2271b1;
    color: #2271b1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.afi-log-navigation .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Copy Full Log Button Polish */
.button-copy-full-log {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    height: auto;
    min-height: 32px;
    line-height: 1.2;
    font-size: 13px;
    color: #50575e;
    background: #fff;
    border-color: #dcdcde;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button-copy-full-log:hover {
    background: #fcfcfc;
    border-color: #2271b1;
    color: #2271b1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-copy-full-log .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Instructions Card Modern Design */
.afi-instructions-card {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.afi-instructions-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.afi-instructions-header {
    background: linear-gradient(to right, #fcfcfc, #f9f9f9);
    border-bottom: 1px solid #f0f0f1;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    display: flex;
    align-items: center;
    gap: 10px;
}

.afi-instructions-header .dashicons {
    color: #2271b1;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.afi-instructions-body {
    padding: 20px;
    font-size: 14px;
}

.afi-instructions-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: decimal;
}

.afi-instructions-list li {
    margin-bottom: 15px;
    color: #50575e;
    line-height: 1.6;
}

.afi-instructions-list li:last-child {
    margin-bottom: 0;
}

.afi-instructions-list li strong {
    color: #1d2327;
    font-weight: 600;
}

.afi-code-block {
    background: #f0f6fc;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    color: #1f2328;
    display: block;
    margin: 8px 0;
    word-break: break-all;
    font-size: 12px;
    position: relative;
}

.afi-code-block:hover {
    border-color: #2271b1;
}

/* Accounts Card Design */
.afi-accounts-card {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.afi-accounts-header {
    background: #fff;
    border-bottom: 1px solid #f0f0f1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.afi-accounts-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.afi-accounts-title .dashicons {
    color: #2271b1;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.afi-accounts-body {
    padding: 0;
}

/* Override WP List Table Styles for Card */
.afi-accounts-card .wp-list-table {
    border: none;
    box-shadow: none;
    margin: 0;
}

.afi-accounts-card .wp-list-table thead th {
    border-bottom: 1px solid #e2e4e7;
    background: #fcfcfc;
    padding: 15px 20px;
    font-weight: 600;
    color: #646970;
}

.afi-accounts-card .wp-list-table tbody td {
    padding: 15px 20px;
    vertical-align: middle;
    color: #3c434a;
    border-bottom: 1px solid #f0f0f1;
}

.afi-accounts-card .wp-list-table tr:last-child td {
    border-bottom: none;
}

.afi-accounts-card .button-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    font-weight: 600;
    padding: 4px 12px;
    height: 32px;
    line-height: 22px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.afi-accounts-card .button-primary:hover {
    background: #135e96;
    border-color: #135e96;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modal Styles */
.afi-modal {
    display: block;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.afi-modal-content {
    background-color: #fefefe;
    padding: 30px;
    border: 1px solid #888;
    width: 500px;
    max-width: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: afi-modal-fade-in 0.3s ease;
}

@keyframes afi-modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.afi-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    line-height: 1;
    transition: color 0.2s;
}

.afi-close:hover,
.afi-close:focus {
    color: #1d2327;
    text-decoration: none;
    cursor: pointer;
}

.afi-modal h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: #1d2327;
}

.afi-modal .form-table th {
    width: 120px;
    padding: 15px 10px 15px 0;
}

.afi-modal .form-table td {
    padding: 10px 0;
}

.afi-modal .button-primary {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    height: 40px;
    font-size: 15px;
}
/* =============================================================
 * Searchable Select (afi-searchable-select)
 * Replaces the native <select> for the form-provider and
 * action-provider pickers with a filterable dropdown.
 * ============================================================= */
.afi-searchable-select {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    color: #2c3338;
}

.afi-searchable-select.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Trigger button — looks like an .afi-select for visual consistency */
.afi-ss-trigger {
    width: 100%;
    min-height: 40px;
    padding: 0 56px 0 12px;
    background: #fff;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    color: #2c3338;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
}

.afi-ss-trigger:focus,
.afi-searchable-select.is-open .afi-ss-trigger {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 0;
}

.afi-ss-trigger[disabled] {
    background: #f0f0f1;
    cursor: not-allowed;
}

.afi-ss-value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2c3338;
}

.afi-ss-placeholder {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #757575;
}

.afi-ss-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #50575e;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.15s ease-in-out;
}

.afi-searchable-select.is-open .afi-ss-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.afi-ss-clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #757575;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}

.afi-ss-clear .dashicons {
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 1;
}

.afi-ss-clear:hover {
    color: #b32d2e;
    background: rgba(179, 45, 46, 0.08);
}

.afi-ss-clear:focus {
    outline: 0;
    color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Dropdown panel */
.afi-ss-dropdown {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 320px;
}

.afi-ss-search-wrap {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #f0f0f1;
    background: #fafafa;
}

.afi-ss-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c8f94;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

.afi-ss-search {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0 10px 0 32px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    color: #2c3338;
    font-size: 13px;
    box-sizing: border-box;
}

.afi-ss-search:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 0;
}

/* Options list */
.afi-ss-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 260px;
}

.afi-ss-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    color: #2c3338;
    line-height: 1.4;
    user-select: none;
}

.afi-ss-option.is-active {
    background: #f0f6fc;
    color: #1d2327;
}

.afi-ss-option.is-selected {
    background: #e7f1f9;
    color: #1d2327;
    font-weight: 600;
}

.afi-ss-option.is-active.is-selected {
    background: #d9e9f6;
}

.afi-ss-option-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.afi-ss-check {
    color: #2271b1;
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
}

.afi-ss-mark {
    background: #fff8c5;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.afi-ss-empty {
    padding: 16px 12px;
    text-align: center;
    color: #757575;
    font-size: 13px;
}

/* Stack vertically on narrow screens */
@media (max-width: 782px) {
    .afi-ss-dropdown {
        max-height: 60vh;
    }
    .afi-ss-list {
        max-height: 50vh;
    }
}

/* =============================================================
 * Accessibility & validation utilities
 * ============================================================= */

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

/* Reset native fieldset chrome so it doesn't fight the card design.
 * NOTE: When .afi-fieldset is used together with .afi-card, the chained
 * selector below restores the card's box model (border / padding / margin)
 * because the single-class rules here would otherwise override .afi-card
 * (later-in-source-order wins on equal specificity). */
.afi-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.afi-fieldset > legend {
    padding: 0;
}

/* Restore card chrome when a card doubles as a fieldset
 * (specificity 0,2,0 beats either single-class rule). */
.afi-card.afi-fieldset {
    border: 1px solid #e2e4e7;
    margin: 0 0 20px 0;
    padding: 30px;
}

/* Required-field star next to labels */
.afi-required-mark {
    color: #b32d2e;
    margin-left: 4px;
    font-weight: 700;
    line-height: 1;
}
.afi-required-mark::before {
    content: '*';
}

/* Inline error text under fields */
.afi-field-error {
    display: block;
    color: #b32d2e;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

.afi-field-error::before {
    content: '\26A0\FE0F';
    margin-right: 4px;
}

/* Error state on form controls */
.afi-input.has-error,
.afi-select.has-error,
.afi-textarea.has-error {
    border-color: #b32d2e;
}

.afi-input.has-error:focus,
.afi-select.has-error:focus,
.afi-textarea.has-error:focus {
    border-color: #b32d2e;
    box-shadow: 0 0 0 1px #b32d2e;
}

.afi-searchable-select.has-error .afi-ss-trigger {
    border-color: #b32d2e;
}

.afi-searchable-select.has-error.is-open .afi-ss-trigger,
.afi-searchable-select.has-error .afi-ss-trigger:focus {
    border-color: #b32d2e;
    box-shadow: 0 0 0 1px #b32d2e;
}

/* Disabled primary button (Save when canSave is false) */
.afi-btn-primary[disabled],
.afi-btn-primary:disabled {
    background: #c3c4c7;
    border-color: #c3c4c7;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.85;
}

.afi-btn-primary[disabled]:hover,
.afi-btn-primary:disabled:hover {
    background: #c3c4c7;
    border-color: #c3c4c7;
    transform: none;
    box-shadow: none;
}

/* Inline resend form sits next to the error banner */
.afi-inline-resend {
    display: inline;
    margin: 0 0 0 8px;
}

.afi-inline-resend button {
    background: none;
    border: 0;
    padding: 0;
    color: #2271b1;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}

.afi-inline-resend button:hover,
.afi-inline-resend button:focus {
    color: #135e96;
    outline: 0;
}

/* =============================================================
 * Toast notifications
 * Stack of transient messages anchored to the bottom-right of
 * the viewport. Lit by the Vue showToast() helper.
 * ============================================================= */
.afi-toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    pointer-events: none;
}

.afi-toast {
    background: #1d2327;
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: auto;
    animation: afi-toast-in 0.2s ease-out;
}

.afi-toast.is-leaving {
    animation: afi-toast-out 0.2s ease-in forwards;
}

.afi-toast-success {
    background: #00781f;
}

.afi-toast-error {
    background: #b32d2e;
}

.afi-toast-info {
    background: #2271b1;
}

.afi-toast-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    margin-top: 1px;
}

.afi-toast-body {
    flex: 1 1 auto;
    word-wrap: break-word;
}

.afi-toast-close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 18px;
    flex: 0 0 auto;
}

.afi-toast-close:hover,
.afi-toast-close:focus {
    color: #fff;
    outline: 0;
}

@keyframes afi-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes afi-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}


/* =============================================================
 * Utility classes
 * Replace one-off inline styles scattered through the views.
 * ============================================================= */

/* Inline input + spinner / icon-button group (Form Provider, Form
 * Name, Platform fields). Lays the control next to its trailing
 * spinner / refresh button. */
.afi-input-group {
    display: flex;
    align-items: center;
}

/* Centered empty / loading state inside a card */
.afi-empty-state {
    padding: 20px;
    text-align: center;
}

.afi-empty-state p {
    margin: 10px 0 0 0;
}

/* When a spinner needs to render inline (not floated) inside an
 * empty-state block. */
.afi-spinner-inline {
    float: none;
    display: inline-block;
}

/* Bare action bar (Save / Cancel / Delete) — no card chrome,
 * just inline buttons sitting flush with the surrounding cards. */
.afi-actions {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

/* Spacing helper for the Conditional Logic block that sits below
 * the mapping table. */
.afi-cl-wrap {
    margin-top: 20px;
}

/* =============================================================
 * Edit-view status strip + sparkline
 * Compact health summary that sits above the form.
 * ============================================================= */
.afi-status-strip {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    padding: 14px 18px;
    margin: 16px 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    color: #2c3338;
    border-left: 4px solid #2271b1;
}

.afi-status-strip[data-state="success"] {
    border-left-color: #00781f;
}
.afi-status-strip[data-state="warning"] {
    border-left-color: #c9970d;
}
.afi-status-strip[data-state="error"] {
    border-left-color: #b32d2e;
}
.afi-status-strip[data-state="empty"] {
    border-left-color: #c3c4c7;
}

.afi-status-cell {
    flex: 0 1 auto;
    padding: 0 18px;
    border-right: 1px solid #f0f0f1;
    line-height: 1.2;
    min-width: 0;
}

.afi-status-cell:first-child {
    padding-left: 0;
}
.afi-status-cell:last-of-type {
    border-right: 0;
}

.afi-status-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #646970;
    font-weight: 600;
    margin-bottom: 4px;
}

.afi-status-value {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.1;
}

.afi-status-meta {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    color: #646970;
    font-weight: 500;
}

.afi-status-rate.is-success { color: #00781f; }
.afi-status-rate.is-warning { color: #c9970d; }
.afi-status-rate.is-error   { color: #b32d2e; }

.afi-status-cell-spark {
    color: #2271b1;
    padding-top: 4px;
}
.afi-status-strip[data-state="success"] .afi-status-cell-spark { color: #00781f; }
.afi-status-strip[data-state="warning"] .afi-status-cell-spark { color: #c9970d; }
.afi-status-strip[data-state="error"]   .afi-status-cell-spark { color: #b32d2e; }

.afi-sparkline {
    display: block;
    color: inherit;
}

.afi-status-actions {
    margin-left: auto;
    padding-left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.afi-status-actions a,
.afi-status-actions button {
    color: #2271b1;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.afi-status-actions a:hover,
.afi-status-actions button:hover,
.afi-status-actions a:focus,
.afi-status-actions button:focus {
    color: #135e96;
    text-decoration: underline;
    outline: 0;
}

.afi-status-empty {
    flex: 1 1 auto;
    color: #646970;
    font-size: 13px;
}

/* Stack on narrow screens */
@media only screen and (max-width: 768px) {
    .afi-status-strip {
        flex-direction: column;
        align-items: flex-start;
    }
    .afi-status-cell {
        border-right: 0;
        border-bottom: 1px solid #f0f0f1;
        padding: 8px 0;
        width: 100%;
    }
    .afi-status-cell:last-of-type {
        border-bottom: 0;
    }
    .afi-status-actions {
        margin-left: 0;
        padding-left: 0;
        padding-top: 8px;
        width: 100%;
    }
}

/* CL row: allow wrapping so the .afi-cl-hint helper text below the row
 * (when a date operator is selected) drops to its own line instead of
 * crowding the flex children. */
.afi-cl-row {
    flex-wrap: wrap;
}

.afi-cl-hint {
    flex-basis: 100%;
    margin: 0;
    padding-top: 4px;
}

/* Remove-condition button — uses the neutral .afi-icon-btn shell with a
 * destructive red-on-hover state to make removal visually distinct from
 * the (also-icon-button) Refresh control. */
.afi-cl-remove:hover,
.afi-cl-remove:focus {
    color: #b32d2e;
    background: rgba(179, 45, 46, 0.08);
    border-color: transparent;
}

.afi-cl-remove:focus {
    box-shadow: 0 0 0 1px #b32d2e;
}

/* Empty-state placeholder shown when CL is active but no conditions have
 * been added yet. */
.afi-cl-empty {
    background: #f9f9fa;
    border: 1px dashed #c3c4c7;
    border-radius: 6px;
    padding: 16px 20px;
    text-align: center;
    color: #50575e;
    margin: 0;
}

.afi-cl-empty p {
    margin: 0 0 10px 0;
    color: #50575e;
}

.afi-cl-empty .afi-btn-secondary {
    margin: 0;
}

/* =============================================================
 * Integrations list table (?page=advanced-form-integration)
 *
 * Column widths previously emitted as inline <style> from
 * Advanced_Form_Integration_List_Table::admin_header(). Pulled into
 * the cacheable stylesheet so adjustments don't require a PHP edit.
 * Scoped via the page body class WordPress sets on the admin screen.
 * ============================================================= */
body.toplevel_page_advanced-form-integration .wp-list-table .column-id              { width: 8%;  }
body.toplevel_page_advanced-form-integration .wp-list-table .column-title           { width: 18%; }
body.toplevel_page_advanced-form-integration .wp-list-table .column-form_provider   { width: 13%; }
body.toplevel_page_advanced-form-integration .wp-list-table .column-form_name       { width: 13%; }
body.toplevel_page_advanced-form-integration .wp-list-table .column-action_provider { width: 13%; }
body.toplevel_page_advanced-form-integration .wp-list-table .column-task            { width: 13%; }
body.toplevel_page_advanced-form-integration .wp-list-table .column-health          { width: 14%; }
body.toplevel_page_advanced-form-integration .wp-list-table .column-status          { width: 12%; }

/* Provider filter row in extra_tablenav. Keeps the two selects from
 * bumping up against each other and gives the filter button a tiny
 * gap so it visually groups with its inputs. */
.adfoin-provider-filters select {
    margin-right: 6px;
    max-width: 220px;
}

.adfoin-provider-filters .button {
    margin-left: 2px;
}

@media only screen and (max-width: 782px) {
    .adfoin-provider-filters select {
        margin-bottom: 6px;
    }
}

/* =============================================================
 * Health column (list table)
 * ============================================================= */
.afi-health-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.afi-health-link:hover .afi-health-label {
    text-decoration: underline;
}

.afi-health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #c3c4c7;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}
.afi-health-success { background: #46b450; }
.afi-health-warning { background: #ffb900; }
.afi-health-error   { background: #d63638; }
.afi-health-never   { background: #c3c4c7; }

.afi-health-label {
    font-size: 12px;
    color: #50575e;
    white-space: nowrap;
}

/* =============================================================
 * Empty state — first-run illustration + CTA shown via no_items()
 * inside the WP_List_Table no-results <td>. Centered, generous
 * vertical padding so it reads as a proper landing rather than a
 * stranded sentence.
 * ============================================================= */
.wp-list-table .no-items td {
    padding: 0;
}

.afi-empty-state {
    text-align: center;
    padding: 60px 24px 56px;
    margin: 0 auto;
    max-width: 540px;
}

.afi-empty-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    display: block;
}

.afi-empty-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #1d2327;
}

.afi-empty-subtitle {
    margin: 0 0 24px;
    color: #50575e;
    font-size: 14px;
    line-height: 1.55;
}

.afi-empty-actions {
    margin: 0 0 16px;
}

.afi-empty-actions .button-hero {
    min-width: 220px;
}

.afi-empty-link {
    margin: 0;
    font-size: 13px;
}

.afi-empty-link a {
    text-decoration: none;
    color: #2271b1;
}

.afi-empty-link a:hover,
.afi-empty-link a:focus {
    color: #135e96;
    text-decoration: underline;
}

@media only screen and (max-width: 600px) {
    .afi-empty-state {
        padding: 40px 16px 36px;
    }
    .afi-empty-icon {
        width: 72px;
        height: 72px;
    }
    .afi-empty-title {
        font-size: 18px;
    }
}

/* =============================================================
 * Toggle loading state — spinner overlays the toggle while its
 * AJAX request is in flight. Pointer-events disabled so a
 * frustrated user can't queue more clicks; opacity dims the
 * underlying state so it's obvious the toggle isn't in its
 * settled position yet.
 * ============================================================= */
.adfoin-toggle-form {
    position: relative;
}
.adfoin-toggle-form.is-loading {
    pointer-events: none;
    opacity: 0.6;
}
.adfoin-toggle-form.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid rgba(34, 113, 177, 0.25);
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: afi-spin 0.7s linear infinite;
}
@keyframes afi-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================
 * Vanilla toast for the list page (and any non-Vue surface). The
 * edit/new pages use a Vue toast component; this is the lighter
 * jQuery-driven equivalent that gets injected into <body> the
 * first time core.js needs to surface a message.
 * ============================================================= */
.afi-core-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}
.afi-core-toast {
    background: #fff;
    color: #1d2327;
    padding: 10px 36px 10px 14px;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #2271b1;
    font-size: 13px;
    line-height: 1.45;
    min-width: 240px;
    max-width: 380px;
    pointer-events: auto;
    position: relative;
    animation: afi-toast-in 0.22s ease-out;
}
.afi-core-toast.is-leaving {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.afi-core-toast-success { border-left-color: #46b450; }
.afi-core-toast-error   { border-left-color: #d63638; }
.afi-core-toast-info    { border-left-color: #2271b1; }
.afi-core-toast-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #50575e;
    padding: 4px 6px;
}
.afi-core-toast-close:hover { color: #1d2327; }
@keyframes afi-toast-in {
    from { transform: translateX(12px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* =============================================================
 * Touch-friendly row actions. WP-core hides .row-actions until
 * hover, which is unreachable on touch screens. On devices
 * without hover capability, always show them.
 * ============================================================= */
@media (hover: none) {
    .wp-list-table tr .row-actions {
        position: static !important;
        margin: 4px 0 0;
        color: inherit;
        opacity: 1 !important;
        left: auto;
    }
    .wp-list-table tr .row-actions span.delete a { color: #b32d2e; }
}

/* =============================================================
 * Brief highlight on freshly-duplicated rows. Yellow-fade pattern
 * familiar from WP core (Recently created post highlight) so the
 * convention reads instantly.
 * ============================================================= */
@keyframes afi-row-highlight-fade {
    0%   { background-color: #fff8c5; }
    100% { background-color: transparent; }
}
.wp-list-table tr.afi-row-highlight,
.wp-list-table tr.afi-row-highlight td {
    animation: afi-row-highlight-fade 3s ease-out 1;
}

/* =============================================================
 * Log list page — column widths
 * Replaces the inline <style> block previously emitted by
 * Advanced_Form_Integration_Log_Table::admin_header().
 * Scoped to the log page body class set by WordPress.
 * ============================================================= */
body.afi_page_advanced-form-integration-log .wp-list-table .column-response_code  { width: 10%; }
body.afi_page_advanced-form-integration-log .wp-list-table .column-integration_id { width: 14%; }
body.afi_page_advanced-form-integration-log .wp-list-table .column-request_data   { width: 25%; }
body.afi_page_advanced-form-integration-log .wp-list-table .column-response_data  { width: 25%; }
body.afi_page_advanced-form-integration-log .wp-list-table .column-time           { width: 12%; }
body.afi_page_advanced-form-integration-log .wp-list-table .column-actions        { width: 9%;  text-align: right; }

/* =============================================================
 * Inline SVG icon — used in log action buttons.
 * Sized to match the surrounding afi-icon-btn shell (32 × 32)
 * and inherits color so hover/focus states work automatically.
 * ============================================================= */
.afi-svg-icon {
    display: block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    pointer-events: none;
    margin: auto;
}

/* Ensure SVGs inside icon buttons stay centred regardless of WP admin overrides */
.afi-icon-btn > .afi-svg-icon,
.afi-icon-btn > svg {
    margin: 0;
}

/* Spinner state — single open-arc SVG that rotates */
.afi-copy-spinner {
    animation: afi-copy-spin 0.7s linear infinite;
    transform-origin: center;
}

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

/* Success state — button turns green while the tick is shown */
.afi-icon-btn.afi-copy-success {
    color: #00a32a;
}
.afi-icon-btn.afi-copy-success:hover {
    color: #007a1f;
    background: rgba(0, 163, 42, 0.08);
}

/* =============================================================
 * Log list — action icons row
 * ============================================================= */
.afi-log-actions-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

/* Red-on-hover destructive icon for the per-row delete. */
.afi-icon-btn-delete:hover,
.afi-icon-btn-delete:focus {
    color: #b32d2e;
    background: rgba(179, 45, 46, 0.08);
}

.afi-icon-btn-delete:focus {
    box-shadow: 0 0 0 1px #b32d2e;
    border-color: transparent;
}

/* "deleted" badge shown when a log row's integration no longer exists. */
.afi-log-deleted-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8c8f94;
    background: #f0f0f1;
    border-radius: 3px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: 3px;
}

/* Truncated data preview in Request / Response cells. */
.afi-log-data-preview {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #50575e;
    font-size: 13px;
    cursor: default;
}

/* Muted response-message suffix inside the code badge. */
.afi-log-response-msg {
    font-weight: 400;
    opacity: 0.85;
    font-size: 11px;
}

/* =============================================================
 * Log list — filter bar dropdowns
 * ============================================================= */
.adfoin-log-filters select {
    max-width: 220px;
    margin-right: 6px;
}

/* =============================================================
 * Log list — Clear All Logs button area
 * Sits below the table, right-aligned.
 * ============================================================= */
.afi-clear-logs-form {
    margin-top: 12px;
    text-align: right;
}

.afi-clear-logs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.afi-clear-logs-btn .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

/* =============================================================
 * Single log view — layout & utilities
 * ============================================================= */

/* Title + back-arrow grouped on the left of the card header */
.afi-log-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Icon-only back arrow sitting beside the Log #N heading */
.afi-log-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #50575e;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #f6f7f7;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.afi-log-back-btn:hover,
.afi-log-back-btn:focus {
    color: #2271b1;
    border-color: #2271b1;
    background: #f0f6fc;
}

.afi-log-back-btn .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
}

/* Right side of the card header: Delete + Copy buttons */
.afi-log-view-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Clock dashicon in the Time row */
.afi-log-detail-clock {
    color: #8c8f94;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/* Integration ID code chip */
.afi-log-id-code {
    font-size: 13px;
    padding: 3px 6px;
    background: #f0f0f1;
    border-radius: 3px;
}

/* Textarea wrapper — bordered container for CodeMirror */
.afi-log-textarea-wrap {
    border: 1px solid #8c8f94;
    border-radius: 4px;
    overflow: hidden;
}

/* Resend form footer area */
.afi-log-resend-actions {
    margin-top: 15px;
}

/* Danger / delete button on the single log view */
.afi-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 2;
    color: #b32d2e;
    background: transparent;
    border: 1px solid #b32d2e;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.afi-btn-danger:hover,
.afi-btn-danger:focus {
    color: #fff;
    background: #b32d2e;
    border-color: #b32d2e;
}

/* Copy Full Log button — gap between icon and label */
.afi-btn-copy-full-log {
    gap: 5px;
}

/* Copy Full Log button — success state */
.afi-btn-copy-full-log.afi-copy-success {
    color: #00a32a;
    border-color: #00a32a;
}

.afi-btn-copy-full-log.afi-copy-success:hover {
    color: #fff;
    background: #00a32a;
}

/* =============================================================
 * Settings page — card header variant
 * Allows filter controls to sit on the right while title stays left.
 * ============================================================= */
.afi-settings-card-header {
    flex-wrap: wrap;
    gap: 15px;
}

/* Platform search input — fixed width */
.afi-platform-search {
    width: 240px;
}

/* =============================================================
 * Settings page — no-results block
 * ============================================================= */
.afi-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #646970;
}

.afi-no-results-text {
    font-size: 15px;
    margin: 0;
}

/* =============================================================
 * Settings page — General Settings toggles
 * Wider cards so helper text has room to breathe.
 * ============================================================= */
.afi-settings-toggles.afi-checkbox-container {
    grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) );
}

.afi-settings-toggles .afi-checkbox {
    align-items: flex-start;
    gap: 12px;
}

.afi-settings-toggles .afi-elements-info {
    flex-direction: column;
    align-items: flex-start;
}

.afi-settings-toggles .afi-helper-text {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: #646970;
    font-weight: 400;
    line-height: 1.5;
}

.afi-settings-toggles .adfoin-toggle-form {
    flex-shrink: 0;
    margin-top: 2px;
}

/* =============================================================
 * Settings page — Save footer bar
 * ============================================================= */
.afi-settings-save-bar {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 8px;
}

/* =============================================================
 * Accounts card — empty state
 * ============================================================= */
.afi-accounts-empty {
    padding: 32px 20px;
    text-align: center;
    color: #646970;
    font-size: 14px;
}