/* ==========================================================================
   Post Signal MX (PSIGMX) - Combined Stylesheet
   ========================================================================== */

/* ==========================================================================
   GLOBAL FONT
   ----------------------------------------------------------------------
   Force Arial across every plugin surface (modals + floating button),
   so the active theme's font-family never leaks in and changes the
   look of the plugin's own UI. High-specificity ID + universal
   selector, combined with !important, so it wins over theme rules
   without having to fight each one individually. Code/JSON blocks are
   excluded further down so they keep a monospace font.
   ========================================================================== */

#psigmx-modal, #psigmx-modal *,
#psigmx-auditor-modal, #psigmx-auditor-modal *,
#psigmx-google-modal, #psigmx-google-modal *,
#psigmx-social-modal, #psigmx-social-modal *,
#psigmx-schema-modal, #psigmx-schema-modal *,
#psigmx-page-test-modal, #psigmx-page-test-modal *,
#psigmx-more-tools-modal, #psigmx-more-tools-modal *,
#psigmx-page-details-modal, #psigmx-page-details-modal *,
#psigmx-mobile-wrap, #psigmx-mobile-wrap * {
    font-family: Arial, Helvetica, sans-serif !important;
}

#psigmx-modal pre, #psigmx-modal code,
#psigmx-auditor-modal pre, #psigmx-auditor-modal code,
#psigmx-schema-modal pre, #psigmx-schema-modal code {
    font-family: 'Courier New', Courier, monospace !important;
}


/* ==========================================================================
   PSIGMX Schema Modal Styling
   ========================================================================== */

/* Toolbar Container */
.psigmx-schema-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dcdcde;
    background: #f6f7f7;
    padding: 8px 12px;
    margin: 14px -15px 15px -15px; /* Pull to edges of standard modal padding */
}

/* Tab Navigation Group */
.psigmx-schema-tabs {
    display: flex;
    gap: 4px;
}

.psigmx-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #50575e;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.psigmx-tab-btn:hover {
    color: #2271b1;
    background: #f0f0f1;
}

.psigmx-tab-btn.active {
    background: #ffffff;
    border-color: #c3c4c7;
    border-bottom-color: #ffffff;
    color: #1d2327;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Copy Button */
.psigmx-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2271b1;
    color: #ffffff;
    border: 1px solid #2271b1;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

.psigmx-copy-btn:hover {
    background: #135e96;
    border-color: #135e96;
}

.psigmx-copy-btn .psigmx-icon {
    width: 11px;
    height: 11px;
}

/* ==========================================================================
   PSIGMX ICONS (inline SVG -- replaces the old Font Awesome dependency)
   ========================================================================== */

.psigmx-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Schema Card Layout (Visual Tree) */
.psigmx-schema-tree {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.psigmx-schema-card {
    background: #ffffff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.psigmx-schema-card-header {
    background: #f6f7f7;
    padding: 8px 12px;
    border-bottom: 1px solid #dcdcde;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1d2327;
}

.psigmx-badge {
    background: #e7f3ff;
    color: #185abc;
    border: 1px solid #b2d7ff;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.psigmx-schema-card-body {
    padding: 10px 12px;
	color: black;
}

/* Schema Key-Value Table */
.psigmx-schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.psigmx-schema-table td {
    padding: 6px 8px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f1;
    word-break: break-word;
}

.psigmx-schema-table tr:last-child td {
    border-bottom: none;
}

.psigmx-schema-table td:first-child {
    width: 25%;
    min-width: 120px;
    color: #50575e;
}

.psigmx-schema-table code {
    background: #f0f0f1;
    color: #2c3338;
    padding: 4px 6px;
    border-radius: 3px;
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
    display: block;
    white-space: pre-wrap;
    max-height: 150px;
    overflow-y: auto;
}

/* Raw Code Display View */
#psigmx-raw-json-block {
    background: #1d2327;
    color: #50575e;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    max-height: 450px;
    margin: 0;
}

#psigmx-raw-json-block code {
    color: #72aee6;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================================
   1. CORE & LAYOUT COMPONENTS
   ========================================================================== */

.psigmx-page-title {
    font-size: 19px;
    color: gray;
    line-height: 1.5;
    font-weight: 400;
    padding: 15px 0 37px 0;
    font-family: Arial, sans-serif;
}

.psigmx-app-title {
    font-size: 2rem;
    line-height: 2;
    font-weight: 600;
    font-family: Arial, sans-serif;
    padding: 10px 0 0 10px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.psigmx_logoDiv {
    top: 0;
    z-index: 20;
    padding-bottom: 6px;
}

.psigmx_logoDiv_meta {
    display: flex;
    padding: 9px 0 0 10px;    
}

.psigmx_logoHolder {
    background: #ffffff;
    border-radius: 12px;
    height: 68px;
    width: 68px;
    text-align: center;
    margin: 0 20px 0 0;
}

.psigmx_logoImg {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

.psigmx-descriptions {
    margin: 35px 0 30px 6px;
}

.psigmx-content-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 18px;
    font-size: 13px;
}

.psigmx-dropdowns {
    max-width: 220px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}

.psigmx-field-status {
    display: inline-block;
    font-size: 12px;
    color: #047857;
    min-height: 16px;
    vertical-align: middle;
}


/* ==========================================================================
   2. BUTTONS & ACTIONS
   ========================================================================== */

.psigmx-preview-buttons {
    display: flex;
    gap: 14px;
    margin: 44px 0;
    justify-content: center;
}

.psigmx-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 10px;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.psigmx-preview-btn i {
    font-size: 16px;
}

.psigmx-preview-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.psigmx-preview-btn:active {
    transform: translateY(0);
}

.psigmx-page-test,
.psigmx-schema-btn {
    background: linear-gradient(135deg, #334155, #0f172a);
    color: #ffffff;
}

.psigmx-page-test:hover,
.psigmx-schema-btn:hover {
    background: linear-gradient(135deg, #475569, #1e293b);
}

.psigmx-google-btn {
    background: linear-gradient(135deg, #4285f4, #1a73e8);
}

.psigmx-google-btn:hover {
    background: linear-gradient(135deg, #5a95f5, #1769d2);
}

.psigmx-tests-btn {
    background: #7c3aed;
}

.psigmx-tests-btn:hover {
    background: #6d28d9;
    transform: translateY(-1px);
}


/*
 * "Full Refresh" -- re-runs the audit AND clears all search/
 * filters, as opposed to the default Refresh button which
 * re-runs the audit but keeps whatever filters were active.
 * Given a visually distinct (neutral/grey, not blue) style so
 * the two aren't mistaken for the same action.
 */

.psigmx-full-refresh-btn {
    background: linear-gradient(135deg, #64748b, #334155);
}

.psigmx-full-refresh-btn:hover {
    background: linear-gradient(135deg, #78899e, #475569);
}


.psigmx-details-btn {
    background: #0f766e;
}

.psigmx-details-btn:hover {
    background: #115e59;
    transform: translateY(-1px);
}

#psigmx-page-details {
    background: #475569;
}

#psigmx-page-details:hover {
    background: #334155;
}

@media (max-width: 600px) {
    .psigmx-preview-buttons {
        flex-direction: column;
    }
    .psigmx-preview-btn {
        width: 100%;
    }
}


/* ==========================================================================
   3. CARDS, GRIDS & DASHBOARDS
   ========================================================================== */

/* Info Cards */
.psigmx-info-card,
.psigmx-activity-card {
    margin: 15px 0;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.psigmx-info-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f172a;
}

.psigmx-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 5px 0;
}

.psigmx-info-actions {
    margin-top: 12px;
}

/* Activity Stats */
.psigmx-activity-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.psigmx-activity-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.psigmx-activity-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.psigmx-activity-label {
    font-size: 12px;
    color: #64748b;
}

/* Issue Filter Controls */
.psigmx-issue-filter {
    background: linear-gradient(135deg, #5a95f5, #1769d2);
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: none;
    border: 2px solid transparent;
    text-align: left;
    font-size: 11px;
    color: #ffffff;
    cursor: pointer;
}


/*
 * Active state -- an issue filter that's currently narrowing the
 * table down. Distinct enough (darker gradient + ring + checkmark)
 * to notice at a glance, separate from the "always-blue" resting
 * state every filter badge has regardless of whether it's applied.
 */

.psigmx-issue-filter.active {
    background: linear-gradient(135deg, #1e3a8a, #0f172a);
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}


.psigmx-issue-filter.active::after {
    content: '✓ Active';
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #93c5fd;
}

.psigmx-issue-buttons {
    display: flex;
    gap: 12px;
}

.psigmx-issue-filter_counts {
    font-size: 24px;
    font-weight: 600;
}

.psigmx-audit-stats {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.psigmx-audit-stats span {
	padding: 15px 20px;
	border-radius: 10px;
	/* background: linear-gradient(135deg, #475569, #1e293b); */
	/* color: #ffffff; */
	font-size: 12px;
}

.psigmx-audit-stats strong {
    font-size: 24px;
    display: block;
}

.psigmx-audit-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.psigmx-audit-card {
    border: 1px solid #ddd;
    padding: 18px;
    border-radius: 12px;
    background: #ffffff;
}

.psigmx-audit-card-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.psigmx-audit-card-issue {
    color: #555555;
    margin-bottom: 12px;
}

.psigmx-audit-view {
    display: inline-block;
    padding: 6px 12px;
    background: #2271b1;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
}

.psigmx-audit-view:hover {
    opacity: 0.85;
}

/* Results Table (Inspector checks) -- same look as .psigmx-health-table */
.psigmx-inspector-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.psigmx-inspector-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.psigmx-inspector-table thead th {
    background: #f8fafc;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.psigmx-inspector-table tbody td {
    padding: 14px 16px;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    line-height: 1.55;
}

.psigmx-inspector-table tbody tr:hover {
    background: #f8fafc;
}

.psigmx-inspector-table tbody tr:last-child td {
    border-bottom: none;
}

.psigmx-inspector-table .col-status {
    width: 70px;
    text-align: center;
    font-size: 18px;
}

.psigmx-inspector-table .col-topic {
    width: 200px;
}

.psigmx-inspector-table .col-topic .psigmx-result-title {
    color: #111827;
    font-weight: 600;
}

.psigmx-inspector-table .col-message {
    color: #374151;
}

.psigmx-inspector-table .col-help {
    width: 90px;
    white-space: nowrap;
    text-align: center;
}

.psigmx-inspector-table tr.ignored .psigmx-result-value,
.psigmx-inspector-table tr.ignored .psigmx-result-message {
    color: #94a3b8;
}

.psigmx-result-value {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.psigmx-result-message {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* Reading Time under Word Count (and similar secondary values) */
.psigmx-result-subvalue {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 4px 0;
}

/* Small "learn more" link in the Help column */
.psigmx-help-icon {
    color: #2563eb;
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
}

.psigmx-help-icon:hover {
    color: #1d4ed8;
}

/* "Attention Needed" count, shown as a circle so it stands out */
.psigmx-attention-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.psigmx-attention-circle.warning {
    background: #dc2626;
}

/* SEO Title "Use Title | Site Name" button */
.psigmx-grab-title-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.psigmx-grab-title-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

/* AI Prompt button (SEO Title / Meta Description / ALT Text) --
   purple accent so it reads as a distinct "AI" action next to the
   neutral "Use Current Title" button. */
.psigmx-ai-prompt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    margin-left: 6px;
    padding: 6px 10px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6d28d9;
    cursor: pointer;
}

.psigmx-ai-prompt-btn:hover:not(:disabled) {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.psigmx-ai-prompt-btn.psigmx-ai-btn-copied {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #16a34a;
}

.psigmx-ai-prompt-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.psigmx-ai-prompt-btn .psigmx-icon-sparkles {
    flex: none;
    width: 13px;
    height: 13px;
}

/* ==========================================================================
4. TABLES & AUDIT DATA
========================================================================== */

/*
 * Main audit table
 *
 * The JS currently renders 9 columns:
 *
 * 1. Page / Title
 * 2. Page Type
 * 3. Score
 * 4. Page Hits
 * 5. SEO Title
 * 6. SEO Description
 * 7. Content
 * 8. Images
 * 9. Trust & Social
 *
 * IMPORTANT:
 * Do not use table-layout: fixed here.
 * The content columns need room to breathe.
 */

.psigmx-audit-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;

    /*
     * Let the drag-scroll handlers (mouse + touch) own horizontal
     * movement, while vertical page scrolling with a finger still
     * works normally.
     */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;

    cursor: grab;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;
}


/*
 * "Content has changed" banner -- shown above the Content Health
 * Check table when psigmxStartContentPolling() (psigmx-auditor.js)
 * notices something changed elsewhere while the table stayed open.
 */
.psigmx-content-changed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid red;
    border-radius: 10px;
    background: #febfbf;
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 600;
	position: fixed;
}

.psigmx-content-changed-banner button {
    flex: none;
}


/*
 * Active drag state, set by the mouse/touch handlers.
 */

.psigmx-audit-table-wrapper.dragging {
    cursor: grabbing;
}


/*
 * The table is deliberately wider than the viewport.
 *
 * The wrapper provides horizontal scrolling rather than
 * forcing all twelve columns into a tiny space.
 */

.psigmx-audit-table {
    width: 100%;
    min-width: 1830px;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: auto;

    background: #ffffff;
}


/*
 * HEADER
 */

.psigmx-audit-table thead th {
    background: #f8fafc;
    color: #111827;

    font-size: 13px;
    font-weight: 700;

    padding: 14px 16px;

    text-align: left;
    vertical-align: middle;

    border-bottom: 1px solid #e5e7eb;

    white-space: nowrap;
}


/*
 * BODY
 */

.psigmx-audit-table tbody td {
    padding: 14px 16px !important;

    vertical-align: top;

    border-bottom: 1px solid #f1f5f9;

    font-size: 13px;
    line-height: 1.55;

    color: #374151;

    overflow-wrap: anywhere;
    word-break: normal;

    background: #ffffff;
}


/*
 * Row hover
 */

.psigmx-audit-table tbody tr:hover td {
    background: #f8fafc;
}


/*
 * Last row
 */

.psigmx-audit-table tbody tr:last-child td {
    border-bottom: none;
}


/*
 * Strong text
 */

.psigmx-audit-table td strong {
    color: #111827;
}


/*
 * Prevent random nested divs from changing the layout.
 */

.psigmx-audit-table td div {
    line-height: 1.5;
}


/* ==========================================================================
   COLUMN WIDTHS

   Use semantic column classes rather than nth-child().

   This means columns can be added, removed or reordered in
   psigmx-auditor.js without having to renumber the CSS.
   Keep the same class on the <th> and <td> for each column.
   ========================================================================== */

.psigmx-audit-table .col-title {
    width: 220px;
    min-width: 220px;
}

.psigmx-audit-table .col-page-type {
    width: 110px;
    min-width: 110px;
    text-align: center;
}

.psigmx-audit-table .col-score {
    width: 70px;
    min-width: 70px;
    text-align: center;
}

.psigmx-audit-table .col-seo-title {
    width: 190px;
    min-width: 190px;
}

.psigmx-audit-table .col-seo-description {
    width: 210px;
    min-width: 210px;
}

.psigmx-audit-table .col-content-structure {
    width: 210px;
    min-width: 210px;
}

.psigmx-audit-table .col-external-links {
    width: 110px;
    min-width: 110px;
}

.psigmx-audit-table .col-content {
    width: 190px;
    min-width: 190px;
}

.psigmx-audit-table .col-images {
    width: 180px;
    min-width: 180px;
}

.psigmx-audit-table .col-trust {
    width: 210px;
    min-width: 210px;
}

.psigmx-audit-table .col-category {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    text-align: center;
}

.psigmx-audit-table .col-category .psigmx-category-badge {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}


/* ==========================================================================
   AUDIT CHECK ITEMS
   ========================================================================== */

.psigmx-audit-item {
    display: block;

    margin: 0;
    padding: 3px 0;

    line-height: 1.45;
}


/*
 * Separate checks inside a cell.
 */

.psigmx-audit-table hr {
    border: 0;
    border-top: 1px solid #f1f5f9;

    margin: 9px 0;
}


/*
 * Skipped / ignored checks
 */

.psigmx-audit-item-skipped {
    opacity: 0.55;
    font-style: italic;
}


/* ==========================================================================
   SCORE
   ========================================================================== */

.psigmx-audit-table .col-score {
    text-align: center;
    vertical-align: middle;
}


/* ==========================================================================
   PAGE TYPE
   ========================================================================== */

.psigmx-audit-table .col-page-type {
    text-align: center;
}


/* ==========================================================================
   CATEGORY
   ========================================================================== */

.psigmx-audit-table .col-category {
    text-align: center;
    vertical-align: top;
}

.psigmx-category-badge {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}


/* ==========================================================================
   SEO / CONTENT / SOCIAL COLUMNS
   ========================================================================== */

.psigmx-audit-table .col-seo-title,
.psigmx-audit-table .col-seo-description,
.psigmx-audit-table .col-content-structure,
.psigmx-audit-table .col-external-links,
.psigmx-audit-table .col-content,
.psigmx-audit-table .col-images,
.psigmx-audit-table .col-trust {
    vertical-align: top;
}


/* ==========================================================================
   SEO LENGTH STATUS BADGES

   Used for the SEO Title / SEO Description character-count status
   ("Perfect" / "Too short" / "Too long") and reused for the Word
   Count column's good/needs-more-content badge. These classes were
   already being applied in psigmx-auditor.js but had no matching
   CSS, so they rendered as plain unstyled text.
   ========================================================================== */

.psigmx-seo-length {
    display: inline-block;

    margin-top: 4px;

    padding: 2px 8px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


.psigmx-seo-length-good {
    background: #dcfce7;
    color: #15803d;
}


.psigmx-seo-length-warning {
    background: #fef9c3;
    color: #92610a;
}


.psigmx-seo-length-error {
    background: #fee2e2;
    color: #b91c1c;
}


/* ==========================================================================
   WORD COUNT
   ========================================================================== */

.psigmx-word-count {
    display: inline-block;

    padding: 2px 8px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}


.psigmx-word-count-meta {
    margin-top: 4px;

    font-size: 11px;
    color: #6b7280;
}


/*
 * Trust & Social should never be compressed into a tiny strip.
 */

.psigmx-audit-table .col-trust {
    min-width: 210px;
}


/* ==========================================================================
   SKIPPED FILTER
   ========================================================================== */

.psigmx-skip-filter {
    border: 1px dashed #94a3b8 !important;
}


.psigmx-skip-filter.active {
    background: #475569 !important;
    color: #ffffff !important;
    border-style: solid !important;
}


/* ==========================================================================
   ACTIVE FILTER INDICATORS -- search box, category dropdown
   ========================================================================== */

/*
 * Applied by JS (updateActiveFiltersSummary) whenever the search
 * box has a term in it, or the category dropdown has anything
 * other than "All Categories" selected, so it's obvious at a
 * glance that the table isn't showing everything.
 */

#psigmx-audit-search.psigmx-filter-active,
#psigmx-category-filter.psigmx-filter-active {
    border-color: #1769d2 !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(23, 105, 210, 0.15);
}


/* ==========================================================================
   ACTIVE FILTERS SUMMARY
   ========================================================================== */

/*
 * A plain-language line ("Showing: ...") that appears whenever any
 * filter/search is active, and disappears when nothing is. Kept
 * separate from the individual widgets so there's one obvious place
 * to look, rather than having to notice several small colour
 * changes at once.
 */

#psigmx-active-filters-summary {
    display: none;

    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0 0 12px 0;
    padding: 8px 12px;

    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;

    font-size: 12px;
    color: #1e3a8a;
}


#psigmx-active-filters-summary.psigmx-visible {
    display: flex;
}


#psigmx-active-filters-summary strong {
    font-weight: 700;
}


.psigmx-active-filter-chip {
    display: inline-block;

    padding: 2px 8px;
    border-radius: 999px;

    background: #dbeafe;
    color: #1e3a8a;

    font-weight: 600;
}


/* ==========================================================================
   MOBILE / SMALL SCREENS
   ========================================================================== */

@media (max-width: 900px) {

    /*
     * Keep the table readable.
     * Do NOT shrink the columns.
     * Let the wrapper scroll horizontally.
     */

    .psigmx-audit-table {
        min-width: 1830px;
    }

    .psigmx-audit-table thead th,
    .psigmx-audit-table tbody td {
        padding: 12px 14px !important;
    }

}


@media (max-width: 600px) {

    .psigmx-audit-table-wrapper {
        border-radius: 10px;
    }

}

/* ==========================================================================
   5. SERP PREVIEW (Google Style)
   ========================================================================== */

.psigmx-serp-preview {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-family: Arial, sans-serif;
	margin-top: 26px;	
}

.psigmx-serp-label {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 8px;
}

.psigmx-serp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.psigmx-serp-favicon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.psigmx-serp-site {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.psigmx-serp-site span#psigmx-serp-sitename {
    font-size: 13px;
    color: #1f2937;
}

.psigmx-serp-site span#psigmx-serp-url {
    font-size: 12px;
    color: #4d5156;
}

.psigmx-serp-url {
    display: block;
    font-size: 12px;
    color: rgb(112, 117, 122);
    padding-left: 27px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.psigmx-serp-title {
    font-size: 18px;
    line-height: 1.3;
    color: #1a0dab;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psigmx-serp-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #4d5156;
    margin-top: 3px;
}


/* ==========================================================================
   5b. SCORE BADGE (Page Score, shared by Inspector + Content List)
   ========================================================================== */

.psigmx-score-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}

.psigmx-score-good {
    background: #dcfce7;
    color: #15803d;
}

.psigmx-score-warning {
    background: #fef3c7;
    color: #b45309;
}

.psigmx-score-poor {
    background: #fee2e2;
    color: #b91c1c;
}

.psigmx-score-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.psigmx-score-refresh-btn:hover {
    background: #f1f5f9;
}

.psigmx-score-refresh-btn.spinning {
    animation: psigmx-spin 0.8s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes psigmx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ==========================================================================
   5c. SOCIAL SHARE PREVIEW (Facebook / LinkedIn / Twitter-X)
   ========================================================================== */

.psigmx-social-modal-box {
    width: 380px;
}

.psigmx-social-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.psigmx-social-tab {
    flex: 1;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
}

.psigmx-social-tab.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.psigmx-social-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    background: #fff;
}

.psigmx-social-card-image-wrap {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.psigmx-social-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.psigmx-social-card-image-empty {
    font-size: 12px;
    color: #94a3b8;
    display: none;
}

.psigmx-social-card-body {
    padding: 10px 12px 14px 12px;
}

.psigmx-social-card-host {
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #64748b;
    margin-bottom: 3px;
}

.psigmx-social-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
}

.psigmx-social-card-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: #64748b;
    margin-top: 3px;
}


/* ==========================================================================
   6. MODALS, OVERLAYS & INSPECTOR PANEL
   ========================================================================== */

body.psigmx-modal-open {
    overflow: hidden;
    touch-action: none;
}

#psigmx-modal {
    display: flex;
}

.psigmx_modal_group {
    backdrop-filter: blur(9px);
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    z-index: 999999;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    left: 0;
}

.psigmx-auditor-box {
    background: rgba(81, 131, 151, 0.25);
    margin: 0 auto;
    padding: 0 0 30px 0;
    border-radius: 15px;
    position: relative;
    max-width: 1000px;
    max-height: 97vh;
    overflow-y: auto;
    overflow-x: hidden;
    color: #464545;
    font-family: Arial, sans-serif;
    top: 17px;
}

#psigmx-auditor-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Simple Modals */
.psigmx-simple-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.psigmx-simple-modal-box {
    width: 600px;
    max-width: 90%;
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.psigmx-simple-modal-box h2 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1e293b;
}

.psigmx-simple-modal-close {
    position: absolute;
    right: 18px;
    top: 15px;
    border: 0;
    background: none;
    font-size: 28px;
    cursor: pointer;
    color: #64748b;
}

.psigmx-simple-modal-close:hover {
    color: #ef4444;
}

.psigmx-modal-body {
    margin-top: 20px;
    color: #475569;
}

.psigmx-test-list {
    list-style: none;
    padding: 0;
}

.psigmx-test-list li {
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.psigmx-test-list i {
    color: #16a34a;
    margin-right: 8px;
}

.psigmx-detail-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.psigmx-detail-row strong {
    min-width: 120px;
}

/* Google & Schema Modal Shared Backgrounds */
.psigmx-google-modal,
.psigmx-schema-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.35);
   /* backdrop-filter: blur(3px); */
}

.psigmx-google-modal-box {
    max-width: 640px;
    margin: 8vh auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.psigmx-schema-modal-box {
    width: 80%;
    max-width: 1000px;
    height: 97vh;
    margin: 5vh auto;
    background: #111827;
    color: #ffffff;
    border-radius: 18px;
    padding: 30px;
    overflow: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.psigmx-schema-modal pre {
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 13px;
}

.psigmx-google-close,
.psigmx-schema-close {
    position: absolute;
    top: 12px;
    right: 15px;
    border: 0;
    background: none;
    font-size: 28px;
    cursor: pointer;
    color: #666666;
}

/* Inspector Box Panel */
.psigmx-box {
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    position: relative;
    box-sizing: border-box;
}

.psigmx-box::-webkit-scrollbar {
    width: 100px;
}

.psigmx-box::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.psigmx-box::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#psigmx-close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

#psigmx-close:hover {
    color: #0f172a;
}


/* ==========================================================================
   7. TOOLS, UTILITIES & FORM FIELDS
   ========================================================================== */

.psigmx-tools {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .psigmx-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    .psigmx-tools {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.psigmx-tools h3 {
    grid-column: 1 / -1;
    margin: 0 0 6px;
    font-size: 15px;
    color: #0f172a;
}

.psigmx-tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.psigmx-tool-card:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

.psigmx-tool-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.psigmx-tool-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.psigmx-tool-content strong {
    color: #0f172a;
    font-size: 13px;
}

.psigmx-tool-content span {
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

/* Editable Live Fields */
.psigmx-inline-field {
    margin-bottom: 8px;
}

.psigmx-inline-field input.psigmx-live-field,
.psigmx-inline-field textarea.psigmx-live-field {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #ffffff;
}

.psigmx-inline-field textarea.psigmx-live-field {
    resize: vertical;
}

.psigmx-inline-field .psigmx-char-count {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
	margin-left: 4px;
}

.psigmx-inline-field .psigmx-char-count.psigmx-count-good {
    color: #16a34a;
}

.psigmx-inline-field .psigmx-char-count.psigmx-count-warning {
    color: #ea580c;
}

/* Save Pills & Dismiss Actions */
.psigmx-save-pill {
    display: inline-block;
    margin-top: 4px;
    margin-left: 8px;
    font-size: 11px;
    color: #64748b;
}

.psigmx-save-pill.psigmx-pill-saved {
    color: #16a34a;
    font-weight: 600;
}

.psigmx-save-pill.psigmx-pill-error {
    color: #dc2626;
    font-weight: 600;
}

.psigmx-dismiss,
.psigmx-restore {
    display: inline-block;
    margin-top: 6px;
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 11px;
    padding: 2px 9px;
    cursor: pointer;
    color: #64748b;
}

.psigmx-dismiss:hover,
.psigmx-restore:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.psigmx-result-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.psigmx-result-item:last-child {
    border-bottom: 0;
}

.psigmx-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.psigmx-summary-row {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
}

/* Spinner Animation */
.psigmx-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #cbd5e1;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: psigmx-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
}

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


/* ==========================================================================
   8. INSPECTOR PRELOADER & ERROR STATE
   ========================================================================== */

/* Preloader shown while the inspector's first analysis is running */
.psigmx-preloader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 30px;
    text-align: center;
    color: #464545;
    font-family: Arial, sans-serif;
}

.psigmx-preloader p {
    margin: 0;
    font-size: 15px;
}

.psigmx-spinner-large {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 4px solid #cbd5e1;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: psigmx-spin 0.7s linear infinite;
}

/* Error state shown when analysis fails or the request never completes */
.psigmx-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 80px 30px;
    text-align: center;
    font-family: Arial, sans-serif;
}

.psigmx-error-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #b91c1c;
}

.psigmx-error-desc {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #464545;
}


/* ==========================================================================
   9. MOBILE FLOATING TRIGGER
   ========================================================================== */

/*
 * Always-visible floating trigger + its popup menu (replaces the two
 * links that used to live in the WordPress admin bar).
 */

.psigmx-mobile-wrap {
    position: fixed;
    z-index: 999998; /* one below the modal overlay's 999999 */
}

.psigmx-mobile-btn {
background: no-repeat;
  width: 62px;
  height: 62px;
  border: 1px solid #c6bfbf;
  border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    position: relative;
}

/*
 * Small score badge overlaid on the floating trigger button --
 * always the CURRENT PAGE's score (the number most relevant to
 * whatever the person is looking at). Colour mirrors the same
 * good/warning/poor scale used everywhere else in the plugin; "!"
 * (psigmx-score-unknown) means the page hasn't been analysed yet.
 */
.psigmx-fab-score-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: #94a3b8;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.psigmx-fab-score-badge.psigmx-score-good {
    background: #16a34a;
}

.psigmx-fab-score-badge.psigmx-score-warning {
    background: #ea580c;
}

.psigmx-fab-score-badge.psigmx-score-poor {
    background: #dc2626;
}

.psigmx-fab-score-badge.psigmx-score-unknown {
    background: #94a3b8;
}


.psigmx-mobile-menu {
    position: absolute;
    min-width: 235px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    padding: 6px;
    font-family: Arial, sans-serif;
}

.psigmx-mobile-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.psigmx-mobile-menu a:hover {
    background: #f1f5f9;
}

.psigmx-mobile-menu a i {
    color: #64748b;
    width: 14px;
    text-align: center;
}

.psigmx-mobile-menu .psigmx-menu-label {
    flex: 1 1 auto;
}

/*
 * Score badge shown on the same line as its dropdown item -- Page
 * Score next to "Analyse this page", site average next to "Content
 * Checklist", Website Health score next to "Website Health Check".
 * Same colour scale as the floating button's badge.
 */
.psigmx-menu-score-badge {
    flex: none;
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #94a3b8;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.psigmx-menu-score-badge.psigmx-score-good {
    background: #dcfce7;
    color: #15803d;
}

.psigmx-menu-score-badge.psigmx-score-warning {
    background: #fef3c7;
    color: #b45309;
}

.psigmx-menu-score-badge.psigmx-score-poor {
    background: #fee2e2;
    color: #b91c1c;
}

.psigmx-menu-score-badge.psigmx-score-unknown {
    background: #f1f5f9;
    color: #64748b;
}

.psigmx-mobile-wrap.pos-top-right,
.psigmx-mobile-wrap.pos-top-left {
    top: 70px; /* clears WP's admin bar */
}

.psigmx-mobile-wrap.pos-bottom-right,
.psigmx-mobile-wrap.pos-bottom-left {
    bottom: 20px;
}

.psigmx-mobile-wrap.pos-top-right,
.psigmx-mobile-wrap.pos-bottom-right {
    right: 14px;
}

.psigmx-mobile-wrap.pos-top-left,
.psigmx-mobile-wrap.pos-bottom-left {
    left: 14px;
}

.psigmx-mobile-wrap.pos-top-right .psigmx-mobile-menu,
.psigmx-mobile-wrap.pos-top-left .psigmx-mobile-menu {
    top: 60px;
}

.psigmx-mobile-wrap.pos-bottom-right .psigmx-mobile-menu,
.psigmx-mobile-wrap.pos-bottom-left .psigmx-mobile-menu {
    bottom: 60px;
}

.psigmx-mobile-wrap.pos-top-right .psigmx-mobile-menu,
.psigmx-mobile-wrap.pos-bottom-right .psigmx-mobile-menu {
    right: 0;
}

.psigmx-mobile-wrap.pos-top-left .psigmx-mobile-menu,
.psigmx-mobile-wrap.pos-bottom-left .psigmx-mobile-menu {
    left: 0;
}

/* =========================================================
   PSIGMX Website Health Audit
========================================================= */

.psigmx-site-health-header {
    margin-bottom: 18px;
}

.psigmx-site-health-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3;
}

.psigmx-site-health-header p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.psigmx-site-health-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.psigmx-health-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.psigmx-health-table thead th {
    background: #f8fafc;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.psigmx-health-table tbody td {
    padding: 14px 16px;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    line-height: 1.55;
}

.psigmx-health-table tbody tr:hover {
    background: #f8fafc;
}

.psigmx-health-table .col-status {
    width: 70px;
    text-align: center;
    font-size: 18px;
}

.psigmx-health-table .col-topic {
    width: 220px;
}

.psigmx-health-table .col-topic strong {
    color: #111827;
}

.psigmx-health-table .col-message {
    color: #374151;
}

.psigmx-health-table .col-help {
    width: 120px;
    white-space: nowrap;
}

.psigmx-health-table .col-help a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.psigmx-health-table .col-help a:hover {
    text-decoration: underline;
}

.psigmx-health-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.psigmx-health-error {
    padding: 16px 18px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
}

@media (max-width: 900px) {

    .psigmx-health-table {
        min-width: 640px;
    }

    .psigmx-health-table thead th,
    .psigmx-health-table tbody td {
        padding: 12px 14px;
    }
}

.psigmx-social-close {
	position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  border: 0;
  background: none;
  cursor: pointer;
}