/** * wpForo AI Features - Admin Styles * * Styles for the AI Features admin page including connection states, * feature lists, usage statistics, and interactive elements. * * @since 3.0.0 */ /* ========================================================================== Main Container ========================================================================== */ .wpforo-ai-wrap { max-width: 98%; margin: 20px 0; } .wpforo-ai-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .wpforo-ai-title .dashicons { font-size: 32px; width: 32px; height: 32px; } /* ========================================================================== Box Components ========================================================================== */ .wpforo-ai-box { background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); margin-bottom: 20px; } .wpforo-ai-box-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #ccd0d4; background: #f9f9f9; } .wpforo-ai-box-header h2 { margin: 0; font-size: 18px; font-weight: 600; } .wpforo-ai-box-body { padding: 20px; } .wpforo-ai-state{ width:100%; } /* ========================================================================== Status Badges ========================================================================== */ .wpforo-ai-status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 16px; border-radius: 4px; font-size: 16px; font-weight: 600; background: #eef9ff; color: #155995; } .wpforo-ai-status-badge .dashicons { width: 20px; height: 20px; font-size: 20px; } .wpforo-ai-status-badge.status-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .wpforo-ai-status-badge.status-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .wpforo-ai-status-badge.status-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .wpforo-ai-status-badge.status-pending { background: #e7f3ff; color: #0056b3; border: 1px solid #b8daff; } .wpforo-ai-status-badge.status-inactive { background: #f5f5f5; color: #666666; border: 1px solid #ddd; } .wpforo-ai-status-badge.status-enabled { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .wpforo-ai-status-badge.status-disabled { background: #f5f5f5; color: #666666; border: 1px solid #ddd; } .wpforo-ai-status-badge.status-processing, .wpforo-ai-status-badge.status-queued { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .wpforo-ai-status-badge.status-processing .wpforo-ai-mini-spinner, .wpforo-ai-status-badge.status-queued .wpforo-ai-mini-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #ffeeba; border-top-color: #856404; border-radius: 50%; animation: wpforo-mini-spin 0.8s linear infinite; margin: 0 10px 0 2px; vertical-align: text-bottom; } .wpforo-ai-status-badge.status-deleting .wpforo-ai-mini-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #f5c6cb; border-top-color: #721c24; border-radius: 50%; animation: wpforo-mini-spin 0.8s linear infinite; margin: 0 10px 0 2px; vertical-align: text-bottom; } @keyframes wpforo-mini-spin { to { transform: rotate(360deg); } } /* ========================================================================== Knowledge Files Table ========================================================================== */ #knowledge-files-table { table-layout: fixed; } #knowledge-files-table .column-name { width: 30%; } #knowledge-files-table .column-type { width: 10%; } #knowledge-files-table .column-size { width: 10%; } #knowledge-files-table .column-chunks { width: 10%; } #knowledge-files-table .column-credits { width: 10%; } #knowledge-files-table .column-status { width: 12%; } #knowledge-files-table .column-actions { width: 18%; } #knowledge-files-table .column-actions .wpforo-ai-delete-file { background: none; border: none; padding: 4px; cursor: pointer; color: #b32d2e; line-height: 1.2; } #knowledge-files-table .column-actions .wpforo-ai-delete-file:hover { color: #a00; } #knowledge-files-table tfoot td { font-weight: 500; } #knowledge-files-table tfoot .column-name { font-weight: 600; } /* ========================================================================== Pending Approval State ========================================================================== */ .wpforo-ai-pending-approval .wpforo-ai-description { font-size: 15px; line-height: 1.6; color: #555; margin-bottom: 20px; } .wpforo-ai-pending-approval .wpforo-ai-callout-info { background: #e7f3ff; border-left: 4px solid #0073aa; padding: 15px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .wpforo-ai-pending-approval .wpforo-ai-callout-info .dashicons { color: #0073aa; } .wpforo-ai-pending-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } .wpforo-ai-pending-note { color: #666; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; } .wpforo-ai-pending-note .dashicons { color: #0073aa; } /* ========================================================================== Inactive State ========================================================================== */ .wpforo-ai-inactive .wpforo-ai-description { font-size: 15px; line-height: 1.6; color: #555; margin-bottom: 20px; } .wpforo-ai-inactive .wpforo-ai-callout-warning { background: #f5f5f5; border-left: 4px solid #666; padding: 15px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .wpforo-ai-inactive .wpforo-ai-callout-warning .dashicons { color: #666; } .wpforo-ai-inactive-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } /* ========================================================================== Not Connected State ========================================================================== */ .wpforo-ai-not-connected .wpforo-ai-description { font-size: 15px; line-height: 1.6; margin: 15px 0; color: #555; } .wpforo-ai-callout { display: flex; align-items: flex-start; gap: 12px; padding: 15px 20px; background: #e7f5ff; border-left: 4px solid #2271b1; border-radius: 4px; margin: 20px 0; } .wpforo-ai-callout .dashicons { color: #2271b1; font-size: 24px; width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; } .wpforo-ai-callout strong { font-size: 15px; display: block; margin-bottom: 6px; color: #1d2327; } .wpforo-ai-callout p { margin: 0; font-size: 13px; color: #555; line-height: 1.5; } /* Localhost Warning */ .wpforo-ai-localhost-warning { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 4px; margin: 15px 0; color: #991b1b; font-size: 14px; line-height: 1.5; } .wpforo-ai-localhost-warning .dashicons { color: #dc2626; font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; } .wpforo-ai-not-connected button[disabled] { opacity: 0.6; cursor: not-allowed; } /* ========================================================================== Connection Details ========================================================================== */ .wpforo-ai-connection-details { margin: 20px 0 0 0; } .detail-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .detail-row:last-child { border-bottom: none; } .detail-label { font-weight: 600; min-width: 100px; color: #555; } .detail-value { flex: 1; font-family: Consolas, Monaco, monospace; font-size: 13px; padding: 4px 8px; background: #f5f5f5; border-radius: 3px; } .wpforo-ai-reveal-key { margin-left: 10px; } /* ========================================================================== Credits Section ========================================================================== */ .wpforo-ai-credits-section { margin: 0; padding: 20px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e1e4e8; } .credits-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .credits-header h3 { margin: 0; font-size: 16px; font-weight: 600; } .credits-numbers { display: flex; align-items: baseline; gap: 5px; font-size: 14px; } .credits-numbers strong { font-size: 24px; font-weight: 700; color: #2271b1; } .credits-label { color: #666; font-size: 13px; } .credits-progress-bar { height: 10px; background: #e1e4e8; border-radius: 5px; overflow: hidden; margin-bottom: 10px; } .credits-progress-fill { height: 100%; transition: width 0.3s ease, background-color 0.3s ease; border-radius: 5px; } .credits-progress-fill.status-good { background: linear-gradient(90deg, #28a745 0%, #34d058 100%); } .credits-progress-fill.status-warning { background: linear-gradient(90deg, #ffc107 0%, #ffca2c 100%); } .credits-progress-fill.status-critical { background: linear-gradient(90deg, #dc3545 0%, #e4606d 100%); } .credits-info { font-size: 13px; color: #666; } /* ========================================================================== Warning/Success Boxes ========================================================================== */ .wpforo-ai-warning-box, .wpforo-ai-success-box { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border-radius: 4px; margin: 20px 0; } .wpforo-ai-warning-box { background: #fff3cd; border-left: 4px solid #ffc107; } .wpforo-ai-success-box { background: #d4edda; border-left: 4px solid #28a745; } .wpforo-ai-warning-box .dashicons, .wpforo-ai-success-box .dashicons { flex-shrink: 0; width: 20px; height: 20px; font-size: 20px; margin-top: 2px; } .wpforo-ai-warning-box p, .wpforo-ai-success-box p { margin: 0; font-size: 14px; line-height: 1.5; } /* ========================================================================== Action Buttons ========================================================================== */ /* Universal button + dashicon alignment fix */ .button .dashicons, button .dashicons { vertical-align: middle; line-height: 1; } .wpforo-ai-actions { display: flex; gap: 10px; margin-top: 1px; flex-wrap: wrap; } .wpforo-ai-actions .button { display: inline-flex; align-items: center; gap: 6px; } .wpforo-ai-actions .button .dashicons { width: 18px; height: 18px; font-size: 18px; } .wpforo-ai-refresh-form { margin: 0; } .wpforo-ai-refresh-rag-status{ border-radius: 4px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 4px !important; margin-left: 5px !important; } /* ========================================================================== Features Accordion ========================================================================== */ .wpforo-ai-features-accordion { margin: 0; } .wpforo-ai-features-accordion .accordion-item { border-bottom: 1px solid #e0e0e0; } .wpforo-ai-features-accordion .accordion-item:last-child { border-bottom: none; } .wpforo-ai-features-accordion .accordion-header { width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 17px; background: #f9f9f9; border: none; cursor: pointer; font-size: 18px; font-weight: 500; color: #1d2327; text-align: left; transition: background 0.2s ease; } .wpforo-ai-features-accordion .accordion-header .accordion-status-icon { flex-shrink: 0; width: 24px; height: 24px; font-size: 24px; } .wpforo-ai-features-accordion .plan-unlocked .accordion-status-icon { color: #28a745; } .wpforo-ai-features-accordion .plan-locked .accordion-status-icon { color: #999; } .wpforo-ai-features-accordion .accordion-header .accordion-title { flex: 1; } .wpforo-ai-features-accordion .accordion-header:hover { background: #f0f0f0; } .wpforo-ai-features-accordion .accordion-header[aria-expanded="true"] { background: #e8f0fe; border-bottom: 1px solid #d0d8e8; } .wpforo-ai-features-accordion .accordion-header .accordion-icon { transition: transform 0.2s ease; color: #646970; } .wpforo-ai-features-accordion .accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); color: #2271b1; } .wpforo-ai-features-accordion .accordion-content { overflow: hidden; transition: height 0.3s ease; } .wpforo-ai-features-accordion .current-plan .accordion-header { background: #e8f4ea; } .wpforo-ai-features-accordion .current-plan .accordion-header .accordion-title::after { content: " (Your Plan)"; font-weight: 400; color: #28a745; font-size: 13px; margin-left: 8px; } /* ========================================================================== Features List ========================================================================== */ .wpforo-ai-features-list { list-style: none; margin: 0; padding: 0; } .wpforo-ai-features-list li { display: flex; align-items: flex-start; gap: 15px; padding: 15px; border-bottom: 1px solid #f0f0f0; transition: background 0.2s ease; } .wpforo-ai-features-list li:hover { background: #f8f9fa; } .wpforo-ai-features-list li:last-child { border-bottom: none; } .wpforo-ai-features-list .feature-icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; display: flex; align-items: center; justify-content: center; } .wpforo-ai-features-list .feature-icon svg { width: 22px; height: 22px; color: #666; } .feature-info { flex: 1; } .feature-info strong { display: inline-block; font-size: 15px; margin-bottom: 5px; } .pro-badge { display: inline-block; background: #2271b1; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; margin-left: 8px; } .feature-usage { display: block; font-size: 12px; color: #666; margin-bottom: 5px; } .feature-info p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; } /* Feature Credits Column */ .feature-credits { flex-shrink: 0; min-width: 80px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; border-left: 1px solid #f0f0f0; margin-left: 15px; } .feature-credits .credits-count { font-size: 18px; font-weight: 600; color: #1d2327; line-height: 1.2; } .feature-credits .credits-label { font-size: 11px; color: #999; text-transform: uppercase; } .feature-credits .credits-locked { color: #ccc; } .feature-credits .credits-locked .dashicons { font-size: 24px; width: 24px; height: 24px; } .wpforo-ai-features-list .button { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 5px; } /* Feature status indicators */ .wpforo-ai-features-list li.feature-enabled > .dashicons { color: #28a745; } .wpforo-ai-features-list li.feature-pending > .dashicons { color: #f0ad4e; } .wpforo-ai-features-list li.feature-teaser > .dashicons { color: #6f42c1; } .wpforo-ai-features-list li.feature-pending { opacity: 0.85; } .wpforo-ai-features-list li.feature-pending:hover { opacity: 1; } /* ========================================================================== Plan Badges for Features Preview ========================================================================== */ .plan-badge { flex-shrink: 0; display: inline-block; padding: 4px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; white-space: nowrap; min-width: 100px; text-align: center; } .plan-badge.plan-starter { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); color: #2e7d32; border: 1px solid #a5d6a7; } .plan-badge.plan-professional { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #1565c0; border: 1px solid #90caf9; } .plan-badge.plan-business { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color: #e65100; border: 1px solid #ffcc80; } .plan-badge.plan-enterprise { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); color: #7b1fa2; border: 1px solid #ce93d8; } /* Coming Soon Badge */ .coming-soon-badge { display: inline-block; margin-left: 10px; padding: 0 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%); color: #f57c00; border-radius: 3px; vertical-align: middle; } /* Feature icon colors by plan */ .wpforo-ai-features-preview li.plan-starter .feature-icon svg { color: #2e7d32; } .wpforo-ai-features-preview li.plan-professional .feature-icon svg { color: #1565c0; } .wpforo-ai-features-preview li.plan-business .feature-icon svg { color: #e65100; } .wpforo-ai-features-preview li.plan-enterprise .feature-icon svg { color: #7b1fa2; } /* Feature icon colors for pending features (override plan colors) */ .wpforo-ai-features-preview li.feature-pending .feature-icon svg { color: #f0ad4e; } /* Feature teaser icon */ .wpforo-ai-features-preview li.feature-teaser .feature-icon svg { color: #6f42c1; } /* ========================================================================== Pricing Table - Modern 2025 Design ========================================================================== */ .wpforo-ai-pricing-table { margin: 0 0; overflow-x: auto; } /* Modern Table Styling */ .pricing-table-modern { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .pricing-table-modern thead { background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); } .pricing-table-modern th { padding: 0; border-right: 1px solid rgba(255, 255, 255, 0.3); vertical-align: top; } .pricing-table-modern th:last-child { border-right: none; } .pricing-table-modern th.feature-column { width: 30%; padding: 56px 20px; text-align: left; font-size: 23px; font-weight: 500; background: linear-gradient(135deg, #c8c8c8 0%, #fff 100%); color: #5b5b5b; } /* Plan Column Base */ .pricing-table-modern th.plan-column { width: 17.5%; position: relative; transition: all 0.3s ease; } .pricing-table-modern th.plan-column:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* Gradient Colors for Each Plan - WordPress Blue Variations */ .pricing-table-modern th.plan-starter { background: linear-gradient(135deg, #4aa3df 0%, #2e7da4 100%); } .pricing-table-modern th.plan-professional { background: linear-gradient(135deg, #0073aa 0%, #005177 100%); } .pricing-table-modern th.plan-business { background: linear-gradient(135deg, #005177 0%, #003a57 100%); } .pricing-table-modern th.plan-enterprise { background: linear-gradient(135deg, #006a8e 0%, #004d6b 100%); } /* Active Plan Highlighting - Orange */ .pricing-table-modern th.plan-active { background: linear-gradient(135deg, #f56e28 0%, #d54e21 100%) !important; box-shadow: 0 0 0 3px #f56e28, 0 8px 30px rgba(245, 110, 40, 0.4); z-index: 10; transform: scale(1.02); } .pricing-table-modern th.plan-active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; } /* Plan Header Container */ .plan-header { padding: 30px 20px; text-align: center; position: relative; color: #fff; } /* Active Plan Badge */ .plan-active-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #fff; color: #d54e21; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } } /* Popular Badge */ .plan-popular-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #fff8b1; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; backdrop-filter: blur(10px); border-top: 2px solid rgba(255, 255, 255, 0.4); } /* Plan Name */ .plan-name { font-size: 24px; font-weight: 700; margin: 30px 0 15px 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Plan Price */ .plan-price { margin: 20px 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; } .plan-price .currency { font-size: 32px; font-weight: 600; opacity: 0.9; } .plan-price .price-amount { font-size: 40px; font-weight: 600; line-height: 1; } .plan-price .billing-period { font-size: 18px; font-weight: 400; opacity: 0.75; margin-left: 2px; } /* Credits Badge (Prominent Display) */ .plan-credits { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.25); padding: 12px 20px; border-radius: 50px; margin: 15px auto 0; backdrop-filter: blur(10px); /* border: 2px solid rgba(255, 255, 255, 0.3); */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .plan-credits .dashicons { width: 22px; height: 22px; font-size: 22px; color: #ffd966; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .plan-credits strong { font-size: 20px; font-weight: 800; margin-right: 4px; } /* Table Body */ .pricing-table-modern tbody tr { transition: background-color 0.2s ease; } .pricing-table-modern tbody tr:hover { background-color: #f8f9fa; } .pricing-table-modern tbody td { padding: 10px 16px; border-bottom: 1px solid #e8ecf1; text-align: center; font-size: 14px; } .pricing-table-modern tbody td:first-child { text-align: left; font-weight: 500; color: #2c3e50; } .pricing-table-modern tbody tr:last-child td { border-bottom: none; } /* Feature Category Rows */ .pricing-table-modern tr.feature-category td { background: linear-gradient(90deg, #f8f9fa 0%, #e8ecf1 100%); font-weight: 700; font-size: 13px; color: #2c3e50; padding: 10px 16px; text-align: left; text-transform: uppercase; letter-spacing: 0.3px; border-top: 2px solid #d5dbe3; } .pricing-table-modern tr.feature-category td .dashicons { margin-right: 6px; color: #0073aa; width: 16px; height: 16px; font-size: 16px; } /* Feature Item Rows (Indented) */ .pricing-table-modern tr.feature-item td:first-child { padding-left: 35px; font-size: 13px; /*color: #5a6c7d;*/ font-weight: 400; } /* Checkmark and Crossmark */ .pricing-table-modern .checkmark { display: inline-block; width: 22px; height: 22px; line-height: 22px; background: linear-gradient(135deg, #46b450 0%, #3a9d44 100%); color: #fff; border-radius: 50%; font-weight: 700; font-size: 14px; box-shadow: 0 2px 6px rgba(70, 180, 80, 0.3); } .pricing-table-modern .crossmark { display: inline-block; width: 22px; height: 22px; line-height: 22px; background: #e8ecf1; color: #95a5a6; border-radius: 50%; font-weight: 700; font-size: 14px; } /* CTA Row */ .pricing-table-modern tr.cta-row td { padding: 16px 16px; background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%); border-bottom: 2px solid #e8ecf1; } .pricing-table-modern tr.cta-row:last-child td { background: linear-gradient(to top, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%); border-bottom: none; } /* CTA Buttons - WordPress Style */ .button-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 20px !important; font-size: 14px !important; font-weight: 400 !important; border-radius: 3px !important; transition: all 0.2s ease !important; text-decoration: none !important; cursor: pointer; height: auto !important; line-height: 2.15384615 !important; min-height: 32px; } /* Primary Button - WordPress Blue */ .button-cta.button-primary { background: #0073aa !important; border: 1px solid #0073aa !important; color: #fff !important; text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799 !important; box-shadow: 0 1px 0 #006799 !important; } .button-cta.button-primary:hover, .button-cta.button-primary:focus { background: #0096dd !important; border-color: #0096dd !important; color: #fff !important; box-shadow: 0 1px 0 #007eb1 !important; } .button-cta.button-primary:active { background: #005177 !important; border-color: #005177 !important; box-shadow: inset 0 2px 0 #004357 !important; } /* Secondary Button - White with Border */ .button-cta.button-secondary { background: #f7f7f7 !important; border: 1px solid #ccd0d4 !important; color: #2c3338 !important; text-shadow: none !important; box-shadow: 0 1px 0 #ccd0d4 !important; } .button-cta.button-secondary:hover, .button-cta.button-secondary:focus { background: #fafafa !important; border-color: #8c8f94 !important; color: #1d2327 !important; box-shadow: 0 1px 0 #8c8f94 !important; } .button-cta.button-secondary:active { background: #f0f0f1 !important; border-color: #8c8f94 !important; box-shadow: inset 0 2px 0 #ccd0d4 !important; } /* Plan Active Info */ .plan-active-info { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px; color: #3a9d44; border-radius: 0; font-size: 18px; } .plan-active-info .dashicons { width: 25px; height: 25px; font-size: 25px; margin-bottom: 2px; } .plan-active-info small { font-size: 11px; opacity: 0.9; font-weight: 500; } /* Responsive Design */ @media screen and (max-width: 1200px) { .pricing-table-modern th.feature-column { width: 25%; } .pricing-table-modern th.plan-column { width: 18.75%; } } @media screen and (max-width: 768px) { .wpforo-ai-pricing-table { overflow-x: scroll; } .pricing-table-modern { min-width: 900px; } } .wpforo-ai-powered-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 4px; font-size: 13px; color: #666; } .wpforo-ai-powered-by .dashicons { color: #28a745; } /* ========================================================================== Usage Statistics ========================================================================== */ .wpforo-ai-usage-stats { margin: 15px 0; } .usage-summary { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .usage-stat-item { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e1e4e8; flex: 1; min-width: 200px; } .stat-icon { width: 32px; height: 32px; font-size: 32px; color: #2271b1; } .stat-info { display: flex; flex-direction: column; } .stat-info strong { font-size: 24px; font-weight: 700; color: #2271b1; line-height: 1; } .stat-label { font-size: 13px; color: #666; margin-top: 4px; } .wpforo-ai-usage-table { width: 100%; border-collapse: collapse; margin-top: 15px; } .wpforo-ai-usage-table thead th { text-align: left; padding: 12px; background: #f8f9fa; border-bottom: 2px solid #e1e4e8; font-weight: 600; font-size: 13px; text-transform: uppercase; color: #555; } .wpforo-ai-usage-table tbody td { padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px; } .wpforo-ai-usage-table tbody tr:hover { background: #f8f9fa; } .wpforo-ai-no-usage { text-align: center; padding: 40px; color: #999; font-size: 15px; } /* ========================================================================== Account Information ========================================================================== */ .wpforo-ai-advanced-info { margin-bottom: 20px; } .info-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; align-items: center; } .info-row:last-child { border-bottom: none; } .info-label { font-weight: 600; min-width: 120px; color: #555; } .info-value { flex: 1; color: #333; } .wpforo-ai-advanced-actions { display: flex; gap: 10px; flex-wrap: wrap; } .wpforo-ai-advanced-actions .button { display: inline-flex; align-items: center; gap: 6px; } /* ========================================================================== Error State ========================================================================== */ .wpforo-ai-error-state .wpforo-ai-error-message { padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px; margin: 20px 0; } .wpforo-ai-error-message p { margin: 0; font-size: 15px; line-height: 1.6; } .wpforo-ai-error-actions { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; } .wpforo-ai-error-actions form { margin: 0; } .wpforo-ai-support-info { margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 4px; text-align: center; } .wpforo-ai-support-info p { margin: 0; font-size: 14px; color: #666; } /* ========================================================================== Disconnect Warning Dialog ========================================================================== */ .wpforo-ai-disconnect-warning { padding: 15px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 20px; } .wpforo-ai-disconnect-warning .dashicons { float: left; margin-right: 10px; color: #856404; font-size: 24px; width: 24px; height: 24px; } .wpforo-ai-disconnect-warning p { margin: 5px 0; line-height: 1.6; } /* ========================================================================== Responsive Design ========================================================================== */ @media screen and (max-width: 782px) { .wpforo-ai-pricing-table { grid-template-columns: 1fr; } .credits-header { flex-direction: column; align-items: flex-start; gap: 10px; } .wpforo-ai-actions { flex-direction: column; } .wpforo-ai-actions .button { width: 100%; justify-content: center; } .usage-summary { flex-direction: column; } .detail-row { flex-direction: column; align-items: flex-start; gap: 5px; } .info-row { flex-direction: column; align-items: flex-start; gap: 5px; } } /* ========================================================================== Animations ========================================================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .wpforo-ai-box { animation: fadeIn 0.3s ease-out; } /* Loading state for buttons - spin the existing dashicons-update icon */ .button.loading { pointer-events: none; opacity: 0.8; } .button.loading .dashicons-update { display: inline-block; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Tab Navigation ========================================================================== */ .wpforo-ai-tabs { margin: 10px 0 20px 0; border-bottom: 1px solid #ccd0d4; } .wpforo-ai-tabs .nav-tab { border: 1px solid #ccd0d4; border-bottom: none; color: #555; font-size: 15px; padding: 12px 15px; margin-left: 0; margin-right: 5px; transition: all 0.2s ease; } .wpforo-ai-tabs .nav-tab:hover { background: #f0f0f1; color: #2271b1; } .wpforo-ai-tabs .nav-tab-active { color: #111; font-weight: 600; position: relative; top: 1px; } /* AI Settings Tab with board links */ .wpforo-ai-settings-tab { cursor: default; float: right; } .wpforo-ai-settings-tab a { color: #2271b1; text-decoration: none; transition: all 0.2s ease; } .wpforo-ai-settings-tab a:hover { color: #13aacd; } .wpforo-ai-tab-content { margin-top: 0; } .wpforo-ai-state.wpforo-ai-not-connected{ width: 100%; } /* ========================================================================== Storage Settings Box ========================================================================== */ .wpforo-ai-storage-settings-box { margin-bottom: 20px; } .wpforo-ai-storage-options { display: flex; flex-direction: column; gap: 20px; } .wpforo-ai-storage-toggle { display: flex; align-items: center; gap: 20px; } .wpforo-ai-toggle-label { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .wpforo-ai-toggle-text { font-weight: 600; color: #1d2327; min-width: 120px; } .wpforo-ai-toggle-switch { display: flex; gap: 0; background: #f0f0f1; border-radius: 6px; padding: 4px; border: 1px solid #c3c4c7; } .wpforo-ai-toggle-switch input[type="radio"] { display: none; } .wpforo-ai-storage-option { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; color: #50575e; background: transparent; transition: all 0.2s ease; border: 1px solid transparent; } .wpforo-ai-storage-option:hover { background: #fff; color: #1d2327; } .wpforo-ai-storage-option.active { background: #fff; color: #2271b1; border-color: #2271b1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .wpforo-ai-storage-option .dashicons { width: 18px; height: 18px; font-size: 18px; } .wpforo-ai-storage-info { margin-top: 5px; } .wpforo-ai-storage-recommendation { display: flex; align-items: center; gap: 10px; padding: 8px 15px; border-radius: 6px; font-size: 14px; } .wpforo-ai-storage-recommendation.status-good { background: #eaf7ed; color: #155724; border-left: 4px solid #28a745; } .wpforo-ai-storage-recommendation.status-warning { background: #fff3cd; color: #856404; border-left: 4px solid #ffc107; } .wpforo-ai-storage-recommendation.status-critical { background: #f8d7da; color: #721c24; border-left: 4px solid #dc3545; } .wpforo-ai-storage-recommendation.status-info { background: #e7f3ff; color: #0c5a93; border-left: 4px solid #2271b1; } .wpforo-ai-storage-recommendation .dashicons { flex-shrink: 0; width: 20px; height: 20px; font-size: 20px; } .wpforo-ai-storage-stats { /* display: flex; */ display: none; gap: 24px; margin-top: 12px; padding: 12px 16px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e1e4e8; } .wpforo-ai-storage-stats .stat-item { display: flex; flex-direction: column; gap: 2px; } .wpforo-ai-storage-stats .stat-item strong { font-size: 18px; font-weight: 700; color: #2271b1; } .wpforo-ai-storage-options > p.description { margin-top: 5px; font-size: 13px; color: #666; line-height: 1.6; } /* ========================================================================== AI Content Indexing Status ========================================================================== */ .wpforo-ai-rag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .rag-stat-item { display: flex; align-items: center; gap: 15px; padding: 20px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e1e4e8; } .rag-stat-item .stat-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; border: 2px solid #e1e4e8; } .rag-stat-item .stat-icon .dashicons { width: 32px; height: 32px; font-size: 32px; color: #2271b1; } .rag-stat-item .stat-info { flex: 1; } .rag-stat-item .stat-value { font-size: 28px; font-weight: 700; color: #2271b1; line-height: 1; margin-bottom: 5px; } .rag-stat-item .stat-value.status-active { color: #28a745; } .rag-stat-item .stat-value.status-idle { color: #999; } .rag-stat-item .stat-value .rag-queued-count { font-size: 16px; font-weight: 400; color: #da3cdf; } .rag-stat-item .stat-label { font-size: 13px; color: #666; } /* Spinning icon for active indexing */ .wpforo-spin, .dashicons-spin { animation: wpforo-spin 1s linear infinite; display: inline-block; } @keyframes wpforo-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } /* Status badge spinner - rotates clockwise for dashicons-update arrows */ .wpforo-status-spin { display: inline-block; animation: wpforo-status-spin 1s linear infinite; } @keyframes wpforo-status-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Save button spinner - rotates clockwise for natural loading appearance */ .wpforo-save-spin { display: inline-block; animation: wpforo-save-spin 1s linear infinite; } @keyframes wpforo-save-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* RAG Indexing Status spinner - flipped icon with correct rotation direction */ .wpforo-rag-status-spin { display: inline-block; transform: scaleX(-1); animation: wpforo-rag-status-spin 1s linear infinite; } @keyframes wpforo-rag-status-spin { 0% { transform: scaleX(-1) rotate(0deg); } 100% { transform: scaleX(-1) rotate(-360deg); } } /* WordPress Content Indexing spinner - flipped icon with correct rotation direction */ .wpforo-wp-indexing-spin { display: inline-block; transform: scaleX(-1); animation: wpforo-wp-indexing-spin 1s linear infinite; } @keyframes wpforo-wp-indexing-spin { 0% { transform: scaleX(-1) rotate(0deg); } 100% { transform: scaleX(-1) rotate(360deg); } } /* ========================================================================== RAG Progress Bar ========================================================================== */ .wpforo-ai-rag-progress { margin: 20px 0; } .rag-progress-bar { height: 20px; background: #e1e4e8; border-radius: 10px; overflow: hidden; position: relative; } .rag-progress-fill { height: 100%; background: linear-gradient(90deg, #2271b1 0%, #3582c4 100%); transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; } .rag-progress-info { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-top: 8px; } /* ========================================================================== RAG Forum Content Indexing Form ========================================================================== */ .wpforo-ai-manual-ingest-form { margin: 20px 0; } .wpforo-ai-manual-ingest-form .form-row { margin-bottom: 15px; } .wpforo-ai-manual-ingest-form label { display: block; font-weight: 600; margin-bottom: 8px; color: #555; } .wpforo-ai-manual-ingest-form input[type="text"] { width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid #ccd0d4; border-radius: 4px; } .wpforo-ai-manual-ingest-form input[type="text"]:focus { border-color: #2271b1; outline: none; box-shadow: 0 0 0 1px #2271b1; } .wpforo-ai-manual-ingest-form .description { font-size: 13px; color: #666; margin-top: 5px; font-style: italic; } .wpforo-ai-manual-ingest-form .form-actions { margin-top: 15px; } /* ========================================================================== RAG Bulk Actions ========================================================================== */ .wpforo-ai-bulk-actions { margin: 20px 0; } .bulk-action-item { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 6px; margin-bottom: 15px; gap: 20px; } .bulk-action-item.bulk-action-danger { background: #fff5f5; border-color: #ffc9c9; } .bulk-action-item.bulk-action-warning { background: #fff9e6; border-color: #ffe066; } .bulk-action-item .action-info { flex: 1; } .bulk-action-item .action-info h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333; } .bulk-action-item .action-info p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; } .bulk-action-item .action-controls { flex-shrink: 0; } .bulk-action-item .button-large { display: inline-flex; align-items: center; gap: 6px; min-width: 140px; } /* Danger button styling */ .button-danger { background: #dc3545; border-color: #dc3545; color: #fff; } .button-danger:hover { background: #c82333; border-color: #bd2130; color: #fff; } .button-danger:focus { background: #c82333; border-color: #bd2130; box-shadow: 0 0 0 1px #dc3545; } /* ========================================================================== RAG Queue Info ========================================================================== */ .wpforo-ai-queue-info { margin: 20px 0; padding: 15px 20px; background: #e7f5ff; border-left: 4px solid #2271b1; border-radius: 4px; } .queue-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 10px; } .queue-info-item { display: flex; align-items: center; gap: 10px; } .queue-info-item .dashicons { color: #2271b1; font-size: 20px; width: 20px; height: 20px; } .queue-info-item .info-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; } .queue-info-item .info-value { font-size: 20px; font-weight: 700; color: #2271b1; } /* ========================================================================== Print Styles ========================================================================== */ @media print { .wpforo-ai-actions, .wpforo-ai-advanced-actions, .wpforo-ai-refresh-form { display: none; } } /* ========================================================================== Responsive Design - RAG Specific ========================================================================== */ @media screen and (max-width: 782px) { .wpforo-ai-rag-stats { grid-template-columns: 1fr; } .bulk-action-item { flex-direction: column; align-items: flex-start; } .bulk-action-item .action-controls { width: 100%; } .bulk-action-item .button-large { width: 100%; justify-content: center; } .queue-info-grid { grid-template-columns: 1fr; } } /* Chunking Configuration */ .wpforo-ai-chunking-config-box { margin-bottom: 25px; } .wpforo-ai-chunking-settings { display: flex; flex-direction: column; gap: 20px; } .chunking-setting-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px; background: #f9f9f9; border-radius: 6px; border: 1px solid #e0e0e0; } .chunking-setting-row .setting-label { flex: 1; margin-right: 20px; } .chunking-setting-row .setting-label label { font-weight: 600; color: #23282d; display: block; margin-bottom: 5px; } .chunking-setting-row .setting-label .description { margin-top: 8px; margin-bottom: 0; font-size: 13px; } .chunking-setting-row .setting-control { flex: 0 0 250px; text-align: right; } .chunking-setting-row .setting-control input[type="number"] { width: 120px; padding: 8px 12px; font-size: 14px; border: 1px solid #dcdcdc; border-radius: 4px; } .chunking-setting-row .input-hint { display: block; font-size: 11px; color: #666; margin-top: 4px; } .chunking-info-notice { display: flex; align-items: flex-start; padding: 15px; background: #e7f3ff; border-left: 4px solid #0073aa; border-radius: 4px; margin-top: 10px; } .chunking-info-notice .dashicons { color: #0073aa; margin-right: 10px; flex-shrink: 0; } .chunking-info-notice .notice-content { flex: 1; } .chunking-actions { margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd; text-align: right; } .chunking-actions .button { display: inline-flex; align-items: center; gap: 6px; min-width: 180px; } .chunking-info-notice strong { display: block; margin-bottom: 8px; color: #0073aa; } .chunking-info-notice ul { margin: 0; padding-left: 20px; list-style: disc; } .chunking-info-notice li { margin-bottom: 5px; font-size: 13px; color: #555; } /* Responsive styles for chunking config */ @media screen and (max-width: 782px) { .chunking-setting-row { flex-direction: column; } .chunking-setting-row .setting-label { margin-right: 0; margin-bottom: 12px; } .chunking-setting-row .setting-control { flex: 1; width: 100%; text-align: left; } .chunking-setting-row .setting-control input[type="number"] { width: 100%; max-width: 300px; } } /* ========================================================================== Search Test Box ========================================================================== */ .wpforo-ai-search-test-box .form-row { margin-bottom: 20px; } .wpforo-ai-search-test-box .form-row label { display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327; } .wpforo-ai-search-test-box .form-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; } .wpforo-ai-search-test-box .spinner { visibility: hidden; } .wpforo-ai-search-test-box .spinner.is-active { visibility: visible; } /* Search Results */ .wpforo-ai-search-results { margin-top: 30px; padding-top: 20px; border-top: 2px solid #e5e5e5; } .wpforo-ai-search-results h3 { margin-top: 0; margin-bottom: 20px; color: #1d2327; font-size: 16px; } .search-query-info { background: #f0f6fc; border-left: 4px solid #0073aa; padding: 12px 15px; margin-bottom: 15px; font-size: 14px; } .search-query-info p { margin: 0; } .search-credit-info { margin-bottom: 20px; } .search-results-list { display: flex; flex-direction: column; gap: 20px; } .search-result-item { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .search-result-item .result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e5e5e5; font-size: 13px; color: #666; } .search-result-item .result-title { margin: 0 0 10px 0; font-size: 16px; color: #0073aa; line-height: 1.4; } .search-result-item .result-excerpt { margin: 0 0 12px 0; color: #555; font-size: 14px; line-height: 1.6; } .search-result-item .result-url { margin: 0 0 12px 0; font-size: 13px; } .search-result-item .result-url code { background: #f5f5f5; padding: 3px 8px; border-radius: 3px; font-size: 12px; color: #d63638; } .search-result-item .result-metadata { margin: 15px 0; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 12px; } .search-result-item .result-metadata strong { display: block; margin-bottom: 8px; color: #1d2327; font-size: 13px; } .search-result-item .result-metadata pre, .search-result-item .result-full-json pre { background: #282c34; color: #abb2bf; padding: 12px; border-radius: 4px; overflow-x: auto; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace; font-size: 12px; line-height: 1.5; margin: 0; max-height: 300px; overflow-y: auto; white-space: pre-wrap; } .search-result-item .toggle-json-btn { margin-top: 10px; font-size: 12px; } .search-result-item .result-full-json { margin-top: 10px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 12px; } /* Empty state */ .search-results-list:empty::after { content: 'No results to display'; display: block; padding: 20px; text-align: center; color: #666; font-style: italic; } /* Responsive */ @media screen and (max-width: 782px) { .search-result-item .result-metadata pre, .search-result-item .result-full-json pre { font-size: 11px; padding: 10px; } } /* ========================================================================== Forum Content Indexing - Two Column Layout ========================================================================== */ .wpforo-ai-ingest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } .wpforo-ai-ingest-column { background: #f9f9f9; border: 1px solid #dcdcde; border-radius: 4px; padding: 20px; } .wpforo-ai-ingest-column h3 { margin: 0 0 10px 0; font-size: 16px; font-weight: 600; color: #1d2327; border-bottom: 1px solid #dcdcde; padding-bottom: 10px; } .wpforo-ai-ingest-column .description { margin: 10px 0 15px 0; color: #646970; font-size: 13px; } /* Forum Checklist */ .wpforo-ai-forum-checklist { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; max-height: 288px; overflow-y: auto; padding: 10px; margin-bottom: 15px; } .wpforo-ai-forum-checklist-scrollable { max-height: 250px; overflow-y: auto; } /* Forum Select Actions (Select All / Deselect All) */ .wpforo-ai-forum-select-actions { margin-bottom: 8px; font-size: 12px; } .wpforo-ai-forum-select-actions a { text-decoration: none; color: #2271b1; } .wpforo-ai-forum-select-actions a:hover { color: #135e96; text-decoration: underline; } /* User Select Dropdown */ .wpforo-ai-user-select { width: 100%; max-width: 400px; } .wpforo-ai-forum-checkbox-item { display: block; padding: 4px 12px; margin: 0; cursor: pointer; border-radius: 3px; transition: background-color 0.15s ease; } .wpforo-ai-forum-checkbox-item:hover { background-color: #f6f7f7; } .wpforo-ai-forum-checkbox-item input[type="checkbox"] { margin: 0 8px 0 0; vertical-align: middle; } .wpforo-ai-forum-child { padding-left: 32px; font-size: 13px; } .wpforo-ai-forum-parent { border-top: 1px solid #f0f0f1; margin-top: 5px; padding-top: 8px; } .wpforo-ai-forum-parent:first-child { border-top: none; margin-top: 0; } .wpforo-ai-forum-category { font-weight: 600; } .wpforo-ai-forum-indent { color: #8c8f94; margin-right: 5px; } /* Forum Actions */ .wpforo-ai-forum-actions { display: flex; gap: 8px; margin-bottom: 15px; } .wpforo-ai-forum-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; } /* Terms Checklist (for WordPress Content Indexing) */ .wpforo-ai-terms-container { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; max-height: 288px; overflow-y: auto; padding: 10px; margin-bottom: 10px; min-height: 100px; } .wpforo-ai-terms-placeholder { color: #646970; font-style: italic; padding: 20px; text-align: center; } .wpforo-ai-terms-loading { color: #646970; padding: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; } .wpforo-ai-terms-loading .spinner { margin: 0; float: none; } .wpforo-ai-terms-checklist { margin: 0; padding: 0; } .wpforo-ai-term-checkbox-item { display: block; padding: 6px 12px; margin: 0; cursor: pointer; border-radius: 3px; transition: background-color 0.15s ease; } .wpforo-ai-term-checkbox-item:hover { background-color: #f6f7f7; } .wpforo-ai-term-checkbox-item input[type="checkbox"] { margin: 0 8px 0 0; vertical-align: middle; } .wpforo-ai-term-checkbox-item .term-name { vertical-align: middle; } .wpforo-ai-term-child { padding-left: 32px; font-size: 13px; } .wpforo-ai-term-info { color: #646970; font-size: 12px; margin-left: 4px; } .wpforo-ai-terms-actions { display: flex; gap: 8px; margin-bottom: 15px; } .wpforo-ai-terms-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; } /* Form Actions - Two Column Layout (Clear | Index) */ .wpforo-ai-ingest-column .form-actions { margin-top: 20px; display: flex !important; flex-wrap: wrap; gap: 10px; justify-content: space-between !important; } /* Clear Forum Button - Red Destructive Styling */ .wpforo-ai-ingest-column .form-actions button.button.wpforo-ai-clear-forum-btn, .wpforo-ai-ingest-column .form-actions .button.wpforo-ai-clear-forum-btn, button.button.wpforo-ai-clear-forum-btn { background: #fff !important; background-color: #fff !important; border-color: #d63638 !important; color: #d63638 !important; } .wpforo-ai-ingest-column .form-actions button.button.wpforo-ai-clear-forum-btn:hover, .wpforo-ai-ingest-column .form-actions button.button.wpforo-ai-clear-forum-btn:focus, .wpforo-ai-ingest-column .form-actions .button.wpforo-ai-clear-forum-btn:hover, .wpforo-ai-ingest-column .form-actions .button.wpforo-ai-clear-forum-btn:focus, button.button.wpforo-ai-clear-forum-btn:hover, button.button.wpforo-ai-clear-forum-btn:focus { background: #fcf0f1 !important; background-color: #fcf0f1 !important; border-color: #d63638 !important; color: #d63638 !important; } .wpforo-ai-clear-forum-btn .dashicons { color: inherit !important; } .wpforo-ai-ingest-column .form-row { margin-bottom: 20px; } .wpforo-ai-ingest-column label { display: block; font-weight: 600; color: #1d2327; } .wpforo-ai-ingest-column .regular-text { width: 100%; } .wpforo-ai-no-forums { padding: 20px; background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; text-align: center; color: #646970; font-style: italic; } /* Button styling */ .wpforo-ai-ingest-column .button-large { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: auto; padding: 10px 20px; font-size: 14px; } .wpforo-ai-forum-ingest-form .form-actions .button-large{ width: 49%; } /* Responsive */ @media screen and (max-width: 1200px) { .wpforo-ai-ingest-grid { grid-template-columns: 1fr; gap: 20px; } } @media screen and (max-width: 782px) { .wpforo-ai-forum-checklist { max-height: 250px; } .wpforo-ai-forum-checkbox-item { padding: 10px; } .wpforo-ai-ingest-column { padding: 15px; } } /* Forum Quick Actions (in Forum Content Indexing section) */ .wpforo-ai-quick-actions { display: flex; gap: 15px; padding: 20px; background: #f8f9fa; border: 1px solid #dcdcde; border-radius: 4px; margin-top: 10px; justify-content: flex-end; } .wpforo-ai-quick-actions .button { display: inline-flex; align-items: center; gap: 6px; } .wpforo-ai-quick-actions .button-link-delete { color: #d63638; } .wpforo-ai-quick-actions .button-link-delete:hover { color: #a02729; } @media screen and (max-width: 782px) { .wpforo-ai-quick-actions { flex-direction: column; } .wpforo-ai-quick-actions .button { width: 100%; justify-content: center; } } /* ========================================================================== Index All Section (Full Width) ========================================================================== */ .wpforo-ai-index-all-section { padding: 25px; margin-bottom: 30px; color: #333; } .wpforo-ai-index-all-content { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; margin-bottom: 5px; } .wpforo-ai-index-all-info h3 { margin: 0 0 8px 0; font-size: 20px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 10px; } /* Bonus Credits Button */ .wp-core-ui .button.wpforo-ai-bonus-credits-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 12px; height: auto; line-height: 1.4; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible { border: 1px solid #3c8039; color: #2e6b2c; background: #e6f4e6; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible:hover { background: #d4ecd4; border-color: #2e6b2c; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible:focus { box-shadow: 0 0 0 1px #2e6b2c; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn.claimed { border: 1px solid #9bc49a; color: #5a8f59; background: #f0f8f0; cursor: default; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn .dashicons { font-size: 16px; width: 16px; height: 16px; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible .dashicons { color: #e6a800; } .wp-core-ui .button.wpforo-ai-bonus-credits-btn.claimed .dashicons { color: #5a8f59; } /* Bonus Credits Spinner */ .wpforo-ai-bonus-spinner { visibility: hidden; } .wpforo-ai-bonus-spinner.is-active { visibility: visible; } /* Hide button text and show spinner during loading */ .wp-core-ui .button.wpforo-ai-bonus-credits-btn.loading { pointer-events: none; opacity: 0.7; } .wp-core-ui .button-secondary.wpforo-ai-disconnect-btn{ margin: 0 0 0 auto; border: #ca9696 1px solid; color: #b35b5b; background: #fff0ea; display: flex; align-items: center; justify-content: center; gap: 4px; } .wp-core-ui .button-secondary.wpforo-ai-disconnect-btn:hover{ background: #ffd9cc; } .wpforo-ai-index-all-info h3 .dashicons { font-size: 24px; width: 24px; height: 24px; } .wpforo-ai-index-all-info .description { margin: 0; color: #666; font-size: 14px; } /* Indexing Status Breakdown */ .wpforo-ai-indexing-breakdown { width: 47%; margin: 30px 0 0 auto; } .wpforo-ai-breakdown-details { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; } .wpforo-ai-breakdown-summary { display: flex; align-items: center; gap: 8px; padding: 12px 15px; cursor: pointer; color: #64748b; font-size: 13px; background: transparent; transition: background 0.2s ease; } .wpforo-ai-breakdown-summary:hover { background: #f1f5f9; } .wpforo-ai-breakdown-summary .dashicons { font-size: 18px; width: 18px; height: 18px; } .wpforo-ai-breakdown-arrow { margin-left: auto; transition: transform 0.2s ease; } .wpforo-ai-breakdown-details[open] .wpforo-ai-breakdown-arrow { transform: rotate(180deg); } .wpforo-ai-breakdown-content { padding: 15px; border-top: 1px solid #e2e8f0; background: #fff; } .wpforo-ai-breakdown-intro { margin: 0 0 12px 0; color: #64748b; font-size: 13px; } .wpforo-ai-breakdown-list { margin: 0; padding: 0; list-style: none; } .wpforo-ai-breakdown-list li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; color: #475569; font-size: 13px; border-bottom: 1px solid #f1f5f9; } .wpforo-ai-breakdown-list li:last-child { border-bottom: none; } .wpforo-ai-breakdown-list li .dashicons { font-size: 16px; width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; margin-top: 2px; } .wpforo-ai-breakdown-list li .dashicons-lock { color: #f59e0b; } .wpforo-ai-breakdown-list li .dashicons-clock { color: #3b82f6; } .wpforo-ai-breakdown-list li strong { color: #334155; font-weight: 600; } .wpforo-ai-breakdown-note { margin: 15px 0 0 0; padding: 10px; background: #fffbeb; border-radius: 4px; color: #92400e; font-size: 12px; } .wpforo-ai-breakdown-note em { font-style: normal; } .wpforo-ai-breakdown-loading { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 6px; color: #64748b; font-size: 13px; } .wpforo-ai-breakdown-loading .dashicons { font-size: 16px; width: 16px; height: 16px; } .wpforo-ai-index-all-stats { display: flex; gap: 20px; background: #0073aa; padding: 15px 20px; border-radius: 6px; color: #fff; } .wpforo-ai-index-all-stats .stat-item { text-align: center; min-width: 100px; } .wpforo-ai-index-all-stats .stat-label { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.9); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .wpforo-ai-index-all-stats .stat-value { display: block; font-size: 24px; font-weight: 700; color: #fff; } .wpforo-ai-index-all-stats .stat-success { color: #4ade80; } .wpforo-ai-index-all-stats .stat-warning { color: #fbbf24; } .wpforo-ai-index-all-stats .stat-credits-needed { color: #a78bfa; } /* Credit Notices */ .wpforo-ai-credit-notice { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border-radius: 6px; margin-bottom: 20px; background: #fff; border: 1px solid #dcdcde; } .wpforo-ai-credit-notice .dashicons { flex-shrink: 0; font-size: 20px; width: 20px; height: 20px; margin-top: 2px; } .wpforo-ai-credit-notice p { margin: 0; font-size: 14px; line-height: 1.6; } .wpforo-ai-notice-info { border-left: 4px solid #3b82f6; } .wpforo-ai-notice-warning { border-left: 4px solid #fbbf24; } .wpforo-ai-notice-error { border-left: 4px solid #f87171; } .wpforo-ai-notice-success { border-left: 4px solid #4ade80; } /* Index All Action Button */ .wpforo-ai-index-all-action { text-align: right; } .wpforo-ai-index-all-action .button-hero { display: inline-flex; align-items: center; gap: 8px; background: #0073aa; color: #fff; border: none; font-size: 16px; font-weight: 600; padding: 12px 30px; height: auto; line-height: 1.4; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .wpforo-ai-index-all-action .button-hero:hover:not(:disabled) { background: #005177; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); } .wpforo-ai-index-all-action .button-hero:disabled { background: #ccc; color: #666; cursor: not-allowed; box-shadow: none; } .wpforo-ai-index-all-action .button-hero .dashicons { font-size: 20px; width: 20px; height: 20px; } /* Section Divider */ .wpforo-ai-section-divider { position: relative; text-align: center; margin: 30px 0; } .wpforo-ai-section-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, #dcdcde 20%, #dcdcde 80%, transparent); } .wpforo-ai-section-divider span { position: relative; display: inline-block; background: #fff; padding: 0 20px; color: #646970; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } /* Small Section Divider (for inline separators) */ .wpforo-ai-section-divider-small { margin: 20px 0 15px; } .wpforo-ai-section-divider-small span { font-size: 12px; text-transform: none; font-weight: 500; } /* ========================================================================== Credit Packs Section ========================================================================== */ .wpforo-ai-credit-packs-wrapper { padding: 10px 20px; background: #fff; } .credit-packs-header { margin-bottom: 25px; text-align: center; } .credit-packs-header h3 { font-size: 22px; font-weight: 600; color: #1d2327; margin: 0 0 10px 0; } .credit-packs-description { color: #646970; font-size: 15px; line-height: 1.6; max-width: 700px; margin: 0 auto; } .wpforo-ai-credit-packs-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; } .credit-pack { position: relative; background: #f8f9fa; border: 2px solid #e1e4e8; border-radius: 8px; padding: 20px; transition: all 0.3s ease; display: flex; flex-direction: column; } .credit-pack:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); border-color: #2271b1; } .credit-pack-popular { border-color: #2271b1; background: linear-gradient(135deg, #f8f9ff 0%, #f8f9fa 100%); } .credit-pack-badge { position: absolute; top: -12px; right: 20px; background: #2271b1; color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 4px 12px; border-radius: 12px; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(34, 113, 177, 0.3); } .credit-pack-header { text-align: center; margin-bottom: 15px; } .credit-pack-header h4 { font-size: 18px; font-weight: 600; color: #1d2327; margin: 0 0 10px 0; } .credit-pack-price { font-size: 32px; font-weight: 700; color: #2271b1; line-height: 1; } .credit-pack-period { display: block; font-size: 12px; font-weight: 400; color: #646970; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; } .credit-pack-features { flex: 1; margin-bottom: 20px; } .credit-pack-features ul { list-style: none; margin: 0; padding: 0; } .credit-pack-features li { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: #3c434a; font-size: 13px; line-height: 1.4; } .credit-pack-features li .dashicons { color: #4ade80; font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; } .credit-pack-action { text-align: center; } .credit-pack-action .button { width: 100%; justify-content: center; font-weight: 600; padding: 10px 20px; height: auto; line-height: 1.4; } .credit-pack-popular .credit-pack-action .button-primary { background: #2271b1; border-color: #2271b1; color: #fff; box-shadow: 0 2px 4px rgba(34, 113, 177, 0.3); } .credit-pack-popular .credit-pack-action .button-primary:hover { background: #135e96; border-color: #135e96; box-shadow: 0 4px 8px rgba(34, 113, 177, 0.4); } /* Responsive */ @media screen and (max-width: 1200px) { .wpforo-ai-index-all-content { grid-template-columns: 1fr; gap: 20px; } .wpforo-ai-index-all-stats { justify-content: center; } .wpforo-ai-credit-packs-table { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media screen and (max-width: 900px) { .wpforo-ai-credit-packs-table { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 782px) { .wpforo-ai-index-all-section { padding: 20px; } .wpforo-ai-index-all-stats { flex-direction: column; gap: 15px; } .wpforo-ai-index-all-stats .stat-item { min-width: auto; } .wpforo-ai-index-all-action .button-hero { width: 100%; font-size: 15px; padding: 12px 20px; } .wpforo-ai-credit-packs-section { padding: 20px; } .wpforo-ai-credit-packs-table { grid-template-columns: 1fr; gap: 15px; } .credit-pack { padding: 15px; } } /* ========================================================================== Board Sub-Tabs (Multi-Board Support) ========================================================================== */ .wpforo-ai-board-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 25px; padding: 15px; background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 6px; } .wpforo-ai-board-current { font-size: 14px; color: #50575e; } .wpforo-ai-board-current strong { color: #1d2327; } .wpforo-ai-board-tabs-list { display: flex; flex-wrap: wrap; gap: 8px; } .wpforo-ai-board-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; color: #555; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .wpforo-ai-board-tab:hover { background: #f0f0f1; color: #2271b1; border-color: #2271b1; } .wpforo-ai-board-tab.active { background: #2271b1; border-color: #2271b1; color: #fff; font-weight: 600; box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2); } .wpforo-ai-board-tab .dashicons { width: 18px; height: 18px; font-size: 18px; } .wpforo-ai-board-tab.active .dashicons { color: #fff; } /* Responsive */ @media screen and (max-width: 782px) { .wpforo-ai-board-tabs { flex-direction: column; align-items: flex-start; gap: 10px; } .wpforo-ai-board-tabs-list { width: 100%; flex-direction: column; gap: 5px; } .wpforo-ai-board-tab { width: 100%; justify-content: center; } } /* ========================================================================== Custom Indexing ========================================================================== */ .wpforo-ai-filtered-index { min-width: 360px; } .wpforo-ai-filtered-index .form-row { margin-bottom: 15px; } .wpforo-ai-filtered-index label { display: block; font-weight: 600; margin-bottom: 5px; color: #1d2327; } .wpforo-ai-date-range { margin-bottom: 20px; } .wpforo-ai-date-inputs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wpforo-ai-date-inputs input[type="date"] { width: 160px; padding: 6px 8px; } .wpforo-ai-date-separator { color: #50575e; font-style: italic; } .wpforo-ai-filter-divider { border: 0; border-top: 1px dashed #ccd0d4; margin: 20px 0; } .wpforo-ai-filtered-index textarea { min-height: 80px; font-family: monospace; font-size: 13px; resize: vertical; } .wpforo-ai-filtered-index .description { margin-top: 5px; color: #646970; font-size: 12px; font-style: italic; } /* Responsive adjustments */ @media screen and (max-width: 600px) { .wpforo-ai-date-inputs { flex-direction: column; align-items: flex-start; } .wpforo-ai-date-inputs input[type="date"] { width: 100%; max-width: 200px; } .wpforo-ai-date-separator { display: none; } .wpforo-ai-filtered-index { min-width: unset; } } /* ========================================================================== Forum Index Date Range ========================================================================== */ .wpforo-ai-forum-date-range { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #dcdcde; } .wpforo-ai-forum-date-range label { display: block; font-weight: 600; margin-bottom: 5px; color: #1d2327; font-size: 13px; } /* ========================================================================== Tag Suggest Autocomplete ========================================================================== */ .wpforo-ai-tags-input { min-width: 300px; } /* Tag suggest dropdown styling */ .wpforo-ai-tag-results { padding: 0; margin: 0; list-style: none; position: absolute; z-index: 999999; background-color: #fff; border-radius: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); max-height: 300px; overflow-y: auto; min-width: 300px; } .wpforo-ai-tag-results li { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.5; white-space: nowrap; text-align: left; cursor: pointer; color: #1d2327; background-color: #fff; border-bottom: 1px solid #f0f0f1; } .wpforo-ai-tag-results li:last-child { border-bottom: none; } .wpforo-ai-tag-results li:hover, .wpforo-ai-tag-results .wpforo-ai-tag-over { background-color: #2271b1; color: #fff; } .wpforo-ai-tag-match { font-weight: 700; } /* ========================================================================== AI Tasks Tab ========================================================================== */ /* Task Description Panel */ .wpforo-ai-tasks-description { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px; background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 6px; margin-bottom: 20px; } .wpforo-ai-tasks-description .description-content { flex: 1; } .wpforo-ai-tasks-description .description-content h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color: #1d2327; } .wpforo-ai-tasks-description .description-content p { margin: 0 0 15px 0; color: #666; font-size: 14px; line-height: 1.6; } .wpforo-ai-tasks-description .features-list { display: flex; flex-wrap: wrap; gap: 15px; margin: 0; padding: 0; list-style: none; } .wpforo-ai-tasks-description .features-list li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; } .wpforo-ai-tasks-description .features-list .dashicons { color: #2271b1; width: 16px; height: 16px; font-size: 16px; } .wpforo-ai-tasks-description .description-action { flex-shrink: 0; } /* Create Task Button */ .wpforo-ai-create-task-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px !important; font-size: 14px !important; font-weight: 600 !important; background: #2271b1 !important; border-color: #2271b1 !important; color: #fff !important; border-radius: 4px !important; transition: all 0.2s ease !important; height: auto !important; line-height: 1.4 !important; } .wpforo-ai-create-task-btn:hover { background: #135e96 !important; border-color: #135e96 !important; } .wpforo-ai-create-task-btn .dashicons { width: 20px; height: 20px; font-size: 20px; } /* Task Creation Form Container */ .wpforo-ai-task-form-container { display: none; margin-bottom: 25px; } .wpforo-ai-task-form-container.visible { display: block !important; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Task Form Box */ .wpforo-ai-task-form-box { background: #fff; border-bottom: 2px solid #2271b1; border-radius: 0; box-shadow: 0 4px 12px rgba(34, 113, 177, 0.15); } .wpforo-ai-task-form-box .wpforo-ai-box-header { background: linear-gradient(135deg, #54a8ec 0%, #0964a8 100%); color: #fff; border-bottom: none; } .wpforo-ai-task-form-box .wpforo-ai-box-header h2 { color: #fff; display: flex; align-items: center; gap: 10px; } .wpforo-ai-task-form-box .wpforo-ai-box-header .dashicons { width: 24px; height: 24px; font-size: 22px; } /* Task Form Sections */ .wpforo-ai-task-form-section { padding: 20px; border-bottom: 1px solid #e1e4e8; } .wpforo-ai-task-form-section:last-child { border-bottom: none; } .wpforo-ai-task-form-section h3 { margin: 0 0 15px 0; font-size: 16px; font-weight: 600; color: #1d2327; padding-bottom: 10px; border-bottom: 1px dashed #e1e4e8; } /* Form Rows */ .wpforo-ai-form-row { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .wpforo-ai-form-row:last-child { margin-bottom: 0; } .wpforo-ai-form-row label .required { color: #d63638; margin-left: 2px; } .wpforo-ai-form-control { flex: 1; } .wpforo-ai-form-control input[type="text"], .wpforo-ai-form-control input[type="number"], .wpforo-ai-form-control input[type="time"], .wpforo-ai-form-control textarea, .wpforo-ai-form-control select { width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid #ccd0d4; border-radius: 4px; background: #fff; } .wpforo-ai-form-control input:focus, .wpforo-ai-form-control textarea:focus, .wpforo-ai-form-control select:focus { border-color: #2271b1; outline: none; box-shadow: 0 0 0 1px #2271b1; } .wpforo-ai-form-control .description { display: block; margin-top: 6px; font-size: 12px; color: #666; font-style: italic; } /* Inline Form Controls */ .wpforo-ai-inline-controls { display: flex; flex-wrap: wrap; gap: 15px; } .wpforo-ai-inline-controls .inline-control { display: flex; align-items: center; gap: 8px; } .wpforo-ai-inline-controls input[type="number"] { width: 80px !important; } .wpforo-ai-inline-controls select { width: auto !important; } /* Checkbox Row */ .wpforo-ai-checkbox-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .wpforo-ai-checkbox-row label { flex: none; font-weight: normal; padding-top: 0; cursor: pointer; } .wpforo-ai-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; } /* Dynamic Config Section */ .wpforo-ai-dynamic-config { display: none; padding: 20px; background: #f9f9f9; border: 1px dashed #ccd0d4; border-radius: 4px; margin: 15px 0; } .wpforo-ai-dynamic-config.visible { display: block; } .wpforo-ai-dynamic-config h4 { margin: 0 0 15px 0; font-size: 15px; font-weight: 600; color: #1d2327; display: flex; align-items: center; gap: 8px; } .wpforo-ai-dynamic-config h4 .dashicons { color: #2271b1; } /* Config Subsections */ .wpforo-ai-config-subsection { padding: 15px; margin-bottom: 15px; background: #fff; border: 1px solid #e1e4e8; border-radius: 4px; } .wpforo-ai-config-subsection:last-child { margin-bottom: 0; } .wpforo-ai-config-subsection h5 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f1; } /* Forum Multi-Select */ .wpforo-ai-forum-multiselect { max-height: 200px; overflow-y: auto; border: 1px solid #ccd0d4; border-radius: 4px; background: #fff; padding: 10px; } .wpforo-ai-forum-multiselect label { display: block; padding: 6px 10px; margin: 0; cursor: pointer; border-radius: 3px; font-weight: normal; flex: none; } .wpforo-ai-forum-multiselect label:hover { background: #f0f6fc; } .wpforo-ai-forum-multiselect label input { margin-right: 8px; } /* Day Checkboxes */ .wpforo-ai-day-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; } .wpforo-ai-day-checkboxes label { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #f0f0f1; border: 1px solid #ccd0d4; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: normal; flex: none; transition: all 0.2s ease; } .wpforo-ai-day-checkboxes label:hover { background: #e7f0f8; border-color: #2271b1; } .wpforo-ai-day-checkboxes label.selected { background: #2271b1; border-color: #2271b1; color: #fff; } .wpforo-ai-day-checkboxes input { display: none; } /* Time Range */ .wpforo-ai-time-range { display: flex; align-items: center; gap: 10px; } .wpforo-ai-time-range input[type="time"] { width: 130px !important; } .wpforo-ai-time-separator { color: #666; font-style: italic; } /* Quality Tier Cards */ .wpforo-ai-quality-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .wpforo-ai-quality-tier { position: relative; padding: 15px; background: #fff; border: 2px solid #e1e4e8; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .wpforo-ai-quality-tier:hover { border-color: #2271b1; box-shadow: 0 2px 8px rgba(34, 113, 177, 0.15); } .wpforo-ai-quality-tier.selected { border-color: #2271b1; background: #f0f6fc; } .wpforo-ai-quality-tier input { position: absolute; opacity: 0; } .wpforo-ai-quality-tier .tier-name { font-weight: 600; font-size: 14px; color: #1d2327; margin-bottom: 4px; } .wpforo-ai-quality-tier .tier-credits { font-size: 12px; color: #666; } .wpforo-ai-quality-tier .tier-credits strong { color: #2271b1; } /* Form Actions */ .wpforo-ai-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px; background: #f9f9f9; border-top: 1px solid #e1e4e8; } .wpforo-ai-form-actions .button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px !important; font-size: 14px !important; height: auto !important; line-height: 1.4 !important; } .wpforo-ai-form-actions .button .dashicons { width: 18px; height: 18px; font-size: 18px; } /* ========================================================================== Task List Table ========================================================================== */ .wpforo-ai-tasks-list-container { margin-top: 25px; } /* Table Actions Bar */ .wpforo-ai-table-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; padding: 12px 15px; background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 4px; } .wpforo-ai-table-filters { display: flex; align-items: center; gap: 10px; } .wpforo-ai-table-filters select { padding: 6px 12px; border: 1px solid #ccd0d4; border-radius: 4px; font-size: 13px; } .wpforo-ai-table-search { display: flex; align-items: center; gap: 8px; } .wpforo-ai-table-search input { padding: 6px 12px; border: 1px solid #ccd0d4; border-radius: 4px; font-size: 13px; width: 200px; } /* Bulk Actions */ .wpforo-ai-bulk-select { display: flex; align-items: center; gap: 10px; } .wpforo-ai-bulk-select select { padding: 6px 12px; border: 1px solid #ccd0d4; border-radius: 4px; font-size: 13px; } /* Tasks Table */ .wpforo-ai-tasks-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e4e8; border-radius: 4px; margin-top: 20px; } .wpforo-ai-tasks-table thead th { padding: 12px 15px; background: #f8f9fa; border-bottom: 2px solid #e1e4e8; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; color: #555; text-align: left; } .wpforo-ai-tasks-table thead th.col-checkbox { width: 40px; text-align: center; } .wpforo-ai-tasks-table thead th.col-status { width: 100px; } .wpforo-ai-tasks-table thead th.col-actions { width: 180px; text-align: right; } .wpforo-ai-tasks-table tbody td { padding: 7px 10px !important; border-bottom: 1px solid #f0f0f1; font-size: 14px; } .wpforo-ai-tasks-table thead th { background-color: #f9f9f9; } .wpforo-ai-tasks-table thead th:first-child{ padding: 10px 10px 10px 2px; } .wpforo-ai-tasks-table thead th.column-name{ padding-left: 10px; } .wpforo-ai-tasks-table tbody tr:hover { background: #f8f9fa; } .wpforo-ai-tasks-table tbody tr:last-child td { border-bottom: none; } /* Task Name Cell */ .wpforo-ai-task-name { font-weight: 600; color: #1d2327; } .wpforo-ai-task-type { display: block; font-size: 12px; font-weight: normal; color: #666; margin-top: 3px; } /* Next Run / Last Run Column */ .wpforo-ai-next-run { font-size: 13px; font-weight: 500; color: #1d2327; } .wpforo-ai-last-run { font-size: 11px; color: #666; } .column-run-times.last-run-success .wpforo-ai-last-run { color: #00a32a; } .column-run-times.last-run-failure .wpforo-ai-last-run { color: #d63638; } .column-run-times.next-run-overdue .wpforo-ai-next-run { color: #dba617; font-weight: 600; } /* Task Type Badge */ .wpforo-ai-task-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f0f0f1; border-radius: 4px; font-size: 12px; font-weight: 500; color: #50575e; } .wpforo-ai-task-type-badge svg { flex-shrink: 0; opacity: 0.8; } /* Task Stats in Table */ .wpforo-ai-task-stat { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 12px; color: #50575e; } .wpforo-ai-task-stat:last-child { margin-right: 0; } .wpforo-ai-task-stat svg { flex-shrink: 0; opacity: 0.7; } /* Task Status Badges */ .wpforo-ai-task-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; } .wpforo-ai-task-status.status-active { background: #d4edda; color: #155724; } .wpforo-ai-task-status.status-paused { background: #fff3cd; color: #856404; } .wpforo-ai-task-status.status-draft { background: #e1e4e8; color: #555; } .wpforo-ai-task-status.status-error { background: #f8d7da; color: #721c24; } .wpforo-ai-task-status.status-running { background: #cce5ff; color: #004085; } .wpforo-ai-task-status.status-success { background: #d4edda; color: #155724; } .wpforo-ai-task-status .dashicons { width: 14px; height: 14px; font-size: 14px; } /* Spinning animation for task running indicator */ .wpforo-ai-spin { animation: wpforo-ai-spin 1s linear infinite; display: inline-block; } @keyframes wpforo-ai-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } /* Row highlight when task is running */ .wpforo-ai-task-running { background-color: #f0f7ff !important; } .wpforo-ai-task-running td { opacity: 0.8; } .wpforo-ai-task-running .wpforo-ai-task-status { opacity: 1 !important; } /* Task Statistics */ .wpforo-ai-task-stats { font-size: 13px; color: #666; } .wpforo-ai-task-stats .stat-item { display: block; margin-bottom: 3px; } .wpforo-ai-task-stats .stat-item:last-child { margin-bottom: 0; } .wpforo-ai-task-stats strong { color: #1d2327; } /* Task Actions */ .wpforo-ai-task-actions { display: flex; justify-content: flex-end; gap: 6px; } .wpforo-ai-task-actions .button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px !important; min-height: 28px; min-width: 28px; } .wpforo-ai-task-actions .button .dashicons { width: 16px; height: 16px; font-size: 16px; margin: 0; } .wpforo-ai-task-actions .button.button-run { color: #28a745; border-color: #28a745; } .wpforo-ai-task-actions .button.button-run:hover { background: #28a745; color: #fff; } .wpforo-ai-task-actions .button.button-pause { color: #ffc107; border-color: #ffc107; } .wpforo-ai-task-actions .button.button-pause:hover { background: #ffc107; color: #000; } .wpforo-ai-task-actions .button.button-delete { color: #dc3545; border-color: #dc3545; } .wpforo-ai-task-actions .button.button-delete:hover { background: #dc3545; color: #fff; } /* Task Actions Dropdown */ .wpforo-ai-task-actions-dropdown { position: relative; display: inline-block; } .wpforo-ai-task-actions-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 4px; min-height: 28px; min-width: 28px; background: transparent; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; color: #646970; } .wpforo-ai-task-actions-toggle:hover { background: rgba(0, 0, 0, 0.05); color: #2271b1; } .wpforo-ai-task-actions-toggle:focus { outline: none; box-shadow: none; } .wpforo-ai-task-actions-toggle svg { display: block; color: #2271b1; } .wpforo-ai-task-actions-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 1000; min-width: 180px; margin-top: 4px; padding: 6px 0; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .wpforo-ai-task-actions-dropdown.open .wpforo-ai-task-actions-menu { display: block; } .wpforo-ai-task-actions-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: #1d2327; text-decoration: none; font-size: 13px; line-height: 1.4; transition: background 0.15s ease; } .wpforo-ai-task-actions-menu a:hover { background: #f0f6fc; color: #2271b1; } .wpforo-ai-task-actions-menu a .dashicons { width: 16px; height: 16px; font-size: 16px; color: #646970; } .wpforo-ai-task-actions-menu a:hover .dashicons { color: #2271b1; } /* Menu action colors */ .wpforo-ai-task-actions-menu a.wpforo-ai-task-run .dashicons { color: #28a745; } .wpforo-ai-task-actions-menu a.wpforo-ai-task-delete { color: #dc3545; } .wpforo-ai-task-actions-menu a.wpforo-ai-task-delete .dashicons { color: #dc3545; } .wpforo-ai-task-actions-menu a.wpforo-ai-task-delete:hover { background: #fef1f1; color: #dc3545; } /* Divider in menu */ .wpforo-ai-task-actions-menu hr { margin: 6px 0; border: none; border-top: 1px solid #e0e0e0; } /* Table Pagination */ .wpforo-ai-table-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding: 12px 15px; background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 4px; } .wpforo-ai-pagination-info { font-size: 13px; color: #666; } .wpforo-ai-pagination-links { display: flex; gap: 5px; } .wpforo-ai-pagination-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; transition: all 0.2s ease; } .wpforo-ai-pagination-links .page-numbers:hover { background: #f0f0f1; border-color: #2271b1; color: #2271b1; } .wpforo-ai-pagination-links .page-numbers.current { background: #2271b1; border-color: #2271b1; color: #fff; font-weight: 600; } /* Empty State */ .wpforo-ai-tasks-empty { text-align: center; padding: 60px 20px; background: #f9f9f9; border: 2px dashed #e1e4e8; border-radius: 6px; } .wpforo-ai-tasks-empty .dashicons { width: 48px; height: 48px; font-size: 48px; color: #ccc; margin-bottom: 15px; } .wpforo-ai-tasks-empty h3 { margin: 0 0 10px 0; font-size: 18px; color: #666; } .wpforo-ai-tasks-empty p { margin: 0; color: #999; font-size: 14px; } /* ========================================================================== AI Tasks - Form Section Styles (Deep Selectors for WP Compatibility) ========================================================================== */ /* Form Section Container */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section, .wpforo-ai-tasks-tab .wpforo-ai-task-form .wpforo-ai-form-section { margin-bottom: 25px; padding: 20px; background: #fff; border: 1px solid #e1e4e8; border-radius: 6px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section:last-child, .wpforo-ai-tasks-tab .wpforo-ai-task-form .wpforo-ai-form-section:last-child { margin-bottom: 0; } /* Form Section Title */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section-title, .wpforo-ai-tasks-tab .wpforo-ai-form-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 0 0 12px 0; font-size: 16px; font-weight: 600; color: #1d2327; border-bottom: 1px solid #e1e4e8; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section-title .dashicons, .wpforo-ai-tasks-tab .wpforo-ai-form-section-title .dashicons { width: 20px; height: 20px; font-size: 20px; color: #2271b1; } /* Form Row */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-row, .wpforo-ai-tasks-tab .wpforo-ai-form-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-row:last-child, .wpforo-ai-tasks-tab .wpforo-ai-form-row:last-child { margin-bottom: 0; } /* Form Field */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field, .wpforo-ai-tasks-tab .wpforo-ai-form-field { flex: 1 1 100%; min-width: 0; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-half, .wpforo-ai-tasks-tab .wpforo-ai-form-field-half { flex: 1 1 calc(50% - 10px); min-width: 200px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-third, .wpforo-ai-tasks-tab .wpforo-ai-form-field-third { flex: 1 1 calc(33.333% - 14px); min-width: 180px; } /* Two-Column Layout */ .wpforo-ai-wrap .wpforo-ai-two-column-layout, .wpforo-ai-tasks-tab .wpforo-ai-two-column-layout { display: flex; gap: 30px; align-items: flex-start; } .wpforo-ai-wrap .wpforo-ai-column, .wpforo-ai-tasks-tab .wpforo-ai-column { flex: 1; min-width: 0; } .wpforo-ai-wrap .wpforo-ai-column-left, .wpforo-ai-tasks-tab .wpforo-ai-column-left { flex: 0 0 40%; max-width: 40%; } .wpforo-ai-wrap .wpforo-ai-column-right, .wpforo-ai-tasks-tab .wpforo-ai-column-right { flex: 0 0 50%; max-width: 50%; } .wpforo-ai-wrap .wpforo-ai-column .wpforo-ai-form-field, .wpforo-ai-tasks-tab .wpforo-ai-column .wpforo-ai-form-field { margin-bottom: 16px; } .wpforo-ai-wrap .wpforo-ai-column .wpforo-ai-form-field:last-child, .wpforo-ai-tasks-tab .wpforo-ai-column .wpforo-ai-form-field:last-child { margin-bottom: 0; } /* Make forum checklist taller in two-column layout */ .wpforo-ai-wrap .wpforo-ai-column-left .wpforo-ai-forum-checklist, .wpforo-ai-tasks-tab .wpforo-ai-column-left .wpforo-ai-forum-checklist { max-height: 400px; min-height: 300px; } /* User Search Autocomplete */ .wpforo-ai-user-search-wrapper { position: relative; } .wpforo-ai-user-search-wrapper .wpforo-ai-user-search { width: 100%; padding: 8px 12px; border: 1px solid #8c8f94; border-radius: 4px; font-size: 14px; } .wpforo-ai-user-search-wrapper .wpforo-ai-user-search:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; } .wpforo-ai-user-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: #fff; border: 1px solid #c3c4c7; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: auto; display: none; } .wpforo-ai-user-search-list { margin: 0; padding: 0; list-style: none; } .wpforo-ai-user-search-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f1; font-size: 13px; } .wpforo-ai-user-search-item:last-child { border-bottom: none; } .wpforo-ai-user-search-item:hover { background: #f0f7fc; } .wpforo-ai-user-search-loading, .wpforo-ai-user-search-empty, .wpforo-ai-user-search-error { padding: 12px; text-align: center; color: #646970; font-size: 13px; } .wpforo-ai-user-search-error { color: #d63638; } /* Author OR Separator */ .wpforo-ai-author-or-separator { text-align: center; margin: 8px 0; position: relative; } .wpforo-ai-author-or-separator span { display: inline-block; padding: 0 12px; background: #fff; color: #8c8f94; font-size: 12px; font-weight: 600; position: relative; z-index: 1; } .wpforo-ai-author-or-separator::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #dcdcde; } /* Form Field Labels */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field > label, .wpforo-ai-tasks-tab .wpforo-ai-form-field > label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #1d2327; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field label .required, .wpforo-ai-tasks-tab .wpforo-ai-form-field label .required { color: #d63638; margin-left: 2px; } /* Form Field Inputs */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input[type="text"], .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input[type="number"], .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input[type="time"], .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field textarea, .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field select, .wpforo-ai-tasks-tab .wpforo-ai-form-field input[type="text"], .wpforo-ai-tasks-tab .wpforo-ai-form-field input[type="number"], .wpforo-ai-tasks-tab .wpforo-ai-form-field input[type="time"], .wpforo-ai-tasks-tab .wpforo-ai-form-field textarea, .wpforo-ai-tasks-tab .wpforo-ai-form-field select { display: block; width: 100%; max-width: 100%; padding: 8px 12px; font-size: 14px; line-height: 1.5; color: #1d2327; background: #fff; border: 1px solid #8c8f94; border-radius: 4px; box-sizing: border-box; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input:focus, .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field textarea:focus, .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field select:focus, .wpforo-ai-tasks-tab .wpforo-ai-form-field input:focus, .wpforo-ai-tasks-tab .wpforo-ai-form-field textarea:focus, .wpforo-ai-tasks-tab .wpforo-ai-form-field select:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field .description, .wpforo-ai-tasks-tab .wpforo-ai-form-field .description { display: block; margin-top: 6px; font-size: 12px; font-style: italic; color: #646970; } /* Radio Group */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-group, .wpforo-ai-tasks-tab .wpforo-ai-radio-group { display: flex; flex-wrap: wrap; gap: 12px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-group-vertical, .wpforo-ai-tasks-tab .wpforo-ai-radio-group-vertical { flex-direction: column; gap: 8px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-item, .wpforo-ai-tasks-tab .wpforo-ai-radio-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f9f9f9; border: 1px solid #e1e4e8; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; font-weight: normal !important; margin: 0 !important; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-item:hover, .wpforo-ai-tasks-tab .wpforo-ai-radio-item:hover { background: #f0f6fc; border-color: #2271b1; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-item input[type="radio"], .wpforo-ai-tasks-tab .wpforo-ai-radio-item input[type="radio"] { margin: 0; flex-shrink: 0; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-label, .wpforo-ai-tasks-tab .wpforo-ai-radio-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #1d2327; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-label strong, .wpforo-ai-tasks-tab .wpforo-ai-radio-label strong { font-weight: 600; } /* Status Dot */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-status-dot, .wpforo-ai-tasks-tab .wpforo-ai-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-status-dot.status-active, .wpforo-ai-tasks-tab .wpforo-ai-status-dot.status-active { background: #00a32a; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-status-dot.status-paused, .wpforo-ai-tasks-tab .wpforo-ai-status-dot.status-paused { background: #dba617; } /* Checkbox Group */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-group, .wpforo-ai-tasks-tab .wpforo-ai-checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-group-vertical, .wpforo-ai-tasks-tab .wpforo-ai-checkbox-group-vertical { flex-direction: column; gap: 8px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-group-inline, .wpforo-ai-tasks-tab .wpforo-ai-checkbox-group-inline { display: flex; flex-wrap: wrap; gap: 8px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-item, .wpforo-ai-tasks-tab .wpforo-ai-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f9f9f9; border: 1px solid #e1e4e8; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; font-weight: normal !important; margin: 0 !important; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-item:hover, .wpforo-ai-tasks-tab .wpforo-ai-checkbox-item:hover { background: #f0f6fc; border-color: #2271b1; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-item input[type="checkbox"], .wpforo-ai-tasks-tab .wpforo-ai-checkbox-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; } /* Forum Child Indent */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-forum-child, .wpforo-ai-tasks-tab .wpforo-ai-forum-child { margin-left: 7px; font-size: 13px; } /* Quality Options */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-options, .wpforo-ai-tasks-tab .wpforo-ai-quality-options { gap: 10px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-options .wpforo-ai-radio-item, .wpforo-ai-tasks-tab .wpforo-ai-quality-options .wpforo-ai-radio-item { padding: 12px 16px; border: 2px solid #e1e4e8; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-options .wpforo-ai-radio-item:has(input:checked), .wpforo-ai-tasks-tab .wpforo-ai-quality-options .wpforo-ai-radio-item:has(input:checked) { background: #f0f6fc; border-color: #2271b1; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-info, .wpforo-ai-tasks-tab .wpforo-ai-quality-info { font-size: 12px; color: #646970; font-weight: normal; } /* Range Slider */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider, .wpforo-ai-tasks-tab .wpforo-ai-range-slider { -webkit-appearance: none; appearance: none; width: 100%; max-width: 300px; height: 0px; background: #e1e4e8; border-radius: 0; outline: none; cursor: pointer; padding: 0; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider::-webkit-slider-thumb, .wpforo-ai-tasks-tab .wpforo-ai-range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #2271b1; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider::-webkit-slider-thumb:hover, .wpforo-ai-tasks-tab .wpforo-ai-range-slider::-webkit-slider-thumb:hover { background: #135e96; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider::-moz-range-thumb, .wpforo-ai-tasks-tab .wpforo-ai-range-slider::-moz-range-thumb { width: 20px; height: 20px; background: #2271b1; border: none; border-radius: 50%; cursor: pointer; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-value, .wpforo-ai-tasks-tab .wpforo-ai-range-value { display: inline-block; margin-left: 12px; padding: 4px 10px; background: #2271b1; color: #fff; font-size: 12px; font-weight: 600; border-radius: 12px; min-width: 40px; text-align: center; } /* Input Suffix */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-input-suffix, .wpforo-ai-tasks-tab .wpforo-ai-input-suffix { display: inline-block; margin-left: 8px; font-size: 13px; color: #646970; } /* Collapsible Section */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section-collapsible, .wpforo-ai-tasks-tab .wpforo-ai-form-section-collapsible { background: #f9f9f9; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-toggle, .wpforo-ai-tasks-tab .wpforo-ai-collapsible-toggle { cursor: pointer; user-select: none; margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-toggle:hover, .wpforo-ai-tasks-tab .wpforo-ai-collapsible-toggle:hover { color: #2271b1; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-toggle-icon, .wpforo-ai-tasks-tab .wpforo-ai-toggle-icon { margin-left: auto; transition: transform 0.3s ease; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-toggle[aria-expanded="true"] .wpforo-ai-toggle-icon, .wpforo-ai-tasks-tab .wpforo-ai-collapsible-toggle[aria-expanded="true"] .wpforo-ai-toggle-icon { transform: rotate(180deg); } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-content, .wpforo-ai-tasks-tab .wpforo-ai-collapsible-content { padding-top: 20px; margin-top: 15px; border-top: 1px solid #e1e4e8; } /* Estimated Credits Notice */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-estimated-credits-notice, .wpforo-ai-tasks-tab .wpforo-ai-estimated-credits-notice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-top: 15px; background: #e7f5ff; border: 1px solid #c3ddf5; border-radius: 4px; font-size: 14px; color: #135e96; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-estimated-credits-notice .dashicons, .wpforo-ai-tasks-tab .wpforo-ai-estimated-credits-notice .dashicons { color: #2271b1; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-estimated-credits-value, .wpforo-ai-tasks-tab .wpforo-ai-estimated-credits-value { color: #2271b1; } /* Credit Saving Notice */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-credit-saving-notice, .wpforo-ai-tasks-tab .wpforo-ai-credit-saving-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-top: 10px; background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 4px; font-size: 13px; color: #2e7d32; line-height: 1.4; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-credit-saving-notice .dashicons, .wpforo-ai-tasks-tab .wpforo-ai-credit-saving-notice .dashicons { color: #43a047; flex-shrink: 0; margin-top: 2px; } .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-credit-saving-text strong, .wpforo-ai-tasks-tab .wpforo-ai-credit-saving-text strong { color: #1b5e20; } /* Duplicate Settings Toggle */ .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-duplicate-settings, .wpforo-ai-tasks-tab .wpforo-ai-duplicate-settings { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #e1e4e8; } /* ========================================================================== AI Tasks - Responsive ========================================================================== */ @media screen and (max-width: 1200px) { .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-half, .wpforo-ai-tasks-tab .wpforo-ai-form-field-half, .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-third, .wpforo-ai-tasks-tab .wpforo-ai-form-field-third { flex: 1 1 100%; } .wpforo-ai-quality-tiers { grid-template-columns: repeat(2, 1fr); } /* Stack two-column layout on smaller screens */ .wpforo-ai-wrap .wpforo-ai-two-column-layout, .wpforo-ai-tasks-tab .wpforo-ai-two-column-layout { flex-direction: column; gap: 20px; } .wpforo-ai-wrap .wpforo-ai-column-left, .wpforo-ai-tasks-tab .wpforo-ai-column-left, .wpforo-ai-wrap .wpforo-ai-column-right, .wpforo-ai-tasks-tab .wpforo-ai-column-right { flex: 1 1 100%; max-width: 100%; } .wpforo-ai-wrap .wpforo-ai-column-left .wpforo-ai-forum-checklist, .wpforo-ai-tasks-tab .wpforo-ai-column-left .wpforo-ai-forum-checklist { max-height: 250px; min-height: 150px; } } @media screen and (max-width: 782px) { .wpforo-ai-tasks-description { flex-direction: column; } .wpforo-ai-tasks-description .description-action { width: 100%; } .wpforo-ai-create-task-btn { width: 100%; justify-content: center; } .wpforo-ai-table-actions { flex-direction: column; align-items: flex-start; } .wpforo-ai-table-filters, .wpforo-ai-table-search { width: 100%; } .wpforo-ai-table-search input { flex: 1; width: auto; } .wpforo-ai-tasks-table { display: block; overflow-x: auto; } .wpforo-ai-quality-tiers { grid-template-columns: 1fr; } .wpforo-ai-form-actions { flex-direction: column; } .wpforo-ai-form-actions .button { width: 100%; justify-content: center; } .wpforo-ai-table-pagination { flex-direction: column; gap: 10px; } } /* ========================================================================== AI Tasks - Stats Modal ========================================================================== */ .wpforo-ai-stats-modal-overlay, .wpforo-ai-logs-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 100000; } .wpforo-ai-stats-modal, .wpforo-ai-logs-modal { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); max-width: 600px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; } .wpforo-ai-logs-modal { max-width: 900px; } .wpforo-ai-stats-modal-header, .wpforo-ai-logs-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e1e4e8; background: #f8f9fa; border-radius: 8px 8px 0 0; } .wpforo-ai-stats-modal-header h3, .wpforo-ai-logs-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; } .wpforo-ai-stats-modal-header h3 .dashicons, .wpforo-ai-logs-modal-header h3 .dashicons { color: #3b82f6; } .wpforo-ai-stats-modal-close, .wpforo-ai-logs-modal-close { background: none; border: none; font-size: 24px; color: #64748b; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; } .wpforo-ai-stats-modal-close:hover, .wpforo-ai-logs-modal-close:hover { color: #ef4444; } .wpforo-ai-stats-modal-body, .wpforo-ai-logs-modal-body { padding: 20px; overflow-y: auto; } /* Stats Grid */ .wpforo-ai-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; } .wpforo-ai-stat-card { background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 16px; text-align: center; } .wpforo-ai-stat-value { font-size: 28px; font-weight: 700; color: #3b82f6; line-height: 1.2; } .wpforo-ai-stat-label { font-size: 13px; color: #64748b; margin-top: 4px; } .wpforo-ai-stats-details { background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 16px; } .wpforo-ai-stats-details p { margin: 0 0 8px 0; font-size: 14px; color: #475569; } .wpforo-ai-stats-details p:last-child { margin-bottom: 0; } .wpforo-ai-stats-details strong { color: #1e293b; } /* Logs Table */ .wpforo-ai-logs-table { width: 100%; border-collapse: collapse; font-size: 13px; } .wpforo-ai-logs-table th, .wpforo-ai-logs-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e1e4e8; } .wpforo-ai-logs-table th { background: #f8f9fa; font-weight: 600; color: #1e293b; white-space: nowrap; } .wpforo-ai-logs-table tr:hover td { background: #f8f9fa; } .wpforo-ai-log-status { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; text-transform: capitalize; } .wpforo-ai-log-status.status-success { background: #dcfce7; color: #166534; } .wpforo-ai-log-status.status-error { background: #fee2e2; color: #991b1b; } .wpforo-ai-log-status.status-warning { background: #fef3c7; color: #92400e; } .wpforo-ai-logs-empty { text-align: center; padding: 40px 20px; color: #64748b; } .wpforo-ai-logs-empty .dashicons { font-size: 48px; width: 48px; height: 48px; color: #cbd5e1; margin-bottom: 12px; } .wpforo-ai-logs-empty p { margin: 0; font-size: 14px; } /* Modal Responsive */ @media screen and (max-width: 600px) { .wpforo-ai-stats-grid { grid-template-columns: 1fr; } .wpforo-ai-logs-table { display: block; overflow-x: auto; } } /* ========================================================================== Section Description ========================================================================== */ .wpforo-ai-section-description { margin: 0 0 15px 0; color: #646970; font-size: 13px; line-height: 1.5; } /* ========================================================================== Date Range Picker (AI Tasks Tab) ========================================================================== */ .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-range { display: flex; gap: 15px; align-items: flex-end; } .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field { flex: 1; } .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field label { display: block; font-size: 12px; color: #646970; margin-bottom: 4px; } .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field input[type="date"] { width: 100%; padding: 6px 10px; border: 1px solid #8c8f94; border-radius: 4px; font-size: 13px; } .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field input[type="date"]:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; } /* ========================================================================== Info Box ========================================================================== */ .wpforo-ai-info-box { display: flex; gap: 10px; padding: 12px 15px; background: #f0f6fc; border: 1px solid #c3c4c7; border-left: 4px solid #2271b1; border-radius: 4px; margin-top: 15px; } .wpforo-ai-info-box .dashicons { color: #2271b1; flex-shrink: 0; margin-top: 2px; } .wpforo-ai-info-box strong { display: block; margin-bottom: 6px; font-size: 13px; } .wpforo-ai-info-box ul { margin: 0; padding: 0 0 0 16px; font-size: 12px; color: #50575e; } .wpforo-ai-info-box ul li { margin-bottom: 3px; } .wpforo-ai-info-box ul li:last-child { margin-bottom: 0; } /* Responsive date range */ @media screen and (max-width: 600px) { .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-range { flex-direction: column; gap: 10px; } } /* ========================================================================== Textarea with Character Counter ========================================================================== */ .wpforo-ai-textarea-with-counter { position: relative; } .wpforo-ai-textarea-with-counter textarea { padding-bottom: 24px; } .wpforo-ai-char-counter { position: absolute; bottom: 6px; right: 10px; font-size: 11px; color: #666; background: rgba(255, 255, 255, 0.9); padding: 2px 6px; border-radius: 3px; pointer-events: none; } .wpforo-ai-char-counter .current { font-weight: 600; } .wpforo-ai-char-counter.warning { color: #dba617; } .wpforo-ai-char-counter.limit { color: #d63638; } /* ========================================================================== Auto-Indexing Toggle Switch ========================================================================== */ .wpforo-ai-header-actions { display: flex; align-items: center; gap: 15px; } .wpforo-ai-auto-index-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; } .wpforo-ai-auto-index-label { font-size: 13px; font-weight: 500; color: #50575e; } /* iOS-style toggle switch */ .wpforo-ai-switch { position: relative; display: inline-block; width: 40px; height: 22px; } .wpforo-ai-switch input { opacity: 0; width: 0; height: 0; } .wpforo-ai-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #c3c4c7; transition: 0.3s; border-radius: 22px; } .wpforo-ai-switch-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .wpforo-ai-switch input:checked + .wpforo-ai-switch-slider { background-color: #2271b1; } .wpforo-ai-switch input:focus + .wpforo-ai-switch-slider { box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25); } .wpforo-ai-switch input:checked + .wpforo-ai-switch-slider:before { transform: translateX(18px); } .wpforo-ai-switch input:disabled + .wpforo-ai-switch-slider { opacity: 0.6; cursor: not-allowed; } .wpforo-ai-auto-index-toggle:hover .wpforo-ai-switch-slider { background-color: #a3a5a8; } .wpforo-ai-auto-index-toggle:hover .wpforo-ai-switch input:checked + .wpforo-ai-switch-slider { background-color: #135e96; } /* ========================================================================== Analytics Tab Styles ========================================================================== */ /* Analytics Sub-tabs */ .wpforo-ai-analytics-subtabs-box { margin-bottom: 20px; } .wpforo-ai-analytics-subtabs-box .wpforo-ai-box-body { padding: 0; } .wpforo-ai-analytics-subtabs { display: flex; gap: 0; border-bottom: none; } .wpforo-ai-analytics-subtab { padding: 12px 20px; text-decoration: none; color: #50575e; font-weight: 500; border-bottom: 3px solid transparent; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; } .wpforo-ai-analytics-subtab:hover { color: #2271b1; background: #f0f6fc; } .wpforo-ai-analytics-subtab.active { color: #2271b1; border-bottom-color: #2271b1; background: #f0f6fc; } .wpforo-ai-analytics-subtab.disabled { color: #a7aaad; cursor: not-allowed; } .wpforo-ai-analytics-subtab.disabled:hover { background: transparent; color: #a7aaad; } .wpforo-ai-coming-soon { font-size: 10px; background: #dba617; color: #fff; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-weight: 600; } /* Time Range Selector */ .wpforo-ai-time-range-box { margin-bottom: 20px; } .wpforo-ai-time-range-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; } .wpforo-ai-time-range-label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1d2327; } .wpforo-ai-time-range-label .dashicons { color: #2271b1; } .wpforo-ai-time-range-buttons { display: flex; gap: 5px; flex-wrap: wrap; } .wpforo-ai-time-range-btn { padding: 8px 16px; background: #f0f0f1; border: 1px solid #c3c4c7; border-radius: 4px; color: #50575e; text-decoration: none; font-size: 13px; cursor: pointer; transition: all 0.2s ease; } .wpforo-ai-time-range-btn:hover { background: #e0e0e0; color: #1d2327; } .wpforo-ai-time-range-btn.active { background: #2271b1; border-color: #2271b1; color: #fff; } .wpforo-ai-custom-range-picker { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 15px; background: #f9f9f9; border-radius: 4px; width: 100%; } .wpforo-ai-custom-range-picker form { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .wpforo-ai-custom-range-picker label { display: flex; align-items: center; gap: 8px; font-weight: 500; } .wpforo-ai-custom-range-picker input[type="date"] { padding: 6px 10px; border: 1px solid #c3c4c7; border-radius: 4px; } .wpforo-ai-time-range-info { margin-left: auto; color: #646970; font-size: 13px; } .wpforo-ai-date-range-display { background: #f0f6fc; padding: 6px 12px; border-radius: 4px; border: 1px solid #c3c4c7; } /* Summary Cards */ .wpforo-ai-analytics-summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; } @media (max-width: 1200px) { .wpforo-ai-analytics-summary-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wpforo-ai-analytics-summary-cards { grid-template-columns: 1fr; } } .wpforo-ai-analytics-card { background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .wpforo-ai-analytics-card-icon { width: 50px; height: 50px; background: #f0f6fc; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .wpforo-ai-analytics-card-icon .dashicons { font-size: 24px; width: 24px; height: 24px; color: #2271b1; } .wpforo-ai-analytics-card-content { flex: 1; } .wpforo-ai-analytics-card-value { font-size: 28px; font-weight: 700; color: #1d2327; line-height: 1.2; } .wpforo-ai-analytics-card-label { font-size: 13px; color: #646970; margin-top: 4px; } /* Charts */ .wpforo-ai-analytics-charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; } .wpforo-ai-chart-box.wpforo-ai-chart-wide { grid-column: span 2; } @media (max-width: 1200px) { .wpforo-ai-analytics-charts-row { grid-template-columns: 1fr; } .wpforo-ai-chart-box.wpforo-ai-chart-wide { grid-column: span 1; } } .wpforo-ai-chart-box .wpforo-ai-box-header { padding: 12px 20px; } .wpforo-ai-chart-box .wpforo-ai-box-header h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .wpforo-ai-chart-box .wpforo-ai-box-header h3 .dashicons { color: #2271b1; } .wpforo-ai-chart-container { position: relative; height: 300px; width: 100%; } .wpforo-ai-chart-pie-container { height: 280px; max-width: 98%; margin: 0 auto; } .wpforo-ai-chart-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; gap: 10px; color: #646970; font-size: 13px; } /* Main Analytics Loading Overlay */ .wpforo-ai-analytics-main-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 80px 20px; margin: 20px 0; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; color: #646970; font-size: 14px; } .wpforo-ai-analytics-main-loading .wpforo-ai-loading-spinner { width: 28px; height: 28px; } .wpforo-ai-analytics-main-loading.hidden { display: none; } /* Hide analytics content sections while loading */ .wpforo-ai-analytics-content { display: none; } .wpforo-ai-analytics-content.loaded { display: block; } /* Loading Spinner */ .wpforo-ai-loading-spinner { width: 20px; height: 20px; border: 2px solid #f0f0f1; border-top-color: #2271b1; border-radius: 50%; animation: wpforo-ai-spin 0.8s linear infinite; display: inline-block; } @keyframes wpforo-ai-spin { to { transform: rotate(360deg); } } /* Usage Table */ .wpforo-ai-usage-table-box { margin-bottom: 20px; } .wpforo-ai-usage-table-box .wpforo-ai-box-header h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .wpforo-ai-usage-table { margin: 0; } .wpforo-ai-usage-table th { background: #f9f9f9; font-weight: 600; padding: 12px 15px; } .wpforo-ai-usage-table td { padding: 12px 15px; vertical-align: middle; } .wpforo-ai-usage-table .wpforo-ai-loading-row td { text-align: center; padding: 30px; color: #646970; } .wpforo-ai-usage-table .wpforo-ai-no-data td { text-align: center; padding: 30px; color: #646970; font-style: italic; } .wpforo-ai-feature-name { display: flex; align-items: center; gap: 10px; } .wpforo-ai-feature-color { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } .wpforo-ai-success-rate { display: flex; align-items: center; gap: 8px; } .wpforo-ai-success-rate-bar { flex: 1; max-width: 100px; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; } .wpforo-ai-success-rate-fill { height: 100%; background: #46b450; border-radius: 4px; transition: width 0.3s ease; } .wpforo-ai-success-rate-fill.warning { background: #dba617; } .wpforo-ai-success-rate-fill.error { background: #dc3232; } /* Empty/Error States */ .wpforo-ai-analytics-empty { text-align: center; padding: 60px 20px; color: #646970; } .wpforo-ai-analytics-empty .dashicons { font-size: 48px; width: 48px; height: 48px; color: #c3c4c7; margin-bottom: 15px; } .wpforo-ai-analytics-empty h3 { margin: 0 0 10px; color: #1d2327; } .wpforo-ai-analytics-error { text-align: center; padding: 40px 20px; color: #dc3232; background: #fcf0f1; border-radius: 4px; } .wpforo-ai-analytics-error .dashicons { font-size: 32px; width: 32px; height: 32px; margin-bottom: 10px; } /* ===== Activity Heatmap ===== */ .wpforo-ai-heatmap-container { padding: 15px; } .wpforo-ai-heatmap { display: flex; flex-direction: column; gap: 2px; } .wpforo-ai-heatmap-header { display: flex; align-items: center; margin-bottom: 4px; padding-left: 40px; } .wpforo-ai-heatmap-hour-label { flex: 3; text-align: left; font-size: 10px; color: #666; } .wpforo-ai-heatmap-row { display: flex; align-items: center; gap: 4px; } .wpforo-ai-heatmap-day-label { width: 36px; font-size: 11px; font-weight: 500; color: #666; text-align: right; flex-shrink: 0; } .wpforo-ai-heatmap-cells { display: flex; flex: 1; gap: 2px; } .wpforo-ai-heatmap-cell { flex: 1; aspect-ratio: 1.5; min-height: 12px; border-radius: 2px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .wpforo-ai-heatmap-cell:hover { transform: scale(1.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 10; position: relative; } .wpforo-ai-heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; } .wpforo-ai-heatmap-legend-label { font-size: 11px; color: #888; } .wpforo-ai-heatmap-legend-scale { display: flex; gap: 2px; } .wpforo-ai-heatmap-legend-cell { width: 14px; height: 14px; border-radius: 2px; } /* ===== No Data State ===== */ .wpforo-ai-no-data { text-align: center; padding: 20px; color: #888; font-style: italic; } /* ===== User Engagement - Top Contributors ===== */ .wpforo-ai-top-contributors { padding: 10px 15px; } .wpforo-ai-contributor-header, .wpforo-ai-contributor-row { display: grid; grid-template-columns: 28px 36px 1fr 90px 50px 50px; align-items: center; gap: 8px; padding: 8px 0; } .wpforo-ai-contributor-header { border-bottom: 2px solid #e0e0e0; font-size: 11px; font-weight: 600; color: #646970; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 4px; } .wpforo-ai-contributor-header > div { text-align: center; } .wpforo-ai-contributor-name-header { text-align: left !important; } .wpforo-ai-contributor-group-header { text-align: left !important; } .wpforo-ai-contributor-row { border-bottom: 1px solid #f0f0f1; } .wpforo-ai-contributor-row:last-child { border-bottom: none; } .wpforo-ai-contributor-row:hover { background: #f9f9f9; margin: 0 -15px; padding-left: 15px; padding-right: 15px; } .wpforo-ai-contributor-rank { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #f0f0f1; border-radius: 50%; font-size: 11px; font-weight: 600; color: #50575e; } .wpforo-ai-contributor-row:nth-child(2) .wpforo-ai-contributor-rank { background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%); color: #fff; } .wpforo-ai-contributor-row:nth-child(3) .wpforo-ai-contributor-rank { background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%); color: #fff; } .wpforo-ai-contributor-row:nth-child(4) .wpforo-ai-contributor-rank { background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%); color: #fff; } .wpforo-ai-contributor-avatar-col { display: flex; align-items: center; justify-content: center; } .wpforo-ai-contributor-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover; } .wpforo-ai-contributor-name { font-weight: 500; color: #1d2327; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wpforo-ai-contributor-name a { color: #2271b1; text-decoration: none; } .wpforo-ai-contributor-name a:hover { color: #135e96; text-decoration: underline; } .wpforo-ai-contributor-group { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wpforo-ai-usergroup-badge { font-size: 12px; font-weight: 500; } .wpforo-ai-contributor-topics, .wpforo-ai-contributor-posts { font-size: 13px; font-weight: 600; color: #1d2327; text-align: center; } /* ===== User Engagement - Recent Registrations Table ===== */ .wpforo-ai-registrations-table { margin: 0; } .wpforo-ai-registrations-table th { background: #f9f9f9; font-weight: 600; padding: 10px 12px; text-align: left; } .wpforo-ai-registrations-table td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid #f0f0f1; } .wpforo-ai-registrations-table tr:last-child td { border-bottom: none; } .wpforo-ai-registrations-table .wpforo-ai-user-cell { display: flex; align-items: center; gap: 10px; } .wpforo-ai-registrations-table .wpforo-ai-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .wpforo-ai-registrations-table .wpforo-ai-user-name a { color: #2271b1; text-decoration: none; font-weight: 500; } .wpforo-ai-registrations-table .wpforo-ai-user-name a:hover { text-decoration: underline; } .wpforo-ai-posts-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; background: #f0f0f1; border-radius: 10px; font-size: 12px; font-weight: 500; color: #50575e; } .wpforo-ai-posts-badge.has-posts { background: #e6f3e6; color: #1e7e34; } /* ========================================================================== Content Performance Sub-tab ========================================================================== */ /* Content Performance Table-like List */ .wpforo-ai-content-perf-list { margin: 0; padding: 0; } .wpforo-ai-content-perf-header, .wpforo-ai-content-perf-row { display: grid; grid-template-columns: 30px 1fr 70px 70px; gap: 12px; align-items: center; padding: 10px 0; } .wpforo-ai-content-perf-header { border-bottom: 2px solid #e1e4e8; font-weight: 600; font-size: 12px; color: #646970; text-transform: uppercase; letter-spacing: 0.3px; } .wpforo-ai-content-perf-row { border-bottom: 1px solid #f0f0f1; } .wpforo-ai-content-perf-row:last-child { border-bottom: none; } .wpforo-ai-content-perf-row:hover { background: #f9f9f9; } /* Column styles */ .wpforo-ai-content-perf-col-rank { font-weight: 600; color: #646970; text-align: center; } .wpforo-ai-content-perf-col-title { min-width: 0; overflow: hidden; } .wpforo-ai-content-perf-col-title a { display: block; color: #2271b1; text-decoration: none; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wpforo-ai-content-perf-col-title a:hover { color: #135e96; text-decoration: underline; } .wpforo-ai-content-perf-col-title small { display: block; font-size: 11px; color: #646970; font-weight: normal; margin-top: 2px; } .wpforo-ai-content-perf-col-views, .wpforo-ai-content-perf-col-replies { text-align: right; font-weight: 600; font-size: 13px; color: #1d2327; } /* Header column styles */ .wpforo-ai-content-perf-header .wpforo-ai-content-perf-col-views, .wpforo-ai-content-perf-header .wpforo-ai-content-perf-col-replies { font-weight: 600; color: #646970; } .wpforo-ai-reply-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #2271b1; color: #fff; border-radius: 4px; text-decoration: none; font-size: 12px; font-weight: 500; transition: background-color 0.2s; } .wpforo-ai-reply-btn:hover { background: #135e96; color: #fff; } .wpforo-ai-reply-btn .dashicons { font-size: 14px; width: 14px; height: 14px; } /* Tag Cloud */ .wpforo-ai-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; } .wpforo-ai-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f0f0f1; border-radius: 16px; text-decoration: none; color: #1d2327; font-size: 13px; transition: all 0.2s; } .wpforo-ai-tag:hover { background: #2271b1; color: #fff; } .wpforo-ai-tag-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(0, 0, 0, 0.1); border-radius: 10px; font-size: 11px; font-weight: 600; } .wpforo-ai-tag:hover .wpforo-ai-tag-count { background: rgba(255, 255, 255, 0.2); } /* Tag size variations based on popularity */ .wpforo-ai-tag.size-1 { font-size: 12px; } .wpforo-ai-tag.size-2 { font-size: 13px; } .wpforo-ai-tag.size-3 { font-size: 14px; font-weight: 500; } .wpforo-ai-tag.size-4 { font-size: 15px; font-weight: 500; } .wpforo-ai-tag.size-5 { font-size: 16px; font-weight: 600; } /* Content Distribution Chart Container */ .wpforo-ai-distribution-chart-container { position: relative; height: 300px; padding: 10px; } /* Empty State for Content */ .wpforo-ai-content-empty { text-align: center; padding: 30px 20px; color: #646970; } .wpforo-ai-content-empty .dashicons { font-size: 48px; width: 48px; height: 48px; color: #dcdcde; margin-bottom: 10px; } .wpforo-ai-content-empty p { margin: 0; font-size: 14px; } /* ========================================================================== AI Insights Sub-tab Styles ========================================================================== */ /* Container */ .wpforo-ai-insights-container { display: flex; flex-direction: column; gap: 20px; } /* Credits Info Banner */ .wpforo-ai-insights-credits-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; } .wpforo-ai-insights-credits-box .wpforo-ai-box-body { padding: 20px 24px; } .wpforo-ai-insights-credits-info { display: flex; align-items: center; gap: 20px; color: #fff; } .wpforo-ai-insights-credits-icon { flex-shrink: 0; } .wpforo-ai-insights-credits-icon .dashicons { font-size: 40px; width: 40px; height: 40px; color: rgba(255, 255, 255, 0.9); } .wpforo-ai-insights-credits-text { flex: 1; } .wpforo-ai-insights-credits-text strong { display: block; font-size: 18px; margin-bottom: 4px; } .wpforo-ai-insights-credits-text p { margin: 0; font-size: 14px; opacity: 0.9; } .wpforo-ai-insights-credits-balance { flex-shrink: 0; text-align: center; background: rgba(255, 255, 255, 0.15); padding: 12px 24px; border-radius: 8px; } .wpforo-ai-insights-credits-number { display: block; font-size: 32px; font-weight: 700; line-height: 1; } .wpforo-ai-insights-credits-label { display: block; font-size: 12px; opacity: 0.9; margin-top: 4px; } /* Insights Grid */ .wpforo-ai-insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } /* Top row grid - 2 columns (half width each) */ .wpforo-ai-insights-grid-top { grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .wpforo-ai-insights-grid-top { grid-template-columns: 1fr; } } /* Insight Widget */ .wpforo-ai-insights-widget { display: flex; flex-direction: column; } .wpforo-ai-insights-widget .wpforo-ai-box-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #f6f7f7; border-bottom: 1px solid #dcdcde; } .wpforo-ai-insights-widget .wpforo-ai-box-header h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .wpforo-ai-insights-widget .wpforo-ai-box-header h3 .dashicons { color: #2271b1; } .wpforo-ai-insights-credits-cost { background: #f0f0f1; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; color: #646970; } .wpforo-ai-insights-widget .wpforo-ai-box-body { flex: 1; display: flex; flex-direction: column; padding: 20px; } .wpforo-ai-insights-description { color: #646970; font-size: 13px; line-height: 1.5; margin: 0 0 10px 0; } .wpforo-ai-insights-period { display: flex; align-items: center; gap: 6px; color: #787c82; font-size: 12px; margin: 0 0 16px 0; padding: 6px 10px; background: #f0f6fc; border-radius: 4px; border-left: 3px solid #2271b1; } .wpforo-ai-insights-period .dashicons { font-size: 14px; width: 14px; height: 14px; color: #2271b1; } /* Results Container */ .wpforo-ai-insights-results { flex: 1; margin-bottom: 16px; padding: 16px; background: #f9f9f9; border-radius: 6px; border: 1px solid #e0e0e0; } .wpforo-ai-insights-cached-notice { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #dcdcde; font-size: 12px; color: #646970; } .wpforo-ai-insights-cached-notice .dashicons { font-size: 14px; width: 14px; height: 14px; } /* Loading State */ .wpforo-ai-insights-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px; color: #646970; } .wpforo-ai-insights-loading .spinner { float: none; margin: 0; } /* Error State */ .wpforo-ai-insights-error { padding: 12px 16px; background: #fcf0f1; border: 1px solid #d63638; border-radius: 4px; color: #d63638; font-size: 13px; margin-bottom: 16px; } /* Action Buttons */ .wpforo-ai-insights-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; } .wpforo-ai-run-insight-btn { display: inline-flex; align-items: center; gap: 6px; } .wpforo-ai-run-insight-btn .dashicons { font-size: 16px; width: 16px; height: 16px; } .wpforo-ai-insights-insufficient { color: #d63638; font-size: 12px; } .wpforo-ai-insights-daily-used { color: #646970; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; } .wpforo-ai-insights-daily-used .dashicons { font-size: 14px; width: 14px; height: 14px; } .wpforo-ai-insights-outdated-notice { color: #996800; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; background: #fcf9e8; padding: 4px 10px; border-radius: 4px; border: 1px solid #dba617; margin-left: 10px; } .wpforo-ai-insights-outdated-notice .dashicons { font-size: 14px; width: 14px; height: 14px; color: #dba617; } .wpforo-ai-daily-limit-badge { background: #dcdcde; color: #50575e; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; margin-left: 8px; text-transform: uppercase; } /* Sentiment Results */ .wpforo-ai-sentiment-results { /* Container */ } .wpforo-ai-sentiment-bars { display: flex; flex-direction: column; gap: 12px; } .wpforo-ai-sentiment-bar { display: grid; grid-template-columns: 32px 70px 1fr 50px; align-items: center; gap: 10px; } .wpforo-ai-sentiment-emoji { font-size: 20px; text-align: center; } .wpforo-ai-sentiment-label { font-size: 13px; font-weight: 500; color: #1d2327; } .wpforo-ai-sentiment-bar-track { height: 12px; background: #e0e0e0; border-radius: 6px; overflow: hidden; } .wpforo-ai-sentiment-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; } .wpforo-ai-sentiment-bar.positive .wpforo-ai-sentiment-bar-fill { background: linear-gradient(90deg, #4caf50 0%, #81c784 100%); } .wpforo-ai-sentiment-bar.neutral .wpforo-ai-sentiment-bar-fill { background: linear-gradient(90deg, #9e9e9e 0%, #bdbdbd 100%); } .wpforo-ai-sentiment-bar.negative .wpforo-ai-sentiment-bar-fill { background: linear-gradient(90deg, #f44336 0%, #e57373 100%); } .wpforo-ai-sentiment-percent { font-size: 14px; font-weight: 600; color: #1d2327; text-align: right; } .wpforo-ai-sentiment-trend { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e0e0e0; font-size: 13px; color: #646970; } .wpforo-ai-sentiment-trend .dashicons-arrow-up-alt { color: #4caf50; } .wpforo-ai-sentiment-trend .dashicons-arrow-down-alt { color: #f44336; } .wpforo-ai-sentiment-summary { margin-top: 12px; padding: 12px; background: #fff; border-radius: 4px; font-size: 13px; line-height: 1.5; color: #50575e; } .wpforo-ai-sentiment-summary p { margin: 0; } /* Trending Topics Results */ .wpforo-ai-trending-results { /* Container */ } .wpforo-ai-trending-list { list-style: none; margin: 0; padding: 0; } .wpforo-ai-trending-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e0e0e0; } .wpforo-ai-trending-item:last-child { border-bottom: none; } .wpforo-ai-trending-rank { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #2271b1; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 600; flex-shrink: 0; } .wpforo-ai-trending-item:nth-child(1) .wpforo-ai-trending-rank { background: #f5a623; } .wpforo-ai-trending-item:nth-child(2) .wpforo-ai-trending-rank { background: #9e9e9e; } .wpforo-ai-trending-item:nth-child(3) .wpforo-ai-trending-rank { background: #cd7f32; } .wpforo-ai-trending-title { flex: 1; font-size: 14px; color: #1d2327; } .wpforo-ai-trending-heat { flex-shrink: 0; font-size: 13px; } .wpforo-ai-trending-summary { margin-top: 12px; padding: 12px; background: #fff; border-radius: 4px; font-size: 13px; line-height: 1.5; color: #50575e; } .wpforo-ai-trending-summary p { margin: 0; } /* Recommendations Results */ .wpforo-ai-recommendations-results { /* Container */ } .wpforo-ai-recommendations-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .wpforo-ai-recommendation-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #fff; border-radius: 6px; border-left: 3px solid #2271b1; } .wpforo-ai-recommendation-item.priority-high { border-left-color: #d63638; background: #fef7f7; } .wpforo-ai-recommendation-item.priority-low { border-left-color: #9e9e9e; } .wpforo-ai-recommendation-icon { flex-shrink: 0; } .wpforo-ai-recommendation-icon .dashicons { font-size: 20px; width: 20px; height: 20px; color: #f5a623; } .wpforo-ai-recommendation-content { flex: 1; min-width: 0; } .wpforo-ai-recommendation-content strong { display: block; font-size: 14px; color: #1d2327; margin-bottom: 4px; } .wpforo-ai-recommendation-content p { margin: 0; font-size: 13px; color: #646970; line-height: 1.4; } .wpforo-ai-recommendation-priority { flex-shrink: 0; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .wpforo-ai-recommendation-item.priority-high .wpforo-ai-recommendation-priority { background: #d63638; color: #fff; } .wpforo-ai-recommendations-summary { margin-top: 12px; padding: 12px; background: #fff; border-radius: 4px; font-size: 13px; line-height: 1.5; color: #50575e; } .wpforo-ai-recommendations-summary p { margin: 0; } /* Info Box */ .wpforo-ai-insights-info-box { background: #f0f6fc; border: 1px solid #c3c4c7; } .wpforo-ai-insights-info-box h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 0; font-size: 14px; color: #1d2327; } .wpforo-ai-insights-info-box h4 .dashicons { color: #2271b1; } .wpforo-ai-insights-info-list { margin: 0; padding-left: 20px; } .wpforo-ai-insights-info-list li { font-size: 13px; color: #50575e; margin-bottom: 6px; line-height: 1.5; } .wpforo-ai-insights-info-list li:last-child { margin-bottom: 0; } /* Confirmation Modal */ .wpforo-ai-insights-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100000; } .wpforo-ai-insights-modal { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); max-width: 400px; width: 90%; } .wpforo-ai-insights-modal-header { padding: 20px 24px; border-bottom: 1px solid #dcdcde; } .wpforo-ai-insights-modal-header h3 { margin: 0; font-size: 18px; color: #1d2327; } .wpforo-ai-insights-modal-body { padding: 20px 24px; } .wpforo-ai-insights-modal-body p { margin: 0; font-size: 14px; color: #50575e; line-height: 1.5; } .wpforo-ai-insights-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; background: #f6f7f7; border-top: 1px solid #dcdcde; border-radius: 0 0 8px 8px; } /* Responsive */ @media (max-width: 782px) { .wpforo-ai-insights-credits-info { flex-direction: column; text-align: center; } .wpforo-ai-insights-credits-balance { width: 100%; } .wpforo-ai-insights-grid { grid-template-columns: 1fr; } .wpforo-ai-sentiment-bar { grid-template-columns: 28px 60px 1fr 40px; gap: 8px; } } /* ========================================================================== AI Insights - Full Width Grid Layout ========================================================================== */ .wpforo-ai-insights-grid-full { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; } .wpforo-ai-insights-widget-full { display: flex; flex-direction: column; } .wpforo-ai-insights-widget-full .wpforo-ai-box-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: linear-gradient(135deg, #f6f7f7 0%, #e8eaed 100%); border-bottom: 1px solid #dcdcde; } .wpforo-ai-insights-widget-full .wpforo-ai-box-header h3 { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .wpforo-ai-insights-widget-full .wpforo-ai-box-body { padding: 24px; } /* ========================================================================== Deep Analysis Results ========================================================================== */ .wpforo-ai-deep-analysis-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .wpforo-ai-deep-section { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; } .wpforo-ai-deep-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px 0; font-size: 14px; font-weight: 600; color: #1d2327; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; } .wpforo-ai-deep-section h4 .dashicons { color: #2271b1; } .wpforo-ai-deep-metrics { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .wpforo-ai-metric { flex: 1; min-width: 80px; text-align: center; padding: 12px; background: #f9f9f9; border-radius: 6px; } .wpforo-ai-metric-value { display: block; font-size: 24px; font-weight: 700; color: #2271b1; line-height: 1.2; } .wpforo-ai-metric-label { display: block; font-size: 11px; color: #646970; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .wpforo-ai-top-repliers { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; } .wpforo-ai-top-repliers strong { display: block; font-size: 12px; color: #646970; margin-bottom: 8px; } .wpforo-ai-replier-badge { display: inline-block; padding: 4px 10px; margin: 2px 4px 2px 0; border-radius: 12px; font-size: 12px; background: #f0f0f0; } .wpforo-ai-replier-badge.sentiment-positive { background: #d4edda; color: #155724; } .wpforo-ai-replier-badge.sentiment-negative { background: #f8d7da; color: #721c24; } .wpforo-ai-replier-badge.sentiment-neutral { background: #e2e3e5; color: #383d41; } .wpforo-ai-section-summary { margin: 12px 0 0 0; font-size: 13px; color: #50575e; line-height: 1.5; font-style: italic; } /* Keyword Hotspots */ .wpforo-ai-keyword-hotspots { display: flex; flex-wrap: wrap; gap: 8px; } .wpforo-ai-keyword-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; border: 2px solid; font-size: 13px; } .wpforo-ai-keyword-text { font-weight: 500; } .wpforo-ai-keyword-heat { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; } /* Contributors Mood */ .wpforo-ai-contributors-mood { display: flex; align-items: center; gap: 20px; } .wpforo-ai-mood-indicator { display: flex; align-items: center; gap: 8px; } .wpforo-ai-mood-emoji { font-size: 32px; } .wpforo-ai-mood-label { font-size: 16px; font-weight: 600; color: #1d2327; } .wpforo-ai-mood-breakdown { flex: 1; display: flex; gap: 4px; height: 24px; background: #e0e0e0; border-radius: 4px; overflow: hidden; } .wpforo-ai-mood-bar { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; min-width: 30px; } .wpforo-ai-mood-bar.positive { background: #4CAF50; } .wpforo-ai-mood-bar.negative { background: #F44336; } /* Contributors Mood - New Grid Layout */ .wpforo-ai-section-note { margin: 0 0 16px 0; font-size: 12px; color: #646970; font-style: italic; } .wpforo-ai-contributors-mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .wpforo-ai-mood-stat { display: flex; flex-direction: column; align-items: center; padding: 16px 12px; background: #f9f9f9; border-radius: 8px; border: 2px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; } .wpforo-ai-mood-stat.positive { border-color: #c8e6c9; background: linear-gradient(to bottom, #f1f8e9, #e8f5e9); } .wpforo-ai-mood-stat.neutral { border-color: #e0e0e0; background: linear-gradient(to bottom, #fafafa, #f5f5f5); } .wpforo-ai-mood-stat.negative { border-color: #ffcdd2; background: linear-gradient(to bottom, #ffebee, #fce4ec); } .wpforo-ai-mood-stat-icon { font-size: 28px; margin-bottom: 8px; } .wpforo-ai-mood-stat-info { text-align: center; margin-bottom: 12px; } .wpforo-ai-mood-stat-value { font-size: 22px; font-weight: 700; color: #1d2327; line-height: 1.2; } .wpforo-ai-mood-stat-label { font-size: 12px; color: #646970; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .wpforo-ai-mood-stat-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; } .wpforo-ai-mood-stat-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; } .wpforo-ai-mood-stat-bar-fill.positive { background: linear-gradient(90deg, #66bb6a 0%, #4caf50 100%); } .wpforo-ai-mood-stat-bar-fill.neutral { background: linear-gradient(90deg, #bdbdbd 0%, #9e9e9e 100%); } .wpforo-ai-mood-stat-bar-fill.negative { background: linear-gradient(90deg, #ef5350 0%, #e53935 100%); } .wpforo-ai-mood-influence { margin-top: 16px; padding: 12px; background: #fff; border-radius: 6px; font-size: 13px; color: #50575e; line-height: 1.5; } .wpforo-ai-mood-influence strong { color: #1d2327; margin-right: 4px; } /* Activity Patterns */ .wpforo-ai-activity-patterns { display: flex; flex-wrap: wrap; gap: 12px; } .wpforo-ai-pattern-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #f9f9f9; border-radius: 6px; } .wpforo-ai-pattern-label { font-size: 12px; color: #646970; } .wpforo-ai-pattern-value { font-size: 13px; font-weight: 600; color: #1d2327; } .wpforo-ai-pattern-value.trend-up { color: #4CAF50; } .wpforo-ai-pattern-value.trend-down { color: #F44336; } .wpforo-ai-pattern-value.trend-stable { color: #9E9E9E; } /* Deep Analysis Overall Summary */ .wpforo-ai-deep-overall-summary { grid-column: 1 / -1; padding: 16px 20px; background: linear-gradient(135deg, #e8f4ea 0%, #d4edda 100%); border-radius: 8px; border-left: 4px solid #28a745; } .wpforo-ai-deep-overall-summary p { margin: 0; font-size: 14px; line-height: 1.6; color: #155724; } /* ========================================================================== Sentiment Trend Results ========================================================================== */ .wpforo-ai-sentiment-trend-results { /* Container */ } .wpforo-ai-trend-overview { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; } .wpforo-ai-trend-direction { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 30px; background: #fff; border: 2px solid; border-radius: 12px; } .wpforo-ai-trend-icon { display: flex; align-items: center; justify-content: center; } .wpforo-ai-trend-icon svg { width: 40px; height: 40px; } .wpforo-ai-trend-label { font-size: 18px; font-weight: 600; color: #1d2327; } .wpforo-ai-trend-strength { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; } .wpforo-ai-strength-label { font-size: 11px; color: #646970; } .wpforo-ai-strength-bar { flex: 1; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; } .wpforo-ai-strength-fill { height: 100%; border-radius: 4px; } .wpforo-ai-strength-value { font-size: 12px; font-weight: 600; color: #1d2327; } /* Peaks */ .wpforo-ai-trend-peaks { flex: 1; display: flex; flex-direction: column; gap: 10px; } .wpforo-ai-peak-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #f9f9f9; border-radius: 8px; } .wpforo-ai-peak-item.positive { background: #d4edda; } .wpforo-ai-peak-item.negative { background: #f8d7da; } .wpforo-ai-peak-item.active { background: #fff3cd; } .wpforo-ai-peak-emoji { font-size: 20px; } .wpforo-ai-peak-label { font-size: 12px; color: #646970; } .wpforo-ai-peak-value { font-weight: 600; color: #1d2327; } /* Time Series Chart */ .wpforo-ai-trend-chart-container { margin-bottom: 24px; padding: 20px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; } .wpforo-ai-trend-chart-container h4 { margin: 0 0 16px 0; font-size: 14px; font-weight: 600; color: #1d2327; } .wpforo-ai-chart-subtitle { font-size: 12px; font-weight: 400; color: #646970; } .wpforo-ai-trend-chart { position: relative; height: 220px; padding: 0 10px 0 40px; } /* Y-axis labels */ .wpforo-ai-chart-y-axis { position: absolute; left: 0; top: 0; bottom: 30px; width: 35px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; } .wpforo-ai-chart-y-label { font-size: 10px; color: #50575e; font-weight: 500; line-height: 1; } .wpforo-ai-chart-area { position: relative; height: 180px; margin-left: 5px; border-left: 2px solid #aaa; border-bottom: 2px solid #aaa; /* Grid lines - horizontal every 45px (180/4) */ background: /* Horizontal grid lines */ repeating-linear-gradient( to top, transparent, transparent 44px, #ddd 44px, #ddd 45px ), /* Light background */ linear-gradient(to top, #fafafa, #fff); } .wpforo-ai-chart-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 100%; gap: 3px; padding: 0 8px; } .wpforo-ai-chart-bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 12px; max-width: 40px; cursor: pointer; position: relative; /* Vertical grid line */ border-right: 1px dashed #e0e0e0; } .wpforo-ai-chart-bar-wrapper:last-child { border-right: none; } .wpforo-ai-chart-bar { width: 80%; min-height: 6px; border-radius: 3px 3px 0 0; transition: all 0.2s ease; position: relative; box-shadow: 0 -1px 3px rgba(0,0,0,0.1); } /* Show emoji on hover */ .wpforo-ai-chart-bar-wrapper:hover .wpforo-ai-chart-bar::after { content: attr(data-emoji); position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 18px; background: #fff; padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 10; border: 1px solid #e0e0e0; } .wpforo-ai-chart-bar-wrapper:hover .wpforo-ai-chart-bar { opacity: 0.9; transform: scaleY(1.03); box-shadow: 0 -2px 6px rgba(0,0,0,0.2); } .wpforo-ai-chart-x-axis { display: flex; justify-content: space-around; gap: 3px; padding: 8px 8px 0 8px; margin-left: 5px; border-top: none; } .wpforo-ai-chart-label { flex: 1; font-size: 10px; color: #50575e; text-align: center; min-width: 12px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .wpforo-ai-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; justify-content: center; } .wpforo-ai-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #646970; padding: 3px 8px; background: #f9f9f9; border-radius: 12px; } .wpforo-ai-legend-color { width: 10px; height: 10px; border-radius: 3px; } /* Mood Shifts */ .wpforo-ai-mood-shifts { margin-bottom: 24px; } .wpforo-ai-mood-shifts h4 { margin: 0 0 16px 0; font-size: 14px; font-weight: 600; color: #1d2327; } .wpforo-ai-shifts-list { display: flex; flex-wrap: wrap; gap: 12px; } .wpforo-ai-shift-item { flex: 1; min-width: 200px; padding: 14px; background: #f9f9f9; border-radius: 8px; border-left: 4px solid #9E9E9E; } .wpforo-ai-shift-item.magnitude-minor { border-left-color: #9E9E9E; } .wpforo-ai-shift-item.magnitude-moderate { border-left-color: #FF9800; } .wpforo-ai-shift-item.magnitude-major { border-left-color: #F44336; } .wpforo-ai-shift-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .wpforo-ai-shift-period { font-size: 12px; font-weight: 600; color: #1d2327; } .wpforo-ai-shift-magnitude { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #e0e0e0; color: #646970; text-transform: uppercase; } .wpforo-ai-shift-item.magnitude-major .wpforo-ai-shift-magnitude { background: #f8d7da; color: #721c24; } .wpforo-ai-shift-transition { display: flex; align-items: center; gap: 8px; font-size: 14px; } .wpforo-ai-shift-arrow { color: #646970; } .wpforo-ai-shift-from { color: #646970; } .wpforo-ai-shift-to { font-weight: 600; color: #1d2327; } .wpforo-ai-shift-cause { margin: 8px 0 0 0; font-size: 12px; color: #50575e; line-height: 1.4; font-style: italic; } /* Patterns */ .wpforo-ai-trend-patterns { margin-bottom: 24px; padding: 16px 20px; background: #f0f6fc; border-radius: 8px; border: 1px solid #c3c4c7; } .wpforo-ai-trend-patterns h4 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #1d2327; } .wpforo-ai-cyclical-badge { display: inline-block; padding: 4px 12px; margin-bottom: 12px; border-radius: 12px; background: #2271b1; color: #fff; font-size: 12px; font-weight: 500; } .wpforo-ai-pattern-info p { margin: 0; font-size: 13px; color: #50575e; line-height: 1.5; } /* Summary and Forecast */ .wpforo-ai-trend-summary-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .wpforo-ai-trend-summary, .wpforo-ai-trend-forecast { padding: 16px 20px; border-radius: 8px; } .wpforo-ai-trend-summary { background: #f9f9f9; border: 1px solid #e0e0e0; } .wpforo-ai-trend-forecast { background: linear-gradient(135deg, #e8f4ea 0%, #d4edda 100%); border: 1px solid #c3e6cb; } .wpforo-ai-trend-summary h4, .wpforo-ai-trend-forecast h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #1d2327; } .wpforo-ai-trend-forecast h4 .dashicons { color: #28a745; } .wpforo-ai-trend-summary p, .wpforo-ai-trend-forecast p { margin: 0; font-size: 13px; line-height: 1.5; color: #50575e; } .wpforo-ai-trend-forecast p { color: #155724; } /* ========================================================================== 7 Emotions Sentiment Layout ========================================================================== */ .wpforo-ai-sentiment-results-7 { /* More compact for 7 emotions */ } .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-bars { gap: 8px; } .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-bar { grid-template-columns: 28px 80px 1fr 45px; gap: 8px; } .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-emoji { font-size: 18px; } .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-label { font-size: 12px; } .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-bar-track { height: 10px; } .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-percent { font-size: 13px; } /* Responsive for new sections */ @media (max-width: 1200px) { .wpforo-ai-deep-analysis-results { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 782px) { .wpforo-ai-deep-analysis-results { grid-template-columns: 1fr; } .wpforo-ai-trend-overview { flex-direction: column; } .wpforo-ai-trend-direction { width: 100%; } .wpforo-ai-contributors-mood { flex-direction: column; align-items: flex-start; } .wpforo-ai-mood-breakdown { width: 100%; } .wpforo-ai-contributors-mood-grid { grid-template-columns: 1fr; gap: 12px; } .wpforo-ai-mood-stat { flex-direction: row; justify-content: flex-start; padding: 12px 16px; gap: 12px; } .wpforo-ai-mood-stat-icon { font-size: 24px; margin-bottom: 0; } .wpforo-ai-mood-stat-info { text-align: left; margin-bottom: 0; flex-shrink: 0; min-width: 70px; } .wpforo-ai-mood-stat-value { font-size: 18px; } .wpforo-ai-mood-stat-bar { flex: 1; } .wpforo-ai-chart-bars { height: 120px; } .wpforo-ai-shift-item { min-width: 100%; } .wpforo-ai-trend-summary-section { grid-template-columns: 1fr; } } /* ========================================================================== AI Logs Tab ========================================================================== */ .wpforo-ai-logs-tab { margin: 0; } /* Header Section */ .wpforo-ai-logs-tab .wpforo-ai-logs-header-box { margin-bottom: 15px; } .wpforo-ai-logs-tab .wpforo-ai-logs-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .wpforo-ai-logs-tab .wpforo-ai-logs-info h2 { margin: 0 0 8px 0; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .wpforo-ai-logs-tab .wpforo-ai-logs-info h2 .dashicons { color: #3b82f6; } .wpforo-ai-logs-tab .wpforo-ai-logs-count { font-weight: 400; color: #64748b; font-size: 16px; } .wpforo-ai-logs-tab .wpforo-ai-logs-info .wpforo-ai-description { margin: 0; color: #64748b; font-size: 14px; } .wpforo-ai-logs-tab .wpforo-ai-logs-actions { flex-shrink: 0; } /* Settings Section */ .wpforo-ai-logs-tab .wpforo-ai-logs-settings-box { margin-top: 15px; } .wpforo-ai-logs-tab .wpforo-ai-logs-settings { display: flex; flex-wrap: wrap; gap: 30px; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row { display: flex; align-items: center; gap: 10px; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row label { font-size: 13px; color: #374151; font-weight: 500; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row input[type="number"] { width: 70px; text-align: center; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row select { min-width: 80px; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-status { position: relative; display: inline-block; width: 20px; height: 20px; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-spinner { position: absolute; top: 0; left: 0; float: none; margin: 0; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-saved { position: absolute; top: 0; left: 0; color: #16a34a; display: none; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-saved.is-visible { display: inline-block; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-saved .dashicons { font-size: 18px; width: 18px; height: 18px; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-days { font-size: 13px; color: #374151; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-hint { font-size: 12px; color: #6b7280; font-style: italic; } .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn { display: inline-flex; align-items: center; gap: 6px; color: #dc2626 !important; border-color: #fecaca !important; background: #fef2f2 !important; } .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn:hover { background: #fee2e2 !important; border-color: #f87171 !important; } .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn .dashicons { font-size: 16px; width: 16px; height: 16px; } /* Filters Section */ .wpforo-ai-logs-tab .wpforo-ai-logs-filters-box { margin-bottom: 15px; } .wpforo-ai-logs-tab .wpforo-ai-logs-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px; } .wpforo-ai-logs-tab .wpforo-ai-filter-group { display: flex; flex-direction: column; gap: 5px; } .wpforo-ai-logs-tab .wpforo-ai-filter-group label { font-size: 12px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.3px; } .wpforo-ai-logs-tab .wpforo-ai-filter-group select, .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"] { padding: 0 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; min-width: 140px; background-color: #fff; } .wpforo-ai-logs-tab .wpforo-ai-filter-group select:focus, .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"]:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); } .wpforo-ai-logs-tab .wpforo-ai-filter-search input { min-width: 200px; } .wpforo-ai-logs-tab .wpforo-ai-filter-button { flex-direction: row; gap: 8px; } .wpforo-ai-logs-tab .wpforo-ai-filter-button .button { display: inline-flex; align-items: center; gap: 5px; } .wpforo-ai-logs-tab .wpforo-ai-filter-button .button .dashicons { font-size: 14px; width: 14px; height: 14px; } /* Table Section */ .wpforo-ai-logs-tab .wpforo-ai-logs-table-box .wpforo-ai-box-header { display: flex; justify-content: space-between; align-items: center; } .wpforo-ai-logs-tab .wpforo-ai-logs-table-box .wpforo-ai-box-header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; } .wpforo-ai-logs-tab .wpforo-ai-logs-showing { font-weight: 400; color: #64748b; font-size: 13px; } .wpforo-ai-logs-tab .wpforo-ai-logs-bulk-actions { display: flex; align-items: center; gap: 8px; } .wpforo-ai-logs-tab .wpforo-ai-bulk-action-select { padding: 2px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; } /* Loading Indicator */ .wpforo-ai-logs-tab .wpforo-ai-logs-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: #64748b; font-size: 14px; } .wpforo-ai-logs-tab .wpforo-ai-logs-loading .spinner { float: none; margin: 0; } /* Logs Table */ .wpforo-ai-logs-tab .wpforo-ai-logs-table { margin-top: 0; } .wpforo-ai-logs-tab .wpforo-ai-logs-table th.check-column, .wpforo-ai-logs-tab .wpforo-ai-logs-table td.check-column { padding: 10px 8px; width: 35px; } .wpforo-ai-logs-tab .wpforo-ai-logs-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: #374151; } .wpforo-ai-logs-tab .wpforo-ai-logs-table td { vertical-align: middle; } /* Date/Time Column */ .wpforo-ai-logs-tab .wpforo-ai-log-date { display: block; font-weight: 500; color: #1e293b; font-size: 13px; } .wpforo-ai-logs-tab .wpforo-ai-log-time { display: block; font-size: 12px; color: #64748b; } /* Action Type Badge */ .wpforo-ai-logs-tab .wpforo-ai-log-action-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; background: #e5e7eb; color: #374151; } /* Action-specific badge colors */ .wpforo-ai-logs-tab .wpforo-ai-action-semantic_search { background: #dbeafe; color: #1e40af; } .wpforo-ai-logs-tab .wpforo-ai-action-public_search { background: #e0e7ff; color: #3730a3; } .wpforo-ai-logs-tab .wpforo-ai-action-translation { background: #fef3c7; color: #92400e; } .wpforo-ai-logs-tab .wpforo-ai-action-topic_summary { background: #d1fae5; color: #065f46; } .wpforo-ai-logs-tab .wpforo-ai-action-bot_reply { background: #fce7f3; color: #9d174d; } .wpforo-ai-logs-tab .wpforo-ai-action-suggest_reply { background: #ede9fe; color: #5b21b6; } .wpforo-ai-logs-tab .wpforo-ai-action-analytics_insights { background: #ffedd5; color: #9a3412; } .wpforo-ai-logs-tab .wpforo-ai-action-content_indexing { background: #ccfbf1; color: #0f766e; } .wpforo-ai-logs-tab .wpforo-ai-action-moderation { background: #fee2e2; color: #991b1b; } .wpforo-ai-logs-tab .wpforo-ai-action-chatbot { background: #f3e8ff; color: #7c3aed; } .wpforo-ai-logs-tab .wpforo-ai-action-task_execution { background: #e0f2fe; color: #0369a1; } /* Chat Message Role Badges */ .wpforo-ai-logs-tab .wpforo-ai-chat-role-user { background: #dbeafe; color: #1e40af; } .wpforo-ai-logs-tab .wpforo-ai-chat-role-assistant { background: #f3e8ff; color: #7c3aed; } /* Chat Messages Button Active State */ .wpforo-ai-logs-tab #wpforo-ai-logs-chat-messages-btn.active { background: #7c3aed; border-color: #7c3aed; color: #ffffff; } .wpforo-ai-logs-tab #wpforo-ai-logs-chat-messages-btn.active:hover { background: #6d28d9; border-color: #6d28d9; } /* Chat Message Row Highlight */ .wpforo-ai-logs-tab .wpforo-ai-chat-message-row td { background: #faf5ff; } .wpforo-ai-logs-tab .wpforo-ai-chat-message-row:nth-child(even) td { background: #f5f3ff; } /* Chat Message Content in Detail Modal */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 15px; max-height: 400px; overflow-y: auto; word-wrap: break-word; line-height: 1.6; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content p { margin: 0 0 1em 0; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content p:last-child { margin-bottom: 0; } /* Post reference links */ .wpforo-ai-log-detail-modal .wpforo-ai-post-link { background: #e0e7ff; color: #4338ca; padding: 2px 6px; border-radius: 4px; font-weight: 500; text-decoration: none; font-size: 12px; } .wpforo-ai-log-detail-modal .wpforo-ai-post-link:hover { background: #c7d2fe; color: #3730a3; } /* Sources list */ .wpforo-ai-sources-list ul { margin: 0; padding: 0; list-style: none; } .wpforo-ai-sources-list ul li { padding: 6px 0; border-bottom: 1px solid #e5e7eb; } .wpforo-ai-sources-list ul li:last-child { border-bottom: none; } .wpforo-ai-sources-list .wpforo-ai-source-link { color: #2563eb; text-decoration: none; font-weight: 500; } .wpforo-ai-sources-list .wpforo-ai-source-link:hover { color: #1d4ed8; text-decoration: underline; } /* Inline code */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; color: #be185d; } /* Code blocks */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content pre { background: #1e293b; color: #e2e8f0; padding: 12px 15px; border-radius: 6px; overflow-x: auto; margin: 10px 0; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content pre code { background: transparent; color: inherit; padding: 0; font-size: 13px; } /* Blockquotes */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content blockquote { border-left: 4px solid #7c3aed; margin: 10px 0; padding: 10px 15px; background: #f5f3ff; color: #5b21b6; } /* Lists */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content ul, .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content ol { margin: 10px 0; padding-left: 25px; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content li { margin: 5px 0; } /* Headers in message content */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h1, .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h2, .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h3, .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h4, .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h5, .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h6 { margin: 15px 0 10px 0; font-weight: 600; color: #1e293b; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h1 { font-size: 1.5em; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h2 { font-size: 1.3em; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h3 { font-size: 1.15em; } .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h4 { font-size: 1em; } /* Horizontal rule */ .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content hr { border: none; border-top: 1px solid #e2e8f0; margin: 15px 0; } /* User Column */ .wpforo-ai-logs-tab .wpforo-ai-log-user { font-size: 13px; color: #374151; } .wpforo-ai-logs-tab .wpforo-ai-user-type-cron { color: #0891b2; font-style: italic; } .wpforo-ai-logs-tab .wpforo-ai-user-type-system { color: #7c3aed; font-style: italic; } .wpforo-ai-logs-tab .wpforo-ai-user-type-guest { color: #64748b; font-style: italic; } /* Credits Column */ .wpforo-ai-logs-tab .wpforo-ai-log-credits { font-weight: 600; color: #059669; } .wpforo-ai-logs-tab .wpforo-ai-log-credits-zero { color: #9ca3af; } /* Status Badges - Extending existing styles */ .wpforo-ai-logs-tab .wpforo-ai-log-status.status-cached { background: #e0f2fe; color: #0369a1; } /* Summary Column */ .wpforo-ai-logs-tab .wpforo-ai-log-summary { font-size: 13px; color: #475569; word-break: break-word; } .wpforo-ai-logs-tab .wpforo-ai-log-error-summary { color: #dc2626; } .wpforo-ai-logs-tab .wpforo-ai-log-duration { font-size: 11px; color: #94a3b8; margin-left: 5px; } /* Action Buttons */ .wpforo-ai-logs-tab .wpforo-ai-logs-table .column-actions { text-align: center; } .wpforo-ai-logs-tab .wpforo-ai-log-view, .wpforo-ai-logs-tab .wpforo-ai-log-delete { padding: 3px 6px !important; min-height: auto !important; line-height: 1 !important; } .wpforo-ai-logs-tab .wpforo-ai-log-view .dashicons, .wpforo-ai-logs-tab .wpforo-ai-log-delete .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; } .wpforo-ai-logs-tab .wpforo-ai-log-delete { color: #dc2626 !important; } .wpforo-ai-logs-tab .wpforo-ai-log-delete:hover { background: #fee2e2 !important; border-color: #f87171 !important; } /* Empty State */ .wpforo-ai-logs-tab .wpforo-ai-logs-empty-row td { padding: 0 !important; } .wpforo-ai-logs-tab .wpforo-ai-logs-empty { text-align: center; padding: 60px 20px; color: #64748b; } .wpforo-ai-logs-tab .wpforo-ai-logs-empty .dashicons { font-size: 40px; width: auto; height: auto; color: #cbd5e1; margin-bottom: 15px; display: block; } /* Pagination */ .wpforo-ai-logs-tab .wpforo-ai-logs-pagination { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e5e7eb; } .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .tablenav-pages { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .displaying-num { color: #64748b; font-size: 13px; } .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .pagination-links { display: flex; align-items: center; gap: 4px; } .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .pagination-links .button { padding: 4px 8px; min-height: auto; line-height: 1.2; } .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .paging-input { font-size: 13px; color: #374151; margin: 0 8px; } .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .current-page { font-weight: 600; } /* Log Detail Modal */ .wpforo-ai-logs-tab .wpforo-ai-log-detail-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 100000; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-modal { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); max-width: 700px; width: 90%; max-height: 85vh; display: flex; flex-direction: column; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e1e4e8; background: #f8f9fa; border-radius: 8px 8px 0 0; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-header h3 .dashicons { color: #3b82f6; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-close { background: none; border: none; font-size: 20px; color: #64748b; cursor: pointer; padding: 4px; line-height: 1; transition: color 0.2s; border-radius: 4px; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-close:hover { color: #ef4444; background: #fee2e2; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-close .dashicons { font-size: 20px; width: 20px; height: 20px; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-body { padding: 20px; overflow-y: auto; } /* Log Detail Content */ .wpforo-ai-logs-tab .wpforo-ai-log-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px 16px; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-item.full-width { grid-column: span 2; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; margin-bottom: 4px; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-value { font-size: 14px; color: #1e293b; word-break: break-word; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-value pre { background: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 4px; font-size: 12px; overflow-x: auto; margin: 0; white-space: pre-wrap; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-error { background: #fef2f2; border-color: #fecaca; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-error .wpforo-ai-log-detail-value { color: #dc2626; } /* Confirm Modal */ .wpforo-ai-logs-tab .wpforo-ai-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 100001; } .wpforo-ai-logs-tab .wpforo-ai-confirm-modal { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); max-width: 400px; width: 90%; } .wpforo-ai-logs-tab .wpforo-ai-confirm-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #e1e4e8; font-size: 16px; font-weight: 600; color: #1e293b; } .wpforo-ai-logs-tab .wpforo-ai-confirm-header .dashicons { color: #f59e0b; font-size: 24px; width: 24px; height: 24px; } .wpforo-ai-logs-tab .wpforo-ai-confirm-body { padding: 20px; } .wpforo-ai-logs-tab .wpforo-ai-confirm-body p { margin: 0; color: #475569; font-size: 14px; line-height: 1.6; } .wpforo-ai-logs-tab .wpforo-ai-confirm-footer { padding: 16px 20px; border-top: 1px solid #e1e4e8; display: flex; justify-content: flex-end; gap: 10px; background: #f8f9fa; border-radius: 0 0 8px 8px; } .wpforo-ai-logs-tab .wpforo-ai-btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } .wpforo-ai-logs-tab .wpforo-ai-btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; } /* Responsive - AI Logs */ @media screen and (max-width: 1024px) { .wpforo-ai-logs-tab .wpforo-ai-logs-filters { gap: 12px; } .wpforo-ai-logs-tab .wpforo-ai-filter-group select, .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"] { min-width: 120px; } .wpforo-ai-logs-tab .wpforo-ai-filter-search input { min-width: 160px; } } @media screen and (max-width: 782px) { .wpforo-ai-logs-tab .wpforo-ai-logs-header { flex-direction: column; gap: 15px; } .wpforo-ai-logs-tab .wpforo-ai-logs-actions { width: 100%; } .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn { width: 100%; justify-content: center; } .wpforo-ai-logs-tab .wpforo-ai-logs-settings { flex-direction: column; gap: 15px; } .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row { flex-wrap: wrap; } .wpforo-ai-logs-tab .wpforo-ai-logs-filters { flex-direction: column; align-items: stretch; } .wpforo-ai-logs-tab .wpforo-ai-filter-group { width: 100%; } .wpforo-ai-logs-tab .wpforo-ai-filter-group select, .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"] { width: 100%; min-width: auto; } .wpforo-ai-logs-tab .wpforo-ai-filter-button { flex-direction: row; justify-content: stretch; } .wpforo-ai-logs-tab .wpforo-ai-filter-button .button { flex: 1; justify-content: center; } .wpforo-ai-logs-tab .wpforo-ai-logs-table-box .wpforo-ai-box-header { flex-direction: column; align-items: flex-start; gap: 10px; } .wpforo-ai-logs-tab .wpforo-ai-logs-bulk-actions { width: 100%; } .wpforo-ai-logs-tab .wpforo-ai-bulk-action-select { flex: 1; } .wpforo-ai-logs-tab .wpforo-ai-logs-table { display: block; overflow-x: auto; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-grid { grid-template-columns: 1fr; } .wpforo-ai-logs-tab .wpforo-ai-log-detail-item.full-width { grid-column: span 1; } } /* ========================================= Legal Documents Modal Styles ========================================= */ .wpforo-ai-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100100; display: flex; align-items: center; justify-content: center; } .wpforo-ai-modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); } .wpforo-ai-modal-container { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3); max-width: 900px; width: 90%; max-height: 85vh; display: flex; flex-direction: column; animation: wpforo-ai-modal-appear 0.2s ease-out; } @keyframes wpforo-ai-modal-appear { from { opacity: 0; transform: scale(0.95) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .wpforo-ai-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 25px; border-bottom: 1px solid #ddd; background: #f8f9fa; border-radius: 8px 8px 0 0; } .wpforo-ai-modal-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: #1d2327; } .wpforo-ai-modal-close { background: transparent; border: none; cursor: pointer; padding: 5px; color: #666; transition: color 0.2s; } .wpforo-ai-modal-close:hover { color: #d63638; } .wpforo-ai-modal-close .dashicons { font-size: 24px; width: 24px; height: 24px; } .wpforo-ai-modal-body { flex: 1; overflow-y: auto; padding: 25px; } .wpforo-ai-modal-footer { padding: 15px 25px; border-top: 1px solid #ddd; background: #f8f9fa; border-radius: 0 0 8px 8px; text-align: right; } /* Legal Document Content Styles */ .wpforo-ai-legal-document { font-size: 14px; line-height: 1.7; color: #1d2327; } .wpforo-ai-legal-document h1 { font-size: 24px; margin-bottom: 10px; color: #1d2327; border-bottom: 2px solid #2271b1; padding-bottom: 15px; } .wpforo-ai-legal-document h2 { font-size: 18px; margin-top: 30px; margin-bottom: 15px; color: #1d2327; padding-bottom: 8px; border-bottom: 1px solid #eee; } .wpforo-ai-legal-document h3 { font-size: 16px; margin-top: 20px; margin-bottom: 10px; color: #2c3338; } .wpforo-ai-legal-document h4 { font-size: 14px; margin-top: 15px; margin-bottom: 8px; color: #2c3338; font-weight: 600; } .wpforo-ai-legal-document p { margin-bottom: 15px; } .wpforo-ai-legal-document ul, .wpforo-ai-legal-document ol { margin-bottom: 15px; padding-left: 25px; } .wpforo-ai-legal-document li { margin-bottom: 8px; list-style: disc; } .wpforo-ai-legal-document a { color: #2271b1; text-decoration: none; } .wpforo-ai-legal-document a:hover { text-decoration: underline; } .wpforo-ai-legal-updated { color: #666; font-size: 13px; margin-bottom: 5px !important; } .wpforo-ai-legal-toc { background: #f8f9fa; padding: 20px; border-radius: 6px; margin: 20px 0; } .wpforo-ai-legal-toc h3 { margin-top: 0; margin-bottom: 15px; font-size: 15px; } .wpforo-ai-legal-toc ol { margin-bottom: 0; columns: 2; column-gap: 30px; } .wpforo-ai-legal-toc li { margin-bottom: 5px; font-size: 13px; } .wpforo-ai-legal-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 13px; } .wpforo-ai-legal-table th, .wpforo-ai-legal-table td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; } .wpforo-ai-legal-table th { background: #f8f9fa; font-weight: 600; } .wpforo-ai-legal-table tr:nth-child(even) { background: #fafafa; } .wpforo-ai-legal-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; color: #666; font-size: 13px; } /* Terms Agreement Link Styles */ .wpforo-ai-terms-agreement .wpforo-ai-legal-link { color: #2271b1; text-decoration: underline; cursor: pointer; } .wpforo-ai-terms-agreement .wpforo-ai-legal-link:hover { color: #135e96; } /* Loading State for Modal */ .wpforo-ai-modal-loading { display: flex; align-items: center; justify-content: center; padding: 50px; color: #666; } .wpforo-ai-modal-loading::before { content: ""; width: 30px; height: 30px; border: 3px solid #ddd; border-top-color: #2271b1; border-radius: 50%; animation: wpforo-ai-spin 0.8s linear infinite; margin-right: 15px; } .button.button-secondary.wpf-manage-subscription.wpf-provider-freemius{ background: #6754ca; color: #fff; border-color: #4637da; } .button.button-secondary.wpf-manage-subscription.wpf-provider-freemius:hover{ background: #7863ea; color: #fff; border-color: #4637da; box-shadow: 2px 1px 5px #b7b7b7; } .button.button-secondary.wpf-manage-subscription.wpf-provider-paddle{ background: #429e66; color: #fff; border-color: #1b974b; } .button.button-secondary.wpf-manage-subscription.wpf-provider-paddle:hover{ background: #4eb876; color: #fff; border-color: #1b974b; box-shadow: 2px 1px 5px #b7b7b7; } @keyframes wpforo-ai-spin { to { transform: rotate(360deg); } } /* Mobile Responsiveness for Modal */ @media (max-width: 782px) { .wpforo-ai-modal-container { width: 95%; max-height: 90vh; margin: 10px; } .wpforo-ai-modal-header { padding: 15px 20px; } .wpforo-ai-modal-body { padding: 20px; } .wpforo-ai-legal-toc ol { columns: 1; } .wpforo-ai-legal-table { font-size: 12px; } .wpforo-ai-legal-table th, .wpforo-ai-legal-table td { padding: 8px; } }