.autoarticle-social-settings .nav-tab {
    position: relative;
}

.autoarticle-social-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.autoarticle-social-status-dot.autoarticle-social-connected {
    background-color: #00a32a;
}

.autoarticle-social-tab-content {
    margin-top: 20px;
}

.autoarticle-social-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.autoarticle-social-badge-connected,
.autoarticle-social-badge-published {
    background-color: #d4edda;
    color: #155724;
}

.autoarticle-social-badge-pending,
.autoarticle-social-badge-queued {
    background-color: #fff3cd;
    color: #856404;
}

.autoarticle-social-badge-processing {
    background-color: #cce5ff;
    color: #004085;
}

.autoarticle-social-badge-failed {
    background-color: #f8d7da;
    color: #721c24;
}

.autoarticle-social-badge-retried,
.autoarticle-social-badge-info {
    background-color: #e2e3e5;
    color: #383d41;
}

.autoarticle-social-connection-status {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.autoarticle-social-status-connected {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.autoarticle-social-status-connected .dashicons {
    color: #00a32a;
    vertical-align: middle;
    margin-right: 4px;
}

.autoarticle-social-status-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
}

.autoarticle-social-status-warning .dashicons {
    color: #856404;
    vertical-align: middle;
    margin-right: 4px;
}

.autoarticle-social-queue-table th,
.autoarticle-social-log-table th {
    white-space: nowrap;
}

.autoarticle-social-queue-table td,
.autoarticle-social-log-table td {
    vertical-align: middle;
}

.autoarticle-social-log-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.autoarticle-social-log-filters form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.autoarticle-social-platform-settings hr {
    margin: 20px 0;
}

.autoarticle-social-meta-box .autoarticle-social-platform-option {
    padding: 4px 0;
}

.autoarticle-social-meta-box textarea {
    margin-top: 4px;
}

.autoarticle-social-share-now-status {
    font-style: italic;
    color: #666;
}

/* Setup guide — collapsible */
.autoarticle-social-setup-guide {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0;
    margin: 16px 0;
    overflow: hidden;
}

.autoarticle-social-setup-guide-header {
    margin: 0;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s;
}

.autoarticle-social-setup-guide-header:hover {
    background-color: #f0f0f0;
}

.autoarticle-social-toggle-indicator {
    transition: transform 0.2s;
    color: #666;
}

.autoarticle-social-collapsed .autoarticle-social-toggle-indicator {
    transform: rotate(-90deg);
}

.autoarticle-social-setup-guide-hint {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-left: auto;
}

.autoarticle-social-setup-guide-body {
    padding: 0 20px 16px;
    transition: max-height 0.2s;
}

.autoarticle-social-collapsed .autoarticle-social-setup-guide-body {
    display: none;
}

/* Advanced Settings — collapsible accordion on the General sub-tab.
 * Mirrors the setup-guide visual shape so the chevron/card pattern feels
 * consistent across the plugin. The chevron rotation + collapsed-body hide
 * rules above (`.autoarticle-social-collapsed .autoarticle-social-toggle-indicator`
 * and the body-display rule on this line's sibling below) are shared via
 * the generic `.autoarticle-social-collapsed` state modifier, so nothing
 * extra is needed there. */
.autoarticle-social-advanced-settings {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0;
    margin: 16px 0;
    overflow: hidden;
}

.autoarticle-social-advanced-settings-header {
    margin: 0;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: background-color 0.15s;
}

.autoarticle-social-advanced-settings-header:hover {
    background-color: #f0f0f0;
}

.autoarticle-social-advanced-settings-body {
    padding: 0 20px 16px;
}

.autoarticle-social-collapsed .autoarticle-social-advanced-settings-body {
    display: none;
}

/* HubSpot auto-share panel — frontend-shortcode-only status block at the top
 * of Send-to-Socials. Uses the same `.autoarticle-social-collapsed` state
 * modifier (shared with setup-guide + advanced-settings), so the chevron
 * rotation rule above covers it. Only the title sub-element is clickable
 * (see admin.js) because the auto-share toggle and Check Now button live
 * in the header row and must stay operable without expanding. */
.autoarticle-social-hubspot-panel {
    background: #f0f7ff;
    border: 1px solid #2271b1;
    border-radius: 4px;
    margin: 12px 0 20px;
    overflow: hidden;
}

.autoarticle-social-hubspot-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

.autoarticle-social-hubspot-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    flex: 1 1 auto;
    min-width: 0;
}

.autoarticle-social-hubspot-panel-title strong {
    font-size: 14px;
}

.autoarticle-social-hubspot-panel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.autoarticle-social-hubspot-autoshare-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.autoarticle-social-hubspot-panel-body {
    padding: 0 16px 12px;
}

.autoarticle-social-collapsed .autoarticle-social-hubspot-panel-body {
    display: none;
}

/* Status pills in the panel title — colour-coded so the connection state
 * reads at a glance even when the panel is collapsed. "on" = auto-share
 * enabled, "off" = disabled, "warn" = Hub ID present but Blog ID missing
 * (user needs to finish setup on the Generate tab). */
.autoarticle-social-hubspot-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.autoarticle-social-hubspot-status-pill.autoarticle-social-hubspot-on {
    background: #dff4e4;
    color: #0a7d2a;
}

.autoarticle-social-hubspot-status-pill.autoarticle-social-hubspot-off {
    background: #f0f0f1;
    color: #555;
}

.autoarticle-social-hubspot-status-pill.autoarticle-social-hubspot-warn {
    background: #fcf4dd;
    color: #8a6d00;
}

.autoarticle-social-setup-steps {
    margin: 8px 0 16px;
    padding-left: 24px;
}

.autoarticle-social-setup-steps li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.autoarticle-social-setup-steps code {
    background: #fff;
    border: 1px solid #ddd;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    word-break: break-all;
}

.autoarticle-social-links-table {
    border-collapse: collapse;
}

.autoarticle-social-links-table td {
    padding: 8px 12px;
    vertical-align: top;
    line-height: 1.5;
}

.autoarticle-social-links-table a {
    text-decoration: none;
    font-weight: 500;
}

.autoarticle-social-links-table a:hover {
    text-decoration: underline;
}

.autoarticle-social-links-table .dashicons-external {
    opacity: 0.5;
}

/* Toggle switch */
.autoarticle-social-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

.autoarticle-social-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.autoarticle-social-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.2s;
}

.autoarticle-social-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.autoarticle-social-toggle input:checked + .autoarticle-social-toggle-slider {
    background-color: #00a32a;
}

.autoarticle-social-toggle input:checked + .autoarticle-social-toggle-slider::before {
    transform: translateX(20px);
}

.autoarticle-social-toggle input:focus + .autoarticle-social-toggle-slider {
    box-shadow: 0 0 0 2px rgba(0, 163, 42, 0.3);
}

/* Credentials section */
.autoarticle-social-credentials-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0 20px 16px;
    margin: 8px 0 16px;
}

.autoarticle-social-credentials-section .form-table th {
    padding-left: 0;
    width: 180px;
}

.autoarticle-social-credentials-section .form-table td {
    padding-left: 0;
}

/* Shared credentials indicator (Instagram) */
.autoarticle-social-shared-credentials {
    padding: 12px 16px;
    border-radius: 4px;
    margin: 8px 0 16px;
}

.autoarticle-social-shared-credentials .dashicons {
    vertical-align: middle;
    margin-right: 4px;
}

.autoarticle-social-credentials-ok {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.autoarticle-social-credentials-ok .dashicons {
    color: #00a32a;
}

.autoarticle-social-credentials-missing {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
}

.autoarticle-social-credentials-missing .dashicons {
    color: #856404;
}

/* Post settings section */
.autoarticle-social-post-settings {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0 20px 16px;
    margin: 8px 0 16px;
}

.autoarticle-social-post-settings .form-table th {
    padding-left: 0;
    width: 180px;
}

.autoarticle-social-post-settings .form-table td {
    padding-left: 0;
}

/* Backfill panel */
.autoarticle-social-backfill-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 8px 0 16px;
}

.autoarticle-social-backfill-panel fieldset {
    margin: 12px 0;
}

/* Feed section */
.autoarticle-social-feed-section {
    margin-bottom: 16px;
}

.autoarticle-social-feed-section code {
    background: #fff;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 13px;
    word-break: break-all;
}

.autoarticle-social-feed-preview {
    margin-top: 16px;
}

.autoarticle-social-feed-preview-table {
    max-width: 900px;
}

.autoarticle-social-feed-preview-table td {
    vertical-align: top;
    max-width: 300px;
}

.autoarticle-social-feed-preview-table img {
    border-radius: 3px;
}

/* Message preview */
.autoarticle-social-message-preview {
    margin-top: 12px;
}

.autoarticle-social-message-preview table {
    border-collapse: collapse;
}

.autoarticle-social-message-preview td {
    vertical-align: top;
    padding: 8px 12px;
}

.autoarticle-social-message-preview img {
    border-radius: 3px;
}

/* Config saved notice */
.autoarticle-social-config-saved,
.autoarticle-social-credentials-saved {
    font-weight: 600;
}