/**
 * Dashboard-inspired admin styling for Metasync plugin
 * Modern dark theme matching the main dashboard design
 */

/* Root Variables - Dashboard Color Scheme */
/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
    --dashboard-bg: #0f1419;
    --dashboard-card-bg: #1a1f26;
    --dashboard-card-hover: #222831;
    --dashboard-text-primary: #ffffff;
    --dashboard-text-secondary: #9ca3af;
    --dashboard-accent: #3b82f6;
    --dashboard-accent-hover: #2563eb;
    --dashboard-success: #10b981;
    --dashboard-warning: #f59e0b;
    --dashboard-error: #ef4444;
    --dashboard-border: #374151;
    --dashboard-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --dashboard-gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --dashboard-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --dashboard-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Light Theme */
[data-theme="light"] {
    --dashboard-bg: #f8f9fa;
    --dashboard-card-bg: #ffffff;
    --dashboard-card-hover: #f1f3f5;
    --dashboard-text-primary: #1a1f26;
    --dashboard-text-secondary: #6b7280;
    --dashboard-accent: #3b82f6;
    --dashboard-accent-hover: #2563eb;
    --dashboard-success: #10b981;
    --dashboard-warning: #f59e0b;
    --dashboard-error: #ef4444;
    --dashboard-border: #e5e7eb;
    --dashboard-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --dashboard-gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --dashboard-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dashboard-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Theme Transition */
:root,
[data-theme] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Only apply styles within plugin pages - NO LAYOUT CHANGES */
.metasync-dashboard-wrap {
    background: var(--dashboard-bg) !important;
    color: var(--dashboard-text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Apply dark background to edges without affecting layout */
    position: relative;
    margin: 0 -20px;
    padding: 20px 40px;  /* More lateral padding for content breathing room */
    min-height: calc(100vh - 32px);
    opacity: 1 !important;
}

/* Hide Jetpack identity crisis container within plugin pages */
.metasync-dashboard-wrap ~ .jp-identity-crisis-container,
.wrap.metasync-dashboard-wrap .jp-identity-crisis-container,
body.admin_page_searchatlas #jp-identity-crisis-container,
body.admin_page_searchatlas .jp-identity-crisis-container,
body[class*="admin_page_"][class*="searchatlas"] #jp-identity-crisis-container,
body[class*="admin_page_"][class*="searchatlas"] .jp-identity-crisis-container,
/* Handle custom whitelabel menu slugs - use presence of metasync-dashboard-wrap as indicator */
body:has(.metasync-dashboard-wrap) #jp-identity-crisis-container,
body:has(.metasync-dashboard-wrap) .jp-identity-crisis-container {
    display: none !important;
}

/* Dark background extension - DISABLED to prevent black overlays */
/* .metasync-dashboard-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    right: -50px;
    bottom: 0;
    background: var(--dashboard-bg);
    z-index: -1;
} */

/* Ensure content is above background overlay */
.metasync-dashboard-wrap > * {
    position: relative;
    z-index: 1;
}

/* Fix WordPress notices ONLY in plugin pages */
.metasync-dashboard-wrap .notice,
.metasync-dashboard-wrap .error,
.metasync-dashboard-wrap .updated {
    background: var(--dashboard-card-bg) !important;
    border-left: 4px solid var(--dashboard-accent) !important;
    color: var(--dashboard-text-primary) !important;
    border-radius: 8px !important;
    box-shadow: var(--dashboard-shadow) !important;
    margin: 20px 0 !important;
    backdrop-filter: blur(10px) !important;
}

.metasync-dashboard-wrap .notice p,
.metasync-dashboard-wrap .error p,
.metasync-dashboard-wrap .updated p {
    color: var(--dashboard-text-primary) !important;
}

.metasync-dashboard-wrap .notice a,
.metasync-dashboard-wrap .error a,
.metasync-dashboard-wrap .updated a {
    color: var(--dashboard-accent) !important;
}

/* Specific error notice styling ONLY in plugin */
.metasync-dashboard-wrap .notice.notice-error {
    border-left-color: var(--dashboard-error) !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

/* License mismatch notice specific styling ONLY in plugin */
.metasync-dashboard-wrap .notice:has(.dashicons-warning):before,
.metasync-dashboard-wrap .notice[class*="license"]:before,
.metasync-dashboard-wrap .notice[class*="mismatch"]:before {
    content: "⚠️";
    font-size: 20px;
    margin-right: 8px;
    display: inline-block;
}

/* Better button styling in notices ONLY in plugin */
.metasync-dashboard-wrap .notice .button,
.metasync-dashboard-wrap .error .button,
.metasync-dashboard-wrap .updated .button {
    background: var(--dashboard-accent) !important;
    color: var(--dashboard-text-primary) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.metasync-dashboard-wrap .notice .button:hover,
.metasync-dashboard-wrap .error .button:hover,
.metasync-dashboard-wrap .updated .button:hover {
    background: var(--dashboard-accent-hover) !important;
    transform: translateY(-1px) !important;
}

/* Theme Toggle Button */
.metasync-theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.metasync-theme-toggle:hover {
    border-color: var(--dashboard-accent);
    box-shadow: var(--dashboard-shadow);
}

.metasync-theme-option {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dashboard-text-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
}

.metasync-theme-option.active {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.metasync-theme-option:hover:not(.active) {
    color: var(--dashboard-text-primary);
    background: var(--dashboard-card-hover);
}

.metasync-theme-icon {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

/* Plugin Header with Logo - Clean Layout */
.metasync-dashboard-wrap .metasync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 20px;
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    box-shadow: var(--dashboard-shadow);
    color: var(--dashboard-text-primary);
}

.metasync-dashboard-wrap .metasync-header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.metasync-dashboard-wrap .metasync-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.metasync-dashboard-wrap .metasync-logo-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a1f26 0%, #2d3748 100%);
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.metasync-dashboard-wrap .metasync-logo-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.metasync-dashboard-wrap .metasync-logo {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter: brightness(1) contrast(1);
    transition: all 0.3s ease;
}

.metasync-dashboard-wrap .metasync-logo:hover {
    filter: brightness(1.1) contrast(1.1);
}

/* Dual-logo theme switching */
/* Default: show dark logo, hide light (matches PHP default theme of 'dark') */
.metasync-logo-light { display: none; }
.metasync-logo-dark  { display: block; }

[data-theme="light"] .metasync-logo-dark {
    display: none;
}

[data-theme="dark"] .metasync-logo-light {
    display: none;
}

.metasync-header[data-current-theme="light"] .metasync-logo-dark {
    display: none;
}

.metasync-header[data-current-theme="dark"] .metasync-logo-light {
    display: none;
}

/* Page Title Section - Below Header */
.metasync-dashboard-wrap .metasync-page-title {
    margin-bottom: 2rem;
    padding: 0;
}

.metasync-dashboard-wrap .metasync-page-title h1 {
    color: var(--dashboard-text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    background: var(--dashboard-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
    line-height: 1.2;
}

/* Fallback for browsers that don't support background-clip */
@supports not (-webkit-background-clip: text) {
    .metasync-dashboard-wrap .metasync-page-title h1 {
        color: var(--dashboard-accent);
        background: none;
    }
}

/* Integration Status */
.metasync-dashboard-wrap .metasync-integration-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.metasync-dashboard-wrap .metasync-integration-status.integrated {
    background: rgba(16, 185, 129, 0.15);
    color: var(--dashboard-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.metasync-dashboard-wrap .metasync-integration-status.not-integrated {
    background: rgba(239, 68, 68, 0.15);
    color: var(--dashboard-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.metasync-dashboard-wrap .metasync-integration-status.warning {
    background: rgba(255, 185, 0, 0.15);
    color: #ffb900;
    border: 1px solid rgba(255, 185, 0, 0.3);
}

.metasync-dashboard-wrap .metasync-integration-status .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

.metasync-dashboard-wrap .metasync-integration-status.integrated .status-indicator {
    background: var(--dashboard-success);
    animation: pulse-success 2s infinite;
}

.metasync-dashboard-wrap .metasync-integration-status.not-integrated .status-indicator {
    background: var(--dashboard-error);
}

.metasync-dashboard-wrap .metasync-integration-status.warning .status-indicator {
    background: #ffb900;
}

@keyframes pulse-success {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}





/* Dashboard Cards - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-card {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--dashboard-shadow);
    /* Removed transition - was too distracting in sections */
    backdrop-filter: blur(10px);
}

.metasync-dashboard-wrap .dashboard-card:hover {
    background: var(--dashboard-card-hover);
    box-shadow: var(--dashboard-shadow-hover);
    /* Removed translateY animation - was too distracting */
}

.metasync-dashboard-wrap .dashboard-card h2 {
    color: var(--dashboard-text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.metasync-dashboard-wrap .dashboard-card h3 {
    color: var(--dashboard-text-primary);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 12px 0;
}

/* New Navigation System */
.metasync-dashboard-wrap .metasync-nav-wrapper {
    margin: 0 0 32px 0;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 100;
}

.metasync-dashboard-wrap .metasync-nav-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    padding: 6px;
    backdrop-filter: blur(10px);
}

.metasync-dashboard-wrap .metasync-nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
    background: transparent;
}

.metasync-dashboard-wrap .metasync-nav-tab:hover {
    color: var(--dashboard-text-primary);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.metasync-dashboard-wrap .metasync-nav-tab.active {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
    box-shadow: var(--dashboard-shadow);
    transform: translateY(-1px);
}

.metasync-dashboard-wrap .metasync-nav-tab .tab-icon {
    font-size: 16px;
    opacity: 1;
    transition: all 0.3s ease;
    filter: brightness(1.2) contrast(1.1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.metasync-dashboard-wrap .metasync-nav-tab.active .tab-icon,
.metasync-dashboard-wrap .metasync-nav-tab:hover .tab-icon {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(1.4) contrast(1.2);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.metasync-dashboard-wrap .metasync-nav-tab .tab-text {
    font-weight: 500;
    white-space: nowrap;
}

/* New Badge for AI Agent */
.metasync-dashboard-wrap .metasync-new-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    animation: pulse-badge 2s ease-in-out infinite;
}

.metasync-dashboard-wrap .metasync-nav-tab.active .metasync-new-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Old nav-tab compatibility (fallback) */
.metasync-dashboard-wrap .nav-tab-wrapper {
    display: none !important;
}

/* Hide WordPress settings section titles to prevent duplication */
.metasync-dashboard-wrap .dashboard-card h2.hndle,
.metasync-dashboard-wrap .dashboard-card .form-table caption,
.metasync-dashboard-wrap .dashboard-card > h2:not(.dashboard-card h2:first-child),
.metasync-dashboard-wrap .form-table + h2,
.metasync-dashboard-wrap .form-table + h3 {
    display: none !important;
}

/* Also hide any orphaned WordPress section headers */
.metasync-dashboard-wrap .wrap > h2:not(.nav-tab-wrapper):not(.metasync-page-title h1),
.metasync-dashboard-wrap .wrap > h3:not(.metasync-page-title h1) {
    display: none !important;
}

/* Form Styling - ONLY in plugin pages */
.metasync-dashboard-wrap form {
    display: grid;
    gap: 24px;
}

.metasync-dashboard-wrap .form-table {
    background: transparent;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.metasync-dashboard-wrap .form-table th {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-right: none;
    border-radius: 12px 0 0 12px;
    color: var(--dashboard-text-primary);
    font-weight: 500;
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    width: 30%;
}

.metasync-dashboard-wrap .form-table td {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-left: none;
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    vertical-align: top;
}

.metasync-dashboard-wrap .form-table tr {
    margin-bottom: 16px;
}

.metasync-dashboard-wrap .form-table tr:not(:last-child) th,
.metasync-dashboard-wrap .form-table tr:not(:last-child) td {
    border-bottom: none;
}

/* Simple, clean spacing between form table rows */
.metasync-dashboard-wrap .form-table tr + tr th,
.metasync-dashboard-wrap .form-table tr + tr td {
    padding-top: 24px;
}

/* Ensure proper internal padding for all cells */
.metasync-dashboard-wrap .form-table th,
.metasync-dashboard-wrap .form-table td {
    padding: 16px 12px;
}

/* Simple Settings Menu Navigation Styles */
.metasync-nav-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.metasync-nav-left {
    display: flex;
    gap: 0;
}

.metasync-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Grouped Navigation Styles with Dropdowns */
.metasync-nav-grouped {
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

/* Dropdown Container */
.metasync-nav-dropdown {
    position: relative;
    display: inline-block;
    z-index: 999999;
}

.metasync-nav-dropdown.active {
    z-index: 999999999;
}

/* Dropdown Button */
.metasync-nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.metasync-nav-dropdown-btn:hover {
    color: var(--dashboard-text-primary);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.metasync-nav-dropdown-btn.active {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
    box-shadow: var(--dashboard-shadow);
}

.metasync-nav-dropdown-btn .dropdown-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    margin-left: 4px;
}

.metasync-nav-dropdown:hover .metasync-nav-dropdown-btn .dropdown-arrow,
.metasync-nav-dropdown-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.metasync-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 999999999 !important;
    backdrop-filter: blur(10px);
}

/* When using fixed positioning (via JavaScript) */
.metasync-nav-dropdown-menu[style*="position: fixed"] {
    z-index: 999999999 !important;
}

/* Portal menu (appended to body for reliable positioning) */
#metasync-nav-portal-menu {
    min-width: 220px;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

#metasync-nav-portal-menu .metasync-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#metasync-nav-portal-menu .metasync-nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dashboard-text-primary);
    transform: translateX(4px);
}

#metasync-nav-portal-menu .metasync-nav-dropdown-item.active {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
    box-shadow: var(--dashboard-shadow);
}

#metasync-nav-portal-menu .metasync-nav-dropdown-item .tab-icon {
    font-size: 16px;
    opacity: 1;
    transition: all 0.3s ease;
}

#metasync-nav-portal-menu .metasync-nav-dropdown-item.active .tab-icon,
#metasync-nav-portal-menu .metasync-nav-dropdown-item:hover .tab-icon {
    transform: scale(1.1);
}

#metasync-nav-portal-menu::-webkit-scrollbar {
    width: 6px;
}

#metasync-nav-portal-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#metasync-nav-portal-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#metasync-nav-portal-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Scrollbar styling for dropdown menu */
.metasync-nav-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.metasync-nav-dropdown-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.metasync-nav-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.metasync-nav-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.metasync-nav-dropdown:hover .metasync-nav-dropdown-menu,
.metasync-nav-dropdown.active .metasync-nav-dropdown-menu,
.metasync-nav-dropdown-btn[aria-expanded="true"] + .metasync-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Items */
.metasync-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.metasync-nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dashboard-text-primary);
    transform: translateX(4px);
}

.metasync-nav-dropdown-item.active {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
    box-shadow: var(--dashboard-shadow);
}

.metasync-nav-dropdown-item .tab-icon {
    font-size: 16px;
    opacity: 1;
    transition: all 0.3s ease;
}

.metasync-nav-dropdown-item.active .tab-icon,
.metasync-nav-dropdown-item:hover .tab-icon {
    transform: scale(1.1);
}

/* Right section adjustments for grouped nav */
.metasync-nav-grouped .metasync-nav-right {
    padding-left: 12px;
    border-left: 1px solid var(--dashboard-border);
    margin-left: auto;
}

/* Refactored Simple Dropdown */
.metasync-simple-dropdown {
    position: relative;
    display: inline-block;
    z-index: 999999999 !important; /* Ensure container is above forms */
}

.metasync-seo-btn,
.metasync-settings-btn {
    background: transparent;
    border: 2px solid var(--dashboard-border);
    color: var(--dashboard-text-primary);
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 44px;
}

.metasync-seo-btn:hover,
.metasync-settings-btn:hover {
    background: var(--dashboard-card-hover);
    border-color: var(--dashboard-accent);
}

.metasync-seo-btn.active,
.metasync-settings-btn.active {
    background: var(--dashboard-accent);
    border-color: var(--dashboard-accent);
    color: white;
}

.metasync-seo-btn .dropdown-arrow,
.metasync-settings-btn .dropdown-arrow {
    transition: transform 0.2s ease;
    font-size: 10px;
}

.metasync-seo-btn[aria-expanded="true"] .dropdown-arrow,
.metasync-settings-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Portal dropdown menu that bypasses stacking contexts */
.metasync-portal-menu {
    background: var(--dashboard-card-bg);
    border: 2px solid var(--dashboard-border);
    border-radius: 8px;
    min-width: 160px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    /* position and z-index set by JavaScript */
}

.metasync-portal-item {
    display: block;
    padding: 14px 18px;
    color: var(--dashboard-text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--dashboard-border);
}

.metasync-portal-item:last-child {
    border-bottom: none;
}

.metasync-portal-item:hover {
    background: var(--dashboard-card-hover);
    color: var(--dashboard-accent);
}

.metasync-portal-item.active {
    background: var(--dashboard-accent);
    color: white;
}

/* Input Fields - ONLY in plugin pages */
.metasync-dashboard-wrap input[type="text"],
.metasync-dashboard-wrap input[type="email"],
.metasync-dashboard-wrap input[type="url"],
.metasync-dashboard-wrap input[type="password"],
.metasync-dashboard-wrap input[type="number"],
.metasync-dashboard-wrap textarea,
.metasync-dashboard-wrap select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dashboard-border);
    border-radius: 8px;
    color: var(--dashboard-text-primary);
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 400px;
}

.metasync-dashboard-wrap input[type="text"]:focus,
.metasync-dashboard-wrap input[type="email"]:focus,
.metasync-dashboard-wrap input[type="url"]:focus,
.metasync-dashboard-wrap input[type="password"]:focus,
.metasync-dashboard-wrap input[type="number"]:focus,
.metasync-dashboard-wrap textarea:focus,
.metasync-dashboard-wrap select:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--dashboard-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.metasync-dashboard-wrap input[type="text"]::placeholder,
.metasync-dashboard-wrap input[type="email"]::placeholder,
.metasync-dashboard-wrap input[type="url"]::placeholder,
.metasync-dashboard-wrap input[type="password"]::placeholder,
.metasync-dashboard-wrap textarea::placeholder {
    color: var(--dashboard-text-secondary);
}

/* Description Text - ONLY in plugin pages */
.metasync-dashboard-wrap .description,
.metasync-dashboard-wrap p.description {
    color: var(--dashboard-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Checkboxes and Radio Buttons - ONLY in plugin pages */
.metasync-dashboard-wrap input[type="checkbox"],
.metasync-dashboard-wrap input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--dashboard-accent);
    margin-right: 8px;
}

/* Buttons - ONLY in plugin pages */
.metasync-dashboard-wrap .button,
.metasync-dashboard-wrap .button-primary,
.metasync-dashboard-wrap .button-secondary {
    background: var(--dashboard-gradient-primary);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 500;
    padding: 12px 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.metasync-dashboard-wrap .button:hover,
.metasync-dashboard-wrap .button-primary:hover {
    background: var(--dashboard-gradient-accent);
    transform: translateY(-1px);
    box-shadow: var(--dashboard-shadow);
}

.metasync-dashboard-wrap .button-secondary {
    background: transparent;
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-text-secondary);
}

.metasync-dashboard-wrap .button-secondary:hover {
    background: var(--dashboard-card-hover);
    color: var(--dashboard-text-primary);
    border-color: var(--dashboard-accent);
}

/* Status Messages - ONLY in plugin pages */
.metasync-dashboard-wrap .notice {
    background: var(--dashboard-card-bg);
    border: none;
    border-left: 4px solid var(--dashboard-accent);
    border-radius: 8px;
    color: var(--dashboard-text-primary);
    margin: 16px 0;
    padding: 16px 20px;
    box-shadow: var(--dashboard-shadow);
}

.metasync-dashboard-wrap .notice-success {
    border-left-color: var(--dashboard-success);
    background: rgba(16, 185, 129, 0.1);
}

.metasync-dashboard-wrap .notice-warning {
    border-left-color: var(--dashboard-warning);
    background: rgba(245, 158, 11, 0.1);
}

.metasync-dashboard-wrap .notice-error {
    border-left-color: var(--dashboard-error);
    background: rgba(239, 68, 68, 0.1);
}

/* Dashboard Stats Cards - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.metasync-dashboard-wrap .dashboard-stat-card {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Dashboard stat card top bar - DISABLED to prevent black subsections */
/* .metasync-dashboard-wrap .dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--dashboard-gradient-primary);
} */

.metasync-dashboard-wrap .dashboard-stat-card:hover {
    /* Removed translateY animation - was too distracting */
    box-shadow: var(--dashboard-shadow-hover);
}

.metasync-dashboard-wrap .dashboard-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin-bottom: 8px;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Special styling for emoji values - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-stat-value:not(:has(text)) {
    font-size: 2.5rem;
    white-space: normal;
}

.metasync-dashboard-wrap .dashboard-stat-label {
    color: var(--dashboard-text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}

/* Progress Bars - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-progress {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin: 12px 0;
}

.metasync-dashboard-wrap .dashboard-progress-bar {
    background: var(--dashboard-accent);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
    position: relative;
}

.metasync-dashboard-wrap .dashboard-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    /* Animation removed for static progress bars */
}

/* Settings Sections - ONLY in plugin pages */
.metasync-dashboard-wrap .settings-section {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    /* Removed any transitions that might cause animations */
}

/* Settings section top bar - DISABLED to prevent black subsections */
/* .metasync-dashboard-wrap .settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dashboard-gradient-primary);
} */

.metasync-dashboard-wrap .settings-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--dashboard-text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

/* Search Atlas Connect Container - Dashboard Style */
.metasync-dashboard-wrap .metasync-sa-connect-container {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: var(--dashboard-shadow);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.metasync-dashboard-wrap .metasync-sa-connect-container:hover {
    background: var(--dashboard-card-hover);
    box-shadow: var(--dashboard-shadow-hover);
    /* Removed translateY animation - was too distracting */
}

.metasync-dashboard-wrap .metasync-sa-connect-title {
    color: var(--dashboard-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metasync-dashboard-wrap .metasync-sa-connect-description {
    color: var(--dashboard-text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 14px;
}

/* Connect Buttons Container - Dashboard Style */
.metasync-dashboard-wrap .metasync-sa-connect-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.metasync-dashboard-wrap .metasync-sa-connect-btn,
.metasync-dashboard-wrap #connect-searchatlas-btn {
    background: var(--dashboard-gradient-primary);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: var(--dashboard-shadow);
}

.metasync-dashboard-wrap .metasync-sa-connect-btn:hover:not(:disabled),
.metasync-dashboard-wrap #connect-searchatlas-btn:hover:not(:disabled) {
    background: var(--dashboard-gradient-accent);
    transform: translateY(-2px);
    box-shadow: var(--dashboard-shadow-hover);
}

.metasync-dashboard-wrap .metasync-sa-connect-btn:disabled,
.metasync-dashboard-wrap #connect-searchatlas-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    background: var(--dashboard-accent);
}

.metasync-dashboard-wrap .metasync-sa-reset-btn,
.metasync-dashboard-wrap #reset-searchatlas-auth {
    background: transparent;
    border: 1px solid var(--dashboard-border);
    border-radius: 8px;
    color: var(--dashboard-text-secondary);
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.metasync-dashboard-wrap .metasync-sa-reset-btn:hover:not(:disabled),
.metasync-dashboard-wrap #reset-searchatlas-auth:hover:not(:disabled) {
    background: var(--dashboard-card-hover);
    color: var(--dashboard-text-primary);
    border-color: var(--dashboard-error);
    /* Removed translateY animation - was too distracting */
}

/* Connect Status Messages - Dashboard Style */
.metasync-dashboard-wrap .metasync-sa-connect-status,
.metasync-dashboard-wrap #sa-connect-status-message {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 500;
    /* Removed slideInNotice animation - was too distracting */
    backdrop-filter: blur(10px);
    border: 1px solid;
    box-shadow: var(--dashboard-shadow);
}

.metasync-dashboard-wrap .metasync-sa-connect-status.success,
.metasync-dashboard-wrap #sa-connect-status-message.success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--dashboard-success);
}

.metasync-dashboard-wrap .metasync-sa-connect-status.error,
.metasync-dashboard-wrap #sa-connect-status-message.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--dashboard-error);
}

.metasync-dashboard-wrap .metasync-sa-connect-status.info,
.metasync-dashboard-wrap #sa-connect-status-message.info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--dashboard-accent);
}

.metasync-dashboard-wrap .metasync-sa-connect-status.warning,
.metasync-dashboard-wrap #sa-connect-status-message.warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--dashboard-warning);
}

/* Connect Progress Indicator - Dashboard Style */
.metasync-dashboard-wrap .metasync-sa-connect-progress {
    margin-top: 16px;
    padding: 16px 20px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.metasync-dashboard-wrap .metasync-sa-connect-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
}

.metasync-dashboard-wrap .metasync-sa-connect-progress-time {
    color: var(--dashboard-text-secondary);
    font-size: 12px;
    font-weight: normal;
}

.metasync-dashboard-wrap .metasync-sa-connect-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.metasync-dashboard-wrap .metasync-sa-connect-progress-fill {
    height: 100%;
    background: var(--dashboard-accent);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.metasync-dashboard-wrap .metasync-sa-connect-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    /* Animation removed for static progress bars */
}

.metasync-dashboard-wrap .metasync-sa-connect-progress-text {
    margin-top: 8px;
    color: var(--dashboard-text-secondary);
    font-size: 13px;
    font-style: italic;
    text-align: center;
}

/* Connect Loading States */
.metasync-dashboard-wrap .metasync-sa-connect-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--dashboard-text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
    position: static; /* Keep in normal document flow */
}

/* Authentication Tips Section - Style existing PHP details element */
.metasync-dashboard-wrap .metasync-sa-connect-tips,
.metasync-dashboard-wrap details.metasync-sa-connect-tips {
    margin-top: 16px;
    padding: 0;
    border: none;
    background: transparent;
}

.metasync-dashboard-wrap .metasync-sa-connect-tips-toggle,
.metasync-dashboard-wrap details.metasync-sa-connect-tips summary {
    background: transparent;
    border: none;
    color: var(--dashboard-text-secondary) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    padding: 8px 0;
    width: 100%;
    text-align: left;
    transition: color 0.3s ease;
    list-style: none;
    outline: none;
}

.metasync-dashboard-wrap .metasync-sa-connect-tips-toggle:hover,
.metasync-dashboard-wrap details.metasync-sa-connect-tips summary:hover {
    color: var(--dashboard-text-primary) !important;
}

.metasync-dashboard-wrap .metasync-sa-connect-tips-content,
.metasync-dashboard-wrap details.metasync-sa-connect-tips > div {
    margin-top: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid var(--dashboard-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--dashboard-text-secondary) !important;
}

/* Remove default details styling */
.metasync-dashboard-wrap details.metasync-sa-connect-tips summary::-webkit-details-marker {
    display: none;
}

.metasync-dashboard-wrap details.metasync-sa-connect-tips summary::marker {
    display: none;
    content: '';
}

/* Ensure content is hidden when details is closed */
.metasync-dashboard-wrap details.metasync-sa-connect-tips:not([open]) > div {
    display: none;
}

/* Dashboard button styling for header actions */
.metasync-dashboard-wrap .metasync-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metasync-dashboard-wrap .metasync-dashboard-btn {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

.metasync-dashboard-wrap .metasync-dashboard-btn:hover {
    background: var(--dashboard-gradient-accent);
    transform: translateY(-1px);
    box-shadow: var(--dashboard-shadow);
    color: #ffffff;
    text-decoration: none;
}

/* Connect Action Buttons (existing and new) */
.metasync-dashboard-wrap .metasync-sa-connect-retry-btn,
.metasync-dashboard-wrap .metasync-sa-connect-btn {
    background: var(--dashboard-accent);
    border: none;
    border-radius: 8px;
    color: var(--dashboard-text-primary);
    padding: 10px 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 4px 8px 4px 0;
}

.metasync-dashboard-wrap .metasync-sa-connect-retry-btn:hover,
.metasync-dashboard-wrap .metasync-sa-connect-btn:hover {
    background: var(--dashboard-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--dashboard-shadow);
}

.metasync-dashboard-wrap .metasync-sa-connect-btn.primary {
    background: var(--dashboard-gradient-primary);
    color: #ffffff;
}

.metasync-dashboard-wrap .metasync-sa-connect-btn.secondary {
    background: transparent;
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-text-secondary);
}

.metasync-dashboard-wrap .metasync-sa-connect-btn.secondary:hover {
    background: var(--dashboard-card-hover);
    color: var(--dashboard-text-primary);
    border-color: var(--dashboard-accent);
}

/* Connect Status Message Content */
.metasync-dashboard-wrap .metasync-sa-connect-status-content {
    flex: 1;
}

.metasync-dashboard-wrap .metasync-sa-connect-status-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metasync-dashboard-wrap .metasync-sa-connect-status-message {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 12px;
}

/* Existing Connect Actions Container */
.metasync-dashboard-wrap .metasync-sa-connect-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Connect Button States */
.metasync-dashboard-wrap #connect-searchatlas-btn.connecting {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.metasync-dashboard-wrap #connect-searchatlas-btn.authenticating {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.metasync-dashboard-wrap #connect-searchatlas-btn.success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

/* Theme Toggle Mobile Adjustments */
@media (max-width: 768px) {
    .metasync-theme-toggle {
        order: -1;
        margin-bottom: 12px;
    }
    
    .metasync-dashboard-wrap .metasync-header-right {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    
    .metasync-theme-toggle {
        width: fit-content;
        align-self: center;
    }
}

/* Mobile Connect Adjustments */
@media (max-width: 768px) {
    .metasync-dashboard-wrap .metasync-sa-connect-container {
        padding: 20px 16px;
        margin-top: 16px;
        border-radius: 12px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-btn,
    .metasync-dashboard-wrap #connect-searchatlas-btn,
    .metasync-dashboard-wrap .metasync-sa-reset-btn,
    .metasync-dashboard-wrap #reset-searchatlas-auth {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-progress {
        padding: 16px;
        margin-top: 12px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 13px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-status {
        padding: 16px;
        margin-top: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-status-title {
        font-size: 16px;
    }
}

/* NO GLOBAL LAYOUT CHANGES - removed problematic positioning */

/* Improve stat card text handling - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-stat-value {
    display: block;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    text-overflow: clip;
}

/* Long text handling for theme names - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-stat-card:nth-child(3) .dashboard-stat-value {
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.6em;
}

/* Responsive Design - ONLY in plugin pages */
@media (max-width: 1200px) {
    .metasync-dashboard-wrap .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }
    
    .metasync-dashboard-wrap {
        padding: 20px 30px;  /* Reduced lateral padding for tablets */
    }
}

@media (max-width: 768px) {
    .metasync-dashboard-wrap {
        /* Proper mobile padding with lateral spacing */
        padding: 15px 20px;
    }
    
    /* Mobile header adjustments */
    .metasync-dashboard-wrap .metasync-header {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
        padding: 16px 0;
    }
    
    .metasync-dashboard-wrap .metasync-header-left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    .metasync-dashboard-wrap .metasync-header-right {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .metasync-dashboard-wrap .metasync-header-actions {
        flex-direction: column;
        gap: 8px;
        align-items: center;
        width: 100%;
    }
    
    .metasync-dashboard-wrap .metasync-dashboard-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .metasync-dashboard-wrap .metasync-logo {
        height: 40px;
        max-width: 160px;
    }
    
    .metasync-dashboard-wrap .metasync-integration-status {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    /* Mobile page title adjustments */
    .metasync-dashboard-wrap .metasync-page-title {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .metasync-dashboard-wrap .metasync-page-title h1 {
        font-size: 2rem;
        text-align: center;
    }
    
    /* Mobile navigation adjustments */
    .metasync-dashboard-wrap .metasync-nav-tabs {
        flex-direction: column;
        gap: 2px;
    }
    
    .metasync-dashboard-wrap .metasync-nav-tab {
        justify-content: center;
        padding: 12px 16px;
    }
    
    /* Grouped navigation mobile adjustments */
    .metasync-dashboard-wrap .metasync-nav-grouped {
        flex-direction: column;
        gap: 8px;
    }
    
    .metasync-dashboard-wrap .metasync-nav-dropdown {
        width: 100%;
    }
    
    .metasync-dashboard-wrap .metasync-nav-dropdown-btn {
        width: 100%;
        justify-content: space-between;
    }
    
    .metasync-dashboard-wrap .metasync-nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid var(--dashboard-border);
        margin-top: 8px;
        display: none;
    }
    
    .metasync-dashboard-wrap .metasync-nav-dropdown.active .metasync-nav-dropdown-menu {
        display: block;
    }
    
    .metasync-dashboard-wrap .metasync-nav-dropdown-item {
        padding: 12px 16px;
    }
    
    .metasync-dashboard-wrap .metasync-nav-grouped .metasync-nav-right {
        border-left: none;
        border-top: 1px solid var(--dashboard-border);
        padding-left: 0;
        padding-top: 12px;
        margin-left: 0;
        justify-content: center;
        width: 100%;
    }
    
    .metasync-dashboard-wrap .nav-tab-wrapper {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .metasync-dashboard-wrap .nav-tab {
        width: 100% !important;
        text-align: center !important;
    }
    
    .metasync-dashboard-wrap .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .metasync-dashboard-wrap .dashboard-stat-card {
        min-height: 100px;
        padding: 20px 16px;
    }
    
    .metasync-dashboard-wrap .dashboard-stat-value {
        font-size: 1.6rem;
    }
    
    .metasync-dashboard-wrap .form-table th,
    .metasync-dashboard-wrap .form-table td {
        display: block;
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--dashboard-border);
        margin-bottom: 8px;
    }
    
    .metasync-dashboard-wrap .form-table th {
        margin-bottom: 4px;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .metasync-dashboard-wrap .metasync-sa-connect-btn,
    .metasync-dashboard-wrap .metasync-sa-reset-btn,
    .metasync-dashboard-wrap #connect-searchatlas-btn,
    .metasync-dashboard-wrap #reset-searchatlas-auth {
        width: 100%;
        justify-content: center;
        margin: 0 !important;
    }
}

/* Loading States - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-loading {
    position: relative;
    opacity: 0.6;
}

.metasync-dashboard-wrap .dashboard-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--dashboard-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure perfect centering for all spinning elements */
.metasync-dashboard-wrap .spinner,
.metasync-dashboard-wrap .metasync-loading-spinner {
    display: block;
    margin: 0 auto;
    position: relative;
}

/* Center spinners within buttons */
.metasync-dashboard-wrap .button .metasync-sa-connect-loading,
.metasync-dashboard-wrap button .metasync-sa-connect-loading {
    vertical-align: middle;
    margin-right: 6px;
    margin-left: 0;
    position: static; /* Important: keep in button text flow */
    display: inline-block;
}

/* Loading states - general styling */
.metasync-dashboard-wrap .dashboard-loading {
    position: relative;
    opacity: 0.6;
}

/* Override for buttons - keep normal layout, don't use flex */
.metasync-dashboard-wrap .button.dashboard-loading,
.metasync-dashboard-wrap button.dashboard-loading {
    position: relative;
    opacity: 0.6;
    /* Remove flex - let button content flow naturally */
}

/* Spinner for general loading overlay (not buttons) */
.metasync-dashboard-wrap .dashboard-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--dashboard-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Don't show overlay spinner on buttons with inline spinners */
.metasync-dashboard-wrap .button.dashboard-loading::after,
.metasync-dashboard-wrap button.dashboard-loading::after {
    display: none;
}

/* Center spinning tab icons */
.metasync-dashboard-wrap .metasync-nav-tab .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    vertical-align: middle;
}

/* Ensure spinners stay inline in their context */
.metasync-dashboard-wrap .metasync-sa-connect-loading {
    /* Force inline positioning - never absolute */
    position: static !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transform: none !important; /* Don't translate position */
}

/* Only center text in containers, not the spinners themselves */
.metasync-dashboard-wrap .loading-container {
    text-align: center;
}

/* Tooltips - ONLY in plugin pages */
.metasync-dashboard-wrap .dashboard-tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
}

.metasync-dashboard-wrap .dashboard-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dashboard-card-bg);
    color: var(--dashboard-text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: var(--dashboard-shadow);
    z-index: 1000;
    border: 1px solid var(--dashboard-border);
}

/* Custom Scrollbar - ONLY in plugin pages */
.metasync-dashboard-wrap ::-webkit-scrollbar {
    width: 8px;
}

.metasync-dashboard-wrap ::-webkit-scrollbar-track {
    background: var(--dashboard-bg);
}

.metasync-dashboard-wrap ::-webkit-scrollbar-thumb {
    background: var(--dashboard-border);
    border-radius: 4px;
}

.metasync-dashboard-wrap ::-webkit-scrollbar-thumb:hover {
    background: var(--dashboard-accent);
}

/* WordPress elements - ONLY in plugin pages */
.metasync-dashboard-wrap select,
.metasync-dashboard-wrap input[type="text"],
.metasync-dashboard-wrap input[type="email"],
.metasync-dashboard-wrap input[type="url"],
.metasync-dashboard-wrap input[type="password"],
.metasync-dashboard-wrap input[type="number"],
.metasync-dashboard-wrap textarea {
    color: var(--dashboard-text-primary);
}

.metasync-dashboard-wrap .form-table th {
    color: var(--dashboard-text-primary);
}

.metasync-dashboard-wrap .form-table td p {
    color: var(--dashboard-text-secondary);
}

/* Table Styling - ONLY in plugin pages */
.metasync-dashboard-wrap .wp-list-table {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    overflow: hidden;
}

.metasync-dashboard-wrap .wp-list-table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--dashboard-text-primary);
    border-bottom: 1px solid var(--dashboard-border);
}

.metasync-dashboard-wrap .wp-list-table td {
    background: var(--dashboard-card-bg);
    color: var(--dashboard-text-primary);
    border-bottom: 1px solid var(--dashboard-border);
}

.metasync-dashboard-wrap .wp-list-table tbody tr:hover {
    background: var(--dashboard-card-hover);
}

/* Modern Unsaved Changes Design */
.metasync-dashboard-wrap .has-unsaved-changes {
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(59, 130, 246, 0.01) 100%) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(59, 130, 246, 0.05) !important;
    transition: all 0.3s ease !important;
}

.metasync-dashboard-wrap .has-unsaved-changes::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
    background-size: 200% 100%;
    border-radius: 12px 12px 0 0;
    animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { 
        background-position: 0% 0%;
        opacity: 0.6;
    }
    50% { 
        background-position: 100% 0%;
        opacity: 0.8;
    }
}

/* Unsaved indicator dot - subtle pulse instead of blink */
.metasync-dashboard-wrap .unsaved-indicator {
    color: #3b82f6 !important;
    font-weight: 600 !important;
    animation: subtle-pulse 2s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

@keyframes subtle-pulse {
    0%, 100% { 
        opacity: 0.7;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.05);
    }
}

.metasync-dashboard-wrap .button.button-primary .unsaved-indicator {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Enhanced save button styling for unsaved changes */
.metasync-dashboard-wrap .has-unsaved-changes .button.button-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.metasync-dashboard-wrap .has-unsaved-changes .button.button-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.metasync-dashboard-wrap .has-unsaved-changes .button.button-primary:hover::before {
    left: 100%;
}

.metasync-dashboard-wrap .has-unsaved-changes .button.button-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

.metasync-dashboard-wrap .has-unsaved-changes .button.button-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Modern Bottom Notification Bar for Unsaved Changes */
.metasync-unsaved-notification {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100%) !important;
    max-width: 600px !important;
    width: calc(100% - 40px) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%) !important;
    backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    padding: 16px 20px !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.25), 
                0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s ease !important;
}

.metasync-unsaved-notification::before {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
}

.metasync-unsaved-notification.show {
    transform: translateX(-50%) translateY(0) !important;
}

.metasync-unsaved-notification:hover {
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.35), 
                0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

.metasync-unsaved-notification .notification-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.metasync-unsaved-notification .notification-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    animation: pulse-icon 2s ease-in-out infinite !important;
}

@keyframes pulse-icon {
    0%, 100% { 
        transform: scale(1);
        background: rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.3);
    }
}

.metasync-unsaved-notification .notification-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.metasync-unsaved-notification .notification-button {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.metasync-unsaved-notification .notification-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

.metasync-unsaved-notification .notification-button.primary {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #3b82f6 !important;
}

.metasync-unsaved-notification .notification-button.primary:hover {
    background: #ffffff !important;
    color: #2563eb !important;
}

.metasync-unsaved-notification .close-notification {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
}

.metasync-unsaved-notification .close-notification:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Legacy warning banner styles - updated */
.metasync-unsaved-warning {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    border-left: 4px solid #3b82f6 !important;
    color: var(--dashboard-text-primary) !important;
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
    transition: all 0.3s ease !important;
}

@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metasync-unsaved-warning .dashicons {
    color: #3b82f6 !important;
    font-size: 20px !important;
    animation: gentle-rotate 4s ease-in-out infinite !important;
}

@keyframes gentle-rotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

/* Save button highlight animation */
@keyframes save-button-highlight {
    0% { 
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        transform: translateY(-1px) scale(1);
    }
    50% { 
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
        transform: translateY(-2px) scale(1.02);
    }
    100% { 
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        transform: translateY(-1px) scale(1);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .metasync-unsaved-notification {
        bottom: 10px !important;
        left: 50% !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        padding: 12px 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
    
    .metasync-unsaved-notification .notification-content {
        justify-content: center !important;
        width: 100% !important;
    }
    
    .metasync-unsaved-notification .notification-actions {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .metasync-unsaved-notification .notification-button {
        flex: 1 !important;
        min-width: 70px !important;
        max-width: 100px !important;
    }
    
    .metasync-unsaved-notification .close-notification {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 2px 6px !important;
        font-size: 14px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .metasync-dashboard-wrap .has-unsaved-changes {
        border: 2px solid #0066cc !important;
        background: rgba(0, 102, 204, 0.1) !important;
    }
    
    .metasync-unsaved-notification {
        background: #0066cc !important;
        border: 1px solid #004499 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .metasync-dashboard-wrap .unsaved-indicator,
    .metasync-dashboard-wrap .has-unsaved-changes::after,
    .metasync-unsaved-notification .notification-icon {
        animation: none !important;
    }
    
    .metasync-dashboard-wrap .has-unsaved-changes .button.button-primary,
    .metasync-unsaved-notification {
        transition: none !important;
    }
}

/* ========================================
   SYNC LOG PAGE STYLES
   ======================================== */

/* Sync Log Header */
.sync-log-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.sync-log-title-section {
    flex: 1;
}

.sync-log-title-section h2 {
    color: var(--dashboard-text-primary);
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
}

/* Sync Log Filters */
.sync-log-filters {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sync-filters-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
    justify-content: end;
    width: auto;
    min-width: 280px;
}

/* Large screens - optimize filter spacing */
@media (min-width: 1200px) {
    .sync-filters-form {
        min-width: 320px;
        gap: 16px;
    }
    
    .sync-filter-select {
        min-width: 150px;
    }
}

.sync-filter-select {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    min-width: 130px;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
    white-space: nowrap;
    box-sizing: border-box;
}

.sync-filter-select:focus {
    outline: none;
    border-color: var(--dashboard-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    background-color: var(--dashboard-card-hover);
}

.sync-filter-select:hover {
    border-color: var(--dashboard-accent);
    background-color: var(--dashboard-card-hover);
}

.sync-filter-select:active {
    background-color: var(--dashboard-card-hover);
    border-color: var(--dashboard-accent);
}

.sync-filter-select option {
    background: var(--dashboard-card-bg);
    color: var(--dashboard-text-primary);
    padding: 8px;
}

/* Sync Log List */
.sync-log-list {
    background: var(--dashboard-card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--dashboard-border);
}

.sync-log-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--dashboard-border);
    transition: all 0.2s ease;
}

.sync-log-item:last-child {
    border-bottom: none;
}

.sync-log-item:hover {
    background: var(--dashboard-card-hover);
}

/* Sync Log Icon */
.sync-log-icon {
    margin-right: 16px;
    flex-shrink: 0;
}

.sync-icon-circle {
    width: 40px;
    height: 40px;
    background: var(--dashboard-card-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dashboard-border);
}

.sync-icon {
    font-size: 18px;
    color: var(--dashboard-text-secondary);
}

/* Sync Log Content */
.sync-log-content {
    flex: 1;
    min-width: 0;
}

.sync-log-title {
    font-weight: 600;
    color: var(--dashboard-text-primary);
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 1.4;
}

.sync-log-meta {
    color: var(--dashboard-text-secondary);
    font-size: 14px;
    line-height: 1.3;
}

/* Sync Log Status */
.sync-log-status {
    margin-left: 16px;
    flex-shrink: 0;
}

.sync-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}

.sync-status-published {
    background: rgba(16, 185, 129, 0.15);
    color: var(--dashboard-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sync-status-draft {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.sync-status-icon {
    font-size: 12px;
    font-weight: bold;
}

/* Sync Log Empty State */
.sync-log-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--dashboard-text-secondary);
    background: var(--dashboard-card-bg);
    border-radius: 12px;
    border: 1px solid var(--dashboard-border);
}

.sync-log-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
    color: var(--dashboard-text-secondary);
}

.sync-log-empty h3 {
    color: var(--dashboard-text-primary);
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.sync-log-empty p {
    font-size: 14px;
    line-height: 1.5;
    max-width: 400px;
    margin: 0 auto;
    color: var(--dashboard-text-secondary);
}

/* Sync Log Pagination */
.sync-log-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--dashboard-border);
}

.sync-log-pagination-info {
    color: var(--dashboard-text-secondary);
    font-size: 14px;
}

.sync-log-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-text-primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sync-pagination-btn:hover {
    background: var(--dashboard-card-hover);
    border-color: var(--dashboard-accent);
    color: var(--dashboard-accent);
    text-decoration: none;
}

.sync-pagination-btn.active {
    background: var(--dashboard-accent);
    border-color: var(--dashboard-accent);
    color: white;
}

.sync-pagination-btn.active:hover {
    background: var(--dashboard-accent-hover);
    border-color: var(--dashboard-accent-hover);
    color: white;
}

/* Responsive Design for Sync Log */
@media (max-width: 768px) {
    .sync-log-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .sync-log-title-section {
        text-align: center;
    }
    
    .sync-log-filters {
        align-self: center;
        justify-content: center;
    }
    
    .sync-filters-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        justify-content: center;
        min-width: 260px;
        width: auto;
    }
    
    .sync-filter-select {
        min-width: 120px;
        font-size: 13px;
    }
    
    .sync-log-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .sync-log-icon {
        margin-right: 0;
    }
    
    .sync-log-status {
        margin-left: 0;
        align-self: flex-end;
    }
    
    .sync-log-pagination {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .sync-log-pagination-controls {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .sync-filters-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        min-width: 240px;
        width: 100%;
        max-width: 320px;
    }
    
    .sync-filter-select {
        min-width: 110px;
        font-size: 13px;
        padding: 6px 8px;
        padding-right: 28px;
    }
    
    .sync-log-item {
        padding: 16px;
    }
    
    .sync-log-title {
        font-size: 15px;
    }
    
    .sync-log-meta {
        font-size: 13px;
    }
    
    .sync-status-badge {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* ========================================
   SETTINGS ACCORDION STYLES
   ======================================== */

/* Accordion Container */
.metasync-settings-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Accordion Section */
.metasync-accordion-section {
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.metasync-accordion-section:hover {
    border-color: var(--dashboard-accent);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

/* Accordion Header */
.metasync-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    position: relative;
}

.metasync-accordion-header:hover {
    background: var(--dashboard-card-hover);
}

.metasync-accordion-header:focus {
    outline: 2px solid var(--dashboard-accent);
    outline-offset: -2px;
}

.metasync-accordion-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.metasync-accordion-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--dashboard-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metasync-accordion-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #ffffff;
}

.metasync-accordion-text h3 {
    color: var(--dashboard-text-primary);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.metasync-accordion-description {
    color: var(--dashboard-text-secondary);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Accordion Toggle Button */
.metasync-accordion-toggle {
    background: transparent;
    border: none;
    color: var(--dashboard-text-secondary);
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.metasync-accordion-toggle:hover {
    color: var(--dashboard-accent);
    transform: scale(1.1);
}

.metasync-accordion-toggle .toggle-icon {
    display: inline-block;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Rotate icon when section is open */
.metasync-accordion-header[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* Accordion Content */
.metasync-accordion-content {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
}

.metasync-accordion-content[data-state="closed"] {
    max-height: 0;
    opacity: 0;
    padding: 0 24px;
}

.metasync-accordion-content[data-state="open"] {
    max-height: 5000px; /* Large enough for any content */
    opacity: 1;
    padding: 0 24px 24px 24px;
}

/* Form Table Inside Accordion */
.metasync-accordion-content .form-table {
    margin-top: 0;
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 16px;
}

.metasync-accordion-content .form-table th,
.metasync-accordion-content .form-table td {
    padding: 18px 20px;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.02);
}

.metasync-accordion-content .form-table th {
    border-radius: 8px 0 0 8px;
}

.metasync-accordion-content .form-table td {
    border-radius: 0 8px 8px 0;
}

.metasync-accordion-content .form-table tr:hover th,
.metasync-accordion-content .form-table tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.metasync-accordion-content .form-table tr:first-child th,
.metasync-accordion-content .form-table tr:first-child td {
    padding-top: 18px;
}

.metasync-accordion-content .form-table tr:last-child th,
.metasync-accordion-content .form-table tr:last-child td {
    padding-bottom: 18px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .metasync-accordion-header {
        padding: 16px 20px;
    }

    .metasync-accordion-title {
        gap: 12px;
    }

    .metasync-accordion-icon {
        font-size: 24px;
    }

    .metasync-accordion-text h3 {
        font-size: 16px;
    }

    .metasync-accordion-description {
        font-size: 12px;
    }

    .metasync-accordion-content[data-state="open"] {
        padding: 0 20px 20px 20px;
    }

    .metasync-accordion-content .form-table {
        border-spacing: 0 12px;
    }

    .metasync-accordion-content .form-table th,
    .metasync-accordion-content .form-table td {
        padding: 14px 16px;
    }

    .metasync-accordion-content .form-table tr:first-child th,
    .metasync-accordion-content .form-table tr:first-child td {
        padding-top: 14px;
    }
}

/* ========================================
   TOOLTIP SYSTEM
   ======================================== */

/* Field Label Wrapper */
.metasync-field-label-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
}

.metasync-field-label-wrapper label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* Tooltip Trigger Button */
.metasync-tooltip-trigger {
    background: transparent;
    border: none;
    padding: 0;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.metasync-tooltip-trigger:hover,
.metasync-tooltip-trigger:focus {
    transform: scale(1.15);
}

.metasync-tooltip-trigger:focus {
    outline: 2px solid var(--dashboard-accent);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Info Icon SVG */
.metasync-info-icon {
    width: 18px;
    height: 18px;
    color: var(--dashboard-text-secondary);
    transition: color 0.2s ease;
}

.metasync-tooltip-trigger:hover .metasync-info-icon,
.metasync-tooltip-trigger:focus .metasync-info-icon {
    color: var(--dashboard-accent);
}

/* Tooltip Container */
.metasync-tooltip {
    position: absolute;
    z-index: 10000;
    background: var(--dashboard-card-bg);
    border: 1px solid var(--dashboard-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 14px 18px;
    width: 450px;
    max-width: calc(100vw - 40px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateY(-8px);
    left: 100%;
    margin-left: 16px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
}

.metasync-tooltip.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* Tooltip Arrow */
.metasync-tooltip-arrow {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--dashboard-border) transparent transparent;
}

.metasync-tooltip-arrow::after {
    content: '';
    position: absolute;
    left: 2px;
    top: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-color: transparent var(--dashboard-card-bg) transparent transparent;
}

/* Tooltip Content */
.metasync-tooltip-content {
    color: var(--dashboard-text-primary);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Tooltip Positioning - Handle edge cases */
.metasync-tooltip[data-position="left"] {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    transform: translateY(-50%) translateX(8px);
}

.metasync-tooltip[data-position="left"].show {
    transform: translateY(-50%) translateX(0);
}

.metasync-tooltip[data-position="left"] .metasync-tooltip-arrow {
    left: auto;
    right: -6px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--dashboard-border);
}

.metasync-tooltip[data-position="left"] .metasync-tooltip-arrow::after {
    left: -7px;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent var(--dashboard-card-bg);
}

/* Responsive Tooltip Widths */
@media (max-width: 1400px) {
    .metasync-tooltip {
        width: 400px;
    }
}

@media (max-width: 1200px) {
    .metasync-tooltip {
        width: 360px;
    }
}

@media (max-width: 992px) {
    .metasync-tooltip {
        width: 320px;
        padding: 12px 16px;
    }
}

/* Mobile & Tablet Tooltip Adjustments */
@media (max-width: 768px) {
    .metasync-tooltip {
        width: calc(100vw - 40px);
        max-width: 500px;
        font-size: 13px;
        padding: 14px 16px;
        position: fixed;
        left: 50% !important;
        top: auto !important;
        bottom: 20px;
        transform: translateX(-50%) translateY(8px);
        margin: 0;
    }

    .metasync-tooltip.show {
        transform: translateX(-50%) translateY(0);
    }

    .metasync-tooltip-arrow {
        display: none;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .metasync-tooltip {
        width: calc(100vw - 30px);
        font-size: 12px;
        padding: 12px 14px;
    }
}

/* Accessibility - Keyboard Navigation */
.metasync-accordion-header:focus-visible {
    outline: 2px solid var(--dashboard-accent);
    outline-offset: -2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .metasync-accordion-content,
    .metasync-accordion-toggle .toggle-icon,
    .metasync-tooltip,
    .metasync-tooltip-trigger {
        transition: none;
    }
}

/* ================================================
   Universal Gradient Button Text Color
   Ensures all elements with gradient backgrounds have white text
   ================================================ */

/* Light Mode - Ensure gradient backgrounds always have white text */
[data-theme="light"] .metasync-dashboard-wrap *[style*="--dashboard-gradient-primary"],
[data-theme="light"] .metasync-dashboard-wrap .button-primary,
[data-theme="light"] .metasync-dashboard-wrap .metasync-nav-tab.active,
[data-theme="light"] .metasync-dashboard-wrap .metasync-theme-option.active,
[data-theme="light"] .metasync-dashboard-wrap .metasync-sa-connect-btn.primary,
[data-theme="light"] .metasync-dashboard-wrap .metasync-dashboard-btn,
[data-theme="light"] .metasync-dashboard-wrap .metasync-sa-connect-btn,
[data-theme="light"] .metasync-dashboard-wrap #connect-searchatlas-btn {
    color: #ffffff !important;
}

/* Ensure hover states maintain white text */
[data-theme="light"] .metasync-dashboard-wrap .button-primary:hover,
[data-theme="light"] .metasync-dashboard-wrap .metasync-dashboard-btn:hover,
[data-theme="light"] .metasync-dashboard-wrap .metasync-sa-connect-btn:hover,
[data-theme="light"] .metasync-dashboard-wrap #connect-searchatlas-btn:hover {
    color: #ffffff !important;
}

/* ================================================
   Monochrome Emoji System
   Forces all decorative emoji to render as monochrome text glyphs
   so they inherit the element's CSS color property (white in dark
   theme, dark in light theme) rather than rendering as colorful
   emoji pictographs. Applies throughout all admin screens.
   ================================================ */

.metasync-dashboard-wrap h1,
.metasync-dashboard-wrap h2,
.metasync-dashboard-wrap h3,
.metasync-dashboard-wrap h4,
.metasync-dashboard-wrap h5,
.metasync-dashboard-wrap h6,
.metasync-dashboard-wrap label,
.metasync-dashboard-wrap th,
.metasync-dashboard-wrap td,
.metasync-dashboard-wrap legend,
.metasync-dashboard-wrap .button,
.metasync-dashboard-wrap .button-primary,
.metasync-dashboard-wrap .button-secondary,
.metasync-dashboard-wrap .metasync-stat-label,
.metasync-dashboard-wrap .metasync-stat-value,
.metasync-dashboard-wrap .dashboard-card-title,
.metasync-dashboard-wrap .notice,
.metasync-dashboard-wrap p,
.metasync-dashboard-wrap .metasync-accordion-icon,
.metasync-dashboard-wrap .sync-log-empty-icon,
.metasync-dashboard-wrap .sync-icon,
.metasync-dashboard-wrap span[class*="icon"],
.metasync-dashboard-wrap div[class*="icon"] {
    font-variant-emoji: text;
}

/* Dashicons inside sitemap stat-icon boxes */
.metasync-dashboard-wrap .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.metasync-dashboard-wrap .stat-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--dashboard-text-secondary);
}