/**
 * WCAG Guard Admin Styles
 */

/* Cards Layout */
.garsen-ag-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.garsen-ag-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.garsen-ag-card h2 {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #c3c4c7;
    font-size: 14px;
    font-weight: 600;
    background: #f6f7f7;
}

.garsen-ag-card-content {
    padding: 16px;
}

.garsen-ag-card-error {
    border-color: #d63638;
}

.garsen-ag-card-error h2 {
    background: #fcf0f1;
    color: #d63638;
}

/* Status Indicator */
.garsen-ag-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.garsen-ag-status-indicator.connected .status-dot {
    background: #00a32a;
}

.garsen-ag-status-indicator.not-connected .status-dot {
    background: #d63638;
}

.garsen-ag-status-indicator.connected .status-text {
    color: #00a32a;
}

.garsen-ag-status-indicator.not-connected .status-text {
    color: #d63638;
}

/* Site ID */
.garsen-ag-site-id {
    margin-top: 12px;
    font-size: 13px;
}

.garsen-ag-site-id code {
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 2px;
}

/* Help Text */
.garsen-ag-help,
.garsen-ag-action-help {
    margin-top: 12px;
    color: #646970;
    font-size: 13px;
}

.garsen-ag-no-scan {
    color: #646970;
    font-style: italic;
}

/* Scan Status */
.garsen-ag-scan-status p {
    margin: 8px 0;
}

.scan-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.scan-status-badge.status-idle {
    background: #f0f0f1;
    color: #646970;
}

.scan-status-badge.status-queued {
    background: #f0f6fc;
    color: #0a4b78;
}

.scan-status-badge.status-running,
.scan-status-badge.status-processing {
    background: #fcf9e8;
    color: #996800;
}

.scan-status-badge.status-done,
.scan-status-badge.status-completed {
    background: #edfaef;
    color: #007017;
}

.scan-status-badge.status-failed {
    background: #fcf0f1;
    color: #d63638;
}

/* Severity Grid */
.garsen-ag-summary {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.garsen-ag-summary h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
}

.severity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.severity-item {
    text-align: center;
    padding: 12px 8px;
    border-radius: 4px;
}

.severity-count {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.severity-label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
}

.severity-critical {
    background: #fcf0f1;
    color: #d63638;
}

.severity-serious {
    background: #fef8ee;
    color: #b32d2e;
}

.severity-moderate {
    background: #fcf9e8;
    color: #996800;
}

.severity-minor {
    background: #f0f6fc;
    color: #0a4b78;
}

/* Report Link */
.garsen-ag-report-link {
    margin-top: 16px;
}

.garsen-ag-report-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-left: 4px;
}

/* Actions */
.garsen-ag-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Error Message */
.garsen-ag-error-message {
    color: #d63638;
    margin: 0 0 8px;
}

.garsen-ag-error-time {
    color: #646970;
    font-size: 12px;
    margin: 0;
}

/* ========================================
   Settings Page - Clean Design
   ======================================== */

.garsen-ag-subtitle {
    color: #646970;
    font-size: 14px;
    margin: 5px 0 0;
}

.garsen-ag-settings-layout {
    max-width: 800px;
}

/* Panel Styles */
.garsen-ag-panel {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.garsen-ag-panel.is-connected {
    border-left: 4px solid #00a32a;
}

.garsen-ag-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f6f7f7;
    border-bottom: 1px solid #c3c4c7;
}

.garsen-ag-panel-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.garsen-ag-panel-header h2 .dashicons {
    color: #2271b1;
}

.garsen-ag-panel-body {
    padding: 0 20px 20px;
}

.garsen-ag-panel-body .form-table {
    margin-top: 0;
}

.garsen-ag-panel-body .form-table th {
    width: 200px;
    padding-left: 0;
}

/* Badges */
.garsen-ag-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.garsen-ag-badge.badge-success {
    background: #d4edda;
    color: #155724;
}

.garsen-ag-badge.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.garsen-ag-badge.badge-error {
    background: #f8d7da;
    color: #721c24;
}

/* Input Wrap */
.garsen-ag-input-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.garsen-ag-input-wrap .regular-text {
    flex: 1;
    max-width: 400px;
}

/* Notice */
.garsen-ag-notice {
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.garsen-ag-notice.notice-success {
    background: #d4edda;
    border-left: 4px solid #00a32a;
}

/* Inline Status */
.garsen-ag-inline-status {
    margin-left: 10px;
    font-weight: 500;
}

.garsen-ag-inline-status.success {
    color: #00a32a;
}

.garsen-ag-inline-status.error {
    color: #d63638;
}

/* Switch Toggle */
.garsen-ag-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

.garsen-ag-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.garsen-ag-switch-slider {
    width: 44px;
    height: 24px;
    background: #c3c4c7;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.garsen-ag-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.garsen-ag-switch input:checked + .garsen-ag-switch-slider {
    background: #2271b1;
}

.garsen-ag-switch input:checked + .garsen-ag-switch-slider::after {
    transform: translateX(20px);
}

.garsen-ag-switch input:focus + .garsen-ag-switch-slider {
    box-shadow: 0 0 0 2px #2271b1;
}

.garsen-ag-switch-label {
    color: #1d2327;
}

/* Schedule Row */
.garsen-ag-schedule-row.hidden {
    display: none;
}

/* Legacy styles for backward compatibility */
.garsen-ag-status {
    margin-left: 10px;
    display: inline-block;
}

.garsen-ag-status .status-connected {
    color: #00a32a;
    font-weight: 500;
}

.garsen-ag-status .status-not-connected {
    color: #d63638;
    font-weight: 500;
}

.garsen-ag-status .status-site-id {
    color: #646970;
    font-size: 12px;
    margin-left: 4px;
}

/* Loading States */
.garsen-ag-loading {
    opacity: 0.6;
    pointer-events: none;
}

.garsen-ag-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: garsen-ag-spin 1s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}

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

/* Notices */
.garsen-ag-notice {
    padding: 12px;
    margin: 15px 0;
    border-left: 4px solid;
    background: #fff;
}

.garsen-ag-notice-success {
    border-color: #00a32a;
}

.garsen-ag-notice-error {
    border-color: #d63638;
}

/* Responsive */
@media screen and (max-width: 782px) {
    .garsen-ag-cards {
        grid-template-columns: 1fr;
    }

    .severity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .garsen-ag-settings .form-table th {
        width: auto;
    }

    /* Settings Page Responsive */
    .garsen-ag-settings-grid {
        grid-template-columns: 1fr;
    }

    .garsen-ag-field-row {
        grid-template-columns: 1fr;
    }

    .garsen-ag-header h1 {
        font-size: 22px;
    }

    .help-links {
        flex-direction: column;
        gap: 12px;
    }

    .garsen-ag-actions {
        flex-direction: column;
    }

    .garsen-ag-actions .button {
        width: 100%;
        justify-content: center;
    }

    .garsen-ag-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .garsen-ag-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .garsen-ag-welcome-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   Dashboard Page - Enhanced Design
   ======================================== */

/* Welcome Banner */
.garsen-ag-welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);
    color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.garsen-ag-welcome-banner .welcome-content h2 {
    color: #fff;
    margin: 0 0 10px;
    font-size: 24px;
}

.garsen-ag-welcome-banner .welcome-content p {
    margin: 0 0 20px;
    opacity: 0.9;
    font-size: 15px;
}

.garsen-ag-welcome-banner .button-hero {
    background: #fff;
    color: #2271b1;
    border: none;
    font-weight: 600;
}

.garsen-ag-welcome-banner .button-hero:hover {
    background: #f0f0f1;
    color: #135e96;
}

.garsen-ag-welcome-banner .welcome-icon .dashicons {
    font-size: 80px;
    width: 80px;
    height: 80px;
    opacity: 0.3;
}

/* Stats Row */
.garsen-ag-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.garsen-ag-stat-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #fff;
}

.stat-icon.icon-success { background: #00a32a; }
.stat-icon.icon-warning { background: #dba617; }
.stat-icon.icon-error { background: #d63638; }
.stat-icon.icon-primary { background: #2271b1; }
.stat-icon.icon-info { background: #72aee6; }

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 12px;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.stat-value.text-success { color: #00a32a; }
.stat-value.text-warning { color: #dba617; }
.stat-value.text-error { color: #d63638; }

/* Dashboard Grid */
.garsen-ag-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
    margin-bottom: 24px;
}

.garsen-ag-main-column .garsen-ag-panel {
    margin-bottom: 24px;
}

.garsen-ag-side-column .garsen-ag-panel {
    margin-bottom: 16px;
}

/* Badge variants */
.garsen-ag-badge.badge-completed,
.garsen-ag-badge.badge-success {
    background: #d4edda;
    color: #155724;
}

.garsen-ag-badge.badge-processing,
.garsen-ag-badge.badge-queued {
    background: #cce5ff;
    color: #004085;
}

.garsen-ag-badge.badge-failed,
.garsen-ag-badge.badge-error {
    background: #f8d7da;
    color: #721c24;
}

/* Severity Chart */
.garsen-ag-severity-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.severity-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.severity-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.severity-name {
    font-weight: 600;
    font-size: 13px;
}

.severity-name.critical { color: #d63638; }
.severity-name.serious { color: #dba617; }
.severity-name.moderate { color: #2271b1; }
.severity-name.minor { color: #646970; }

.severity-bar-header .severity-count {
    font-weight: 600;
    font-size: 14px;
    color: #1d2327;
}

.severity-bar {
    height: 8px;
    background: #f0f0f1;
    border-radius: 4px;
    overflow: hidden;
}

.severity-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.severity-bar-fill.critical { background: #d63638; }
.severity-bar-fill.serious { background: #dba617; }
.severity-bar-fill.moderate { background: #2271b1; }
.severity-bar-fill.minor { background: #a7aaad; }

.scan-time-info {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e4e7;
    color: #646970;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.scan-time-info .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Empty State */
.garsen-ag-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #646970;
}

.garsen-ag-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #c3c4c7;
    margin-bottom: 16px;
}

.garsen-ag-empty-state p {
    margin: 0 0 8px;
}

/* Scan Pending */
.garsen-ag-scan-pending {
    text-align: center;
    padding: 40px 20px;
}

.garsen-ag-scan-pending .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #2271b1;
}

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

.dashicons.spin {
    animation: spin 1s linear infinite;
}

/* Action Buttons */
.garsen-ag-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.garsen-ag-full-btn {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.garsen-ag-full-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Export Buttons */
.garsen-ag-export-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.garsen-ag-export-buttons button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tier/Upgrade Notice */
.garsen-ag-upgrade-notice {
    text-align: center;
}

.garsen-ag-tier-notice {
    color: #d63638;
    font-weight: 500;
    margin: 8px 0 12px;
}

.garsen-ag-tier-notice .dashicons {
    vertical-align: middle;
    margin-right: 4px;
}

/* Panel Error */
.garsen-ag-panel.panel-error {
    border-color: #d63638;
}

.garsen-ag-panel.panel-error .garsen-ag-panel-header {
    background: #fcf0f1;
}

.garsen-ag-panel.panel-error .garsen-ag-panel-header h2 {
    color: #d63638;
}

/* Links List */
.garsen-ag-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.garsen-ag-links-list li {
    margin: 0;
    padding: 0;
}

.garsen-ag-links-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #2271b1;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f1;
    transition: color 0.2s;
}

.garsen-ag-links-list li:last-child a {
    border-bottom: none;
}

.garsen-ag-links-list a:hover {
    color: #135e96;
}

.garsen-ag-links-list .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #646970;
}

/* ========================================
   Scan Detail Page
   ======================================== */

.garsen-ag-scan-header {
    display: flex;
    gap: 30px;
    padding: 20px;
    align-items: flex-start;
}

.garsen-ag-score-display {
    text-align: center;
    flex-shrink: 0;
}

.garsen-ag-score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f0f0f1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #c3c4c7;
}

.garsen-ag-score-circle.score-good {
    border-color: #00a32a;
    background: #edfaef;
}

.garsen-ag-score-circle.score-warning {
    border-color: #dba617;
    background: #fcf9e8;
}

.garsen-ag-score-circle.score-poor {
    border-color: #d63638;
    background: #fcf0f1;
}

#scan-score-value {
    font-size: 32px;
    font-weight: 700;
    color: #1d2327;
}

.garsen-ag-score-label {
    margin-top: 8px;
    font-size: 12px;
    text-transform: uppercase;
    color: #646970;
    font-weight: 600;
}

.garsen-ag-scan-meta {
    flex: 1;
}

.garsen-ag-meta-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f1;
}

.garsen-ag-meta-row:last-child {
    border-bottom: none;
}

.garsen-ag-meta-label {
    font-weight: 600;
    color: #646970;
    min-width: 120px;
}

/* Issue Summary Cards */
.garsen-ag-issue-summary {
    padding: 20px;
    border-top: 1px solid #c3c4c7;
}

.garsen-ag-issue-summary h3 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
}

.garsen-ag-severity-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.garsen-ag-severity-card {
    text-align: center;
    padding: 16px 12px;
    border-radius: 6px;
}

.garsen-ag-severity-card .severity-count {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.garsen-ag-severity-card .severity-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Issues Header */
.garsen-ag-issues-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #c3c4c7;
    background: #f6f7f7;
}

.garsen-ag-issues-header h2 {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
}

.garsen-ag-issues-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

.garsen-ag-issues-filters label {
    font-weight: 500;
    font-size: 13px;
}

.garsen-ag-issues-filters select {
    min-width: 120px;
}

/* Issues List */
.garsen-ag-issues-list {
    padding: 0;
}

.garsen-ag-issue-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f1;
}

.garsen-ag-issue-item:last-child {
    border-bottom: none;
}

.garsen-ag-issue-item.severity-critical {
    border-left: 4px solid #d63638;
}

.garsen-ag-issue-item.severity-serious {
    border-left: 4px solid #dba617;
}

.garsen-ag-issue-item.severity-moderate {
    border-left: 4px solid #2271b1;
}

.garsen-ag-issue-item.severity-minor {
    border-left: 4px solid #a7aaad;
}

.issue-header {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.issue-severity-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.issue-severity-badge.severity-critical {
    background: #fcf0f1;
    color: #d63638;
}

.issue-severity-badge.severity-serious {
    background: #fef8ee;
    color: #b32d2e;
}

.issue-severity-badge.severity-moderate {
    background: #f0f6fc;
    color: #2271b1;
}

.issue-severity-badge.severity-minor {
    background: #f0f0f1;
    color: #646970;
}

.issue-rule {
    font-family: monospace;
    font-size: 12px;
    color: #646970;
}

.issue-wcag {
    font-size: 11px;
    padding: 2px 6px;
    background: #e7e8ea;
    border-radius: 3px;
    color: #50575e;
}

.issue-message {
    font-size: 14px;
    color: #1d2327;
    line-height: 1.5;
}

.issue-selector {
    margin-top: 10px;
}

.issue-selector code {
    display: block;
    padding: 10px 12px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.issue-help {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f0f6fc;
    border-radius: 4px;
    font-size: 13px;
    color: #2271b1;
}

.issue-help .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

.issue-help a {
    margin-left: 8px;
}

.issue-page {
    margin-top: 8px;
    font-size: 12px;
    color: #646970;
}

.issue-page .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* Pagination */
.garsen-ag-pagination {
    padding: 16px 20px;
    text-align: center;
    border-top: 1px solid #f0f0f1;
}

/* Table Pagination (Scan History) */
.garsen-ag-table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-top: 12px;
    border-top: 1px solid #e2e4e7;
}

.garsen-ag-table-pagination .pagination-info {
    font-size: 13px;
    color: #646970;
}

.garsen-ag-table-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.garsen-ag-table-pagination .pagination-current {
    font-size: 13px;
    color: #1d2327;
    padding: 0 8px;
}

.garsen-ag-table-pagination .button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.garsen-ag-table-pagination .button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

.garsen-ag-table-pagination .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media screen and (max-width: 600px) {
    .garsen-ag-table-pagination {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .garsen-ag-table-pagination .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Loading state in detail page */
#scan-detail-loading {
    padding: 40px;
    text-align: center;
}

#scan-detail-loading .spinner {
    float: none;
    margin: 0 10px 0 0;
}

/* Responsive for scan detail */
@media screen and (max-width: 782px) {
    .garsen-ag-scan-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .garsen-ag-meta-row {
        flex-direction: column;
        gap: 4px;
    }

    .garsen-ag-meta-label {
        min-width: auto;
    }

    .garsen-ag-severity-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .garsen-ag-issues-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .issue-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   PRO Feature Gating / Upgrade Overlay
   ======================================== */

.garsen-ag-pro-feature {
    position: relative;
}

.garsen-ag-pro-feature.is-locked .garsen-ag-card-content {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(50%);
}

.garsen-ag-pro-badge {
    display: inline-block;
    background: linear-gradient(135deg, #dba617 0%, #c49a10 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.garsen-ag-upgrade-overlay {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 4px 4px;
}

.garsen-ag-upgrade-content {
    text-align: center;
    padding: 30px;
    max-width: 400px;
}

.garsen-ag-upgrade-content .dashicons-lock {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #c3c4c7;
    margin-bottom: 16px;
}

.garsen-ag-upgrade-content h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #1d2327;
}

.garsen-ag-upgrade-content p {
    margin: 0 0 20px;
    color: #646970;
    font-size: 14px;
    line-height: 1.5;
}

.garsen-ag-upgrade-content .button-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);
    border: none;
    padding: 8px 20px;
    font-size: 14px;
}

.garsen-ag-upgrade-content .button-primary:hover {
    background: linear-gradient(135deg, #135e96 0%, #0a4b78 100%);
}

.garsen-ag-upgrade-content .button-primary .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ========================================
   Site Health Diagnostics
   ======================================== */

.garsen-ag-diagnostics-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.garsen-ag-diagnostic-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid;
}

.garsen-ag-diagnostic-card .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.garsen-ag-diagnostic-card.diagnostic-js-errors {
    background: #fcf0f1;
    border-color: #f5c6cb;
}

.garsen-ag-diagnostic-card.diagnostic-js-errors .dashicons {
    color: #d63638;
}

.garsen-ag-diagnostic-card.diagnostic-network-errors {
    background: #fef8ee;
    border-color: #fcecc7;
}

.garsen-ag-diagnostic-card.diagnostic-network-errors .dashicons {
    color: #dba617;
}

.garsen-ag-diagnostic-card.diagnostic-console-warnings {
    background: #fcf9e8;
    border-color: #f0e68c;
}

.garsen-ag-diagnostic-card.diagnostic-console-warnings .dashicons {
    color: #996800;
}

.diagnostic-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.diagnostic-count {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #1d2327;
}

.diagnostic-label {
    font-size: 12px;
    color: #646970;
    text-transform: uppercase;
    font-weight: 500;
}

.garsen-ag-diagnostics-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #f0f6fc;
    border: 1px solid #c5d9ed;
    border-radius: 4px;
    margin-bottom: 16px;
}

.garsen-ag-diagnostics-disclaimer .dashicons {
    color: #2271b1;
    flex-shrink: 0;
    margin-top: 2px;
}

.garsen-ag-diagnostics-disclaimer p {
    margin: 0;
    font-size: 13px;
    color: #2271b1;
    line-height: 1.5;
}

.garsen-ag-diagnostics-pages {
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    overflow: hidden;
}

.garsen-ag-diagnostic-page {
    border-bottom: 1px solid #e2e4e7;
}

.garsen-ag-diagnostic-page:last-child {
    border-bottom: none;
}

.garsen-ag-diagnostic-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f6f7f7;
    cursor: pointer;
    transition: background 0.2s;
}

.garsen-ag-diagnostic-page-header:hover {
    background: #f0f0f1;
}

.garsen-ag-diagnostic-page-header .page-url {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.garsen-ag-diagnostic-page-header .page-url .dashicons {
    color: #646970;
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.garsen-ag-diagnostic-page-header .page-url span {
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.garsen-ag-diagnostic-page-header .page-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.diagnostic-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.diagnostic-badge.badge-js {
    background: #f8d7da;
    color: #721c24;
}

.diagnostic-badge.badge-network {
    background: #ffeeba;
    color: #856404;
}

.diagnostic-badge.badge-console {
    background: #fff3cd;
    color: #856404;
}

.garsen-ag-diagnostic-page-content {
    display: none;
    padding: 16px;
    background: #fff;
}

.garsen-ag-diagnostic-page.is-expanded .garsen-ag-diagnostic-page-content {
    display: block;
}

.garsen-ag-diagnostic-page.is-expanded .garsen-ag-diagnostic-page-header .dashicons-arrow-right-alt2 {
    transform: rotate(90deg);
}

.garsen-ag-diagnostic-list {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 4px;
}

.garsen-ag-diagnostic-list:last-child {
    margin-bottom: 0;
}

.garsen-ag-diagnostic-list.list-js-errors {
    background: #fcf0f1;
}

.garsen-ag-diagnostic-list.list-network-errors {
    background: #fef8ee;
}

.garsen-ag-diagnostic-list.list-console-warnings {
    background: #fcf9e8;
}

.garsen-ag-diagnostic-list h4 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.garsen-ag-diagnostic-list h4 .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.garsen-ag-diagnostic-list.list-js-errors h4 {
    color: #d63638;
}

.garsen-ag-diagnostic-list.list-network-errors h4 {
    color: #dba617;
}

.garsen-ag-diagnostic-list.list-console-warnings h4 {
    color: #996800;
}

.garsen-ag-diagnostic-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.garsen-ag-diagnostic-list li {
    padding: 6px 0;
    font-family: monospace;
    font-size: 11px;
    color: #1d2327;
    word-break: break-all;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.garsen-ag-diagnostic-list li:last-child {
    border-bottom: none;
}

.garsen-ag-diagnostic-list .more-items {
    font-style: italic;
    color: #646970;
    font-family: inherit;
}

/* Loading state for diagnostics */
.garsen-ag-loading-state {
    padding: 30px;
    text-align: center;
    color: #646970;
}

.garsen-ag-loading-state .spinner {
    float: none;
    margin: 0 8px 0 0;
}

/* Responsive diagnostics */
@media screen and (max-width: 782px) {
    .garsen-ag-diagnostics-summary {
        grid-template-columns: 1fr;
    }

    .garsen-ag-diagnostic-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .garsen-ag-diagnostic-page-header .page-badges {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* ============================================
   TABBED INTERFACE STYLES
   ============================================ */

/* Main Tabs */
.garsen-ag-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 8px 8px 0;
}

.garsen-ag-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #50575e;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}

.garsen-ag-tab:hover {
    background: #fff;
    color: #1d2327;
}

.garsen-ag-tab.active {
    background: #fff;
    color: #1d2327;
    border-bottom-color: #fff;
}

.garsen-ag-tab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.garsen-ag-tab-count {
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Tab Panels */
.garsen-ag-tab-panel {
    display: none;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 0 0 4px 4px;
    padding: 20px;
}

.garsen-ag-tab-panel.active {
    display: block;
}

/* ============================================
   SUMMARY TAB
   ============================================ */

.garsen-ag-summary-grid {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 30px;
    align-items: start;
}

.garsen-ag-summary-score-card {
    text-align: center;
}

.garsen-ag-summary-score-card .garsen-ag-score-circle {
    width: 100px;
    height: 100px;
    font-size: 32px;
    margin: 0 auto 10px;
}

.garsen-ag-summary-score-card .garsen-ag-score-label {
    font-size: 12px;
    color: #646970;
    font-weight: 500;
}

/* Severity Cards in Summary */
.garsen-ag-summary-issues h3 {
    margin: 0 0 15px;
    font-size: 14px;
    color: #1d2327;
}

.garsen-ag-summary-issues .garsen-ag-severity-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.garsen-ag-summary-issues .garsen-ag-severity-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.garsen-ag-summary-issues .garsen-ag-severity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.garsen-ag-summary-issues .garsen-ag-severity-card .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.garsen-ag-summary-issues .severity-info {
    display: flex;
    flex-direction: column;
}

.garsen-ag-summary-issues .severity-count {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.garsen-ag-summary-issues .severity-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

/* Severity Colors */
.garsen-ag-severity-card.severity-critical {
    background: linear-gradient(135deg, #fcf0f1 0%, #f9e2e4 100%);
    color: #b32d2e;
}

.garsen-ag-severity-card.severity-serious {
    background: linear-gradient(135deg, #fcf5ed 0%, #fae9d5 100%);
    color: #996800;
}

.garsen-ag-severity-card.severity-moderate {
    background: linear-gradient(135deg, #fffbe6 0%, #fff3cd 100%);
    color: #826200;
}

.garsen-ag-severity-card.severity-minor {
    background: linear-gradient(135deg, #e7f5fe 0%, #d4edfc 100%);
    color: #0a4b78;
}

/* Severity Progress Bar */
.garsen-ag-severity-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f1;
}

.severity-bar-segment {
    transition: width 0.3s ease;
}

.severity-bar-segment.severity-critical { background: #d63638; }
.severity-bar-segment.severity-serious { background: #dba617; }
.severity-bar-segment.severity-moderate { background: #f0c33c; }
.severity-bar-segment.severity-minor { background: #72aee6; }

.garsen-ag-total-issues {
    margin-top: 8px;
    font-size: 13px;
    color: #646970;
}

/* Summary Meta */
.garsen-ag-summary-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 20px;
    border-left: 1px solid #e0e0e0;
}

.garsen-ag-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.garsen-ag-meta-item .dashicons {
    color: #646970;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.garsen-ag-meta-item .meta-info {
    display: flex;
    flex-direction: column;
}

.garsen-ag-meta-item .meta-value {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
}

.garsen-ag-meta-item .meta-label {
    font-size: 11px;
    color: #646970;
}

/* ============================================
   ISSUES TAB
   ============================================ */

.garsen-ag-issues-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.garsen-ag-issues-count {
    font-size: 14px;
    color: #1d2327;
}

/* Empty State */
.garsen-ag-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #646970;
}

.garsen-ag-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #00a32a;
    margin-bottom: 15px;
}

.garsen-ag-empty-state h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #1d2327;
}

.garsen-ag-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   STRUCTURE TAB (Sub-tabs)
   ============================================ */

.garsen-ag-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0;
}

.garsen-ag-subtab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 13px;
    color: #646970;
    transition: all 0.2s ease;
}

.garsen-ag-subtab:hover {
    color: #1d2327;
    background: #f6f7f7;
}

.garsen-ag-subtab.active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

.garsen-ag-subtab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.garsen-ag-subtab-count {
    background: #f0f0f1;
    color: #646970;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
}

.garsen-ag-subtab.active .garsen-ag-subtab-count {
    background: #2271b1;
    color: #fff;
}

.garsen-ag-subtab-panel {
    display: none;
}

.garsen-ag-subtab-panel.active {
    display: block;
}

/* Structure Summary Cards */
.garsen-ag-structure-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.garsen-ag-structure-stat {
    background: #f6f7f7;
    padding: 12px 16px;
    border-radius: 6px;
    text-align: center;
}

.garsen-ag-structure-stat .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1d2327;
}

.garsen-ag-structure-stat .stat-label {
    font-size: 12px;
    color: #646970;
}

.garsen-ag-structure-stat.has-issue {
    background: #fcf0f1;
    border: 1px solid #d63638;
}

.garsen-ag-structure-stat.has-issue .stat-value {
    color: #d63638;
}

/* Structure List */
.garsen-ag-structure-list {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.garsen-ag-structure-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
}

.garsen-ag-structure-item:last-child {
    border-bottom: none;
}

.garsen-ag-structure-item .item-level {
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    min-width: 32px;
    text-align: center;
}

.garsen-ag-structure-item .item-text {
    flex: 1;
    color: #1d2327;
    word-break: break-word;
}

.garsen-ag-structure-item .item-text.empty {
    color: #d63638;
    font-style: italic;
}

.garsen-ag-structure-item .item-selector {
    font-size: 11px;
    color: #646970;
    font-family: monospace;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   SITE HEALTH TAB
   ============================================ */

.garsen-ag-site-health-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.garsen-ag-health-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f6f7f7;
    border-radius: 6px;
}

.garsen-ag-health-card .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #646970;
}

.garsen-ag-health-card .health-info {
    display: flex;
    flex-direction: column;
}

.garsen-ag-health-card .health-count {
    font-size: 20px;
    font-weight: 700;
    color: #1d2327;
}

.garsen-ag-health-card .health-label {
    font-size: 12px;
    color: #646970;
}

.garsen-ag-health-card.health-js-errors.has-issues {
    background: #fcf0f1;
}

.garsen-ag-health-card.health-js-errors.has-issues .dashicons {
    color: #d63638;
}

.garsen-ag-health-card.health-network-errors.has-issues {
    background: #fcf5ed;
}

.garsen-ag-health-card.health-network-errors.has-issues .dashicons {
    color: #dba617;
}

.garsen-ag-health-card.health-console-warnings.has-issues {
    background: #e7f5fe;
}

.garsen-ag-health-card.health-console-warnings.has-issues .dashicons {
    color: #0a4b78;
}

.garsen-ag-health-disclaimer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: #e7f5fe;
    border-radius: 6px;
    margin-bottom: 20px;
}

.garsen-ag-health-disclaimer .dashicons {
    color: #0a4b78;
    flex-shrink: 0;
}

.garsen-ag-health-disclaimer p {
    margin: 0;
    font-size: 13px;
    color: #0a4b78;
}

.garsen-ag-health-section {
    margin-bottom: 20px;
}

.garsen-ag-health-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    color: #1d2327;
}

.garsen-ag-health-section h4 .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.garsen-ag-health-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.garsen-ag-health-list li {
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    font-family: monospace;
    color: #1d2327;
    word-break: break-word;
}

.garsen-ag-health-list li:last-child {
    border-bottom: none;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media screen and (max-width: 1200px) {
    .garsen-ag-summary-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .garsen-ag-summary-score-card {
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: left;
    }

    .garsen-ag-summary-score-card .garsen-ag-score-circle {
        margin: 0;
    }

    .garsen-ag-summary-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        padding-left: 0;
        border-left: none;
        padding-top: 15px;
        border-top: 1px solid #e0e0e0;
    }
}

@media screen and (max-width: 782px) {
    .garsen-ag-tabs {
        flex-direction: column;
        gap: 2px;
    }

    .garsen-ag-tab {
        border-radius: 0;
        border-bottom: 1px solid #c3c4c7;
        margin-bottom: 0;
    }

    .garsen-ag-tab.active {
        background: #2271b1;
        color: #fff;
        border-color: #2271b1;
    }

    .garsen-ag-tab.active .garsen-ag-tab-count {
        background: #fff;
        color: #2271b1;
    }

    .garsen-ag-summary-issues .garsen-ag-severity-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .garsen-ag-site-health-summary {
        grid-template-columns: 1fr;
    }

    .garsen-ag-subtabs {
        flex-direction: column;
        border-bottom: none;
    }

    .garsen-ag-subtab {
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 0;
    }

    .garsen-ag-subtab.active {
        background: #2271b1;
        color: #fff;
        border-color: #2271b1;
    }
}

/* ============================================
   SCAN MODAL
   ============================================ */

.garsen-ag-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garsen-ag-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.garsen-ag-modal-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.garsen-ag-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f6f7f7;
    border-bottom: 1px solid #c3c4c7;
}

.garsen-ag-modal-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.garsen-ag-modal-header h2 .dashicons {
    color: #2271b1;
}

.garsen-ag-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #646970;
    transition: color 0.2s;
}

.garsen-ag-modal-close:hover {
    color: #d63638;
}

.garsen-ag-modal-close .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.garsen-ag-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.garsen-ag-modal-body > p {
    margin: 0 0 16px;
    color: #646970;
}

.garsen-ag-scan-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.garsen-ag-scan-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    transition: border-color 0.2s, background 0.2s;
}

.garsen-ag-scan-option:has(input:checked) {
    border-color: #2271b1;
    background: #f0f6fc;
}

.garsen-ag-scan-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #1d2327;
}

.garsen-ag-scan-option label input[type="radio"] {
    margin: 0;
}

.garsen-ag-scan-option .option-url {
    font-size: 12px;
    color: #646970;
    font-weight: normal;
    margin-left: auto;
    word-break: break-all;
}

.garsen-ag-scan-option select,
.garsen-ag-scan-option input[type="url"] {
    width: 100%;
    margin-left: 24px;
}

.garsen-ag-scan-option select:disabled,
.garsen-ag-scan-option input[type="url"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.garsen-ag-page-select,
.garsen-ag-custom-url {
    max-width: calc(100% - 24px);
}

.garsen-ag-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: #f6f7f7;
    border-top: 1px solid #c3c4c7;
}

.garsen-ag-modal-footer .button {
    min-width: 100px;
}

.garsen-ag-modal-footer .button-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.garsen-ag-modal-footer .button-primary .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

@media screen and (max-width: 600px) {
    .garsen-ag-modal-content {
        margin: 20px;
        max-height: calc(100vh - 40px);
    }

    .garsen-ag-scan-option .option-url {
        display: block;
        margin-left: 24px;
        margin-top: 4px;
    }
}

/* ========================================
   REDESIGNED SCAN DETAIL PAGE
   ======================================== */

/* Back Navigation */
.garsen-ag-back-nav {
    margin-bottom: 16px;
}

.garsen-ag-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #2271b1;
    font-size: 13px;
}

.garsen-ag-back-link:hover {
    color: #135e96;
}

.garsen-ag-back-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Scan Header */
.garsen-ag-scan-header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.scan-header-main {
    flex: 1;
    min-width: 200px;
}

.scan-header-main .scan-domain {
    font-size: 20px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 8px 0;
}

.scan-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.scan-header-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #646970;
}

.scan-header-meta .meta-item .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #a7aaad;
}

/* Header Metrics */
.scan-header-metrics {
    display: flex;
    align-items: center;
    gap: 24px;
}

.scan-header-score {
    text-align: center;
}

.scan-header-score .score-display {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.scan-header-score .score-display.score-good { color: #00a32a; }
.scan-header-score .score-display.score-warning { color: #dba617; }
.scan-header-score .score-display.score-poor { color: #d63638; }

.scan-header-score .score-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #646970;
    margin-top: 4px;
}

/* Issue Pills in Header */
.scan-header-issues-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.issue-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
}

.issue-pill.critical {
    background: #fcf0f1;
    color: #d63638;
    border: 1px solid #f5c6cb;
}

.issue-pill.serious {
    background: #fef8ee;
    color: #b32d2e;
    border: 1px solid #fcecc7;
}

.issue-pill.moderate {
    background: #f0f6fc;
    color: #2271b1;
    border: 1px solid #c5d9ed;
}

.issue-pill.minor {
    background: #f0f0f1;
    color: #646970;
    border: 1px solid #dcdcde;
}

.issues-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 12px;
    border-left: 1px solid #dcdcde;
    font-weight: 600;
    color: #1d2327;
}

.issues-total small {
    font-size: 10px;
    font-weight: normal;
    color: #646970;
    text-transform: uppercase;
}

/* Header Actions */
.scan-header-actions {
    display: flex;
    gap: 8px;
}

/* Copy Button */
.garsen-ag-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #646970;
}

.garsen-ag-copy-btn:hover {
    color: #2271b1;
}

/* Overview URL row */
.garsen-ag-overview-url-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

.garsen-ag-overview-url-row .dashicons {
    color: #72aee6;
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.garsen-ag-overview-url-row a {
    color: #2271b1;
    word-break: break-all;
}

.garsen-ag-overview-url-row a:not([href="#"]):hover {
    text-decoration: underline;
}

/* KPI Grid */
.garsen-ag-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.garsen-ag-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 16px;
}

.garsen-ag-kpi-card .kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #e7e8ea;
    border-radius: 8px;
}

.garsen-ag-kpi-card .kpi-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #646970;
}

.garsen-ag-kpi-card .kpi-content {
    flex: 1;
}

.garsen-ag-kpi-card .kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #1d2327;
    line-height: 1;
}

.garsen-ag-kpi-card .kpi-label {
    font-size: 12px;
    color: #646970;
    margin-top: 4px;
}

/* Tab Count Badge */
.garsen-ag-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #2271b1;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

/* Score Section */
.garsen-ag-overview-score-section {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.garsen-ag-score-circle-container {
    text-align: center;
}

.garsen-ag-score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #dcdcde;
    background: #f6f7f7;
    margin: 0 auto;
}

.garsen-ag-score-circle.score-good {
    border-color: #00a32a;
    background: #edfaef;
}

.garsen-ag-score-circle.score-warning {
    border-color: #dba617;
    background: #fcf9e8;
}

.garsen-ag-score-circle.score-poor {
    border-color: #d63638;
    background: #fcf0f1;
}

.garsen-ag-score-circle .score-value {
    font-size: 28px;
    font-weight: 700;
    color: #1d2327;
}

.garsen-ag-score-label {
    margin-top: 8px;
    font-size: 12px;
    color: #646970;
}

/* Severity Breakdown */
.garsen-ag-severity-breakdown {
    flex: 1;
}

.garsen-ag-severity-breakdown h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.garsen-ag-severity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.garsen-ag-severity-card {
    text-align: center;
    padding: 16px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.garsen-ag-severity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.garsen-ag-severity-card.severity-critical {
    background: #fcf0f1;
}

.garsen-ag-severity-card.severity-serious {
    background: #fef8ee;
}

.garsen-ag-severity-card.severity-moderate {
    background: #f0f6fc;
}

.garsen-ag-severity-card.severity-minor {
    background: #f0f0f1;
}

.garsen-ag-severity-card .severity-count {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.garsen-ag-severity-card.severity-critical .severity-count { color: #d63638; }
.garsen-ag-severity-card.severity-serious .severity-count { color: #b32d2e; }
.garsen-ag-severity-card.severity-moderate .severity-count { color: #2271b1; }
.garsen-ag-severity-card.severity-minor .severity-count { color: #646970; }

.garsen-ag-severity-card .severity-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 6px;
    color: #50575e;
}

/* Overview Grid */
.garsen-ag-overview-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    margin-bottom: 24px;
    align-items: start;
}

/* Score Card */
.garsen-ag-score-card {
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
}

.garsen-ag-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid #dcdcde;
    background: #fff;
    margin: 0 auto 12px;
    font-size: 36px;
    font-weight: 700;
    color: #1d2327;
}

.garsen-ag-score-circle.score-good {
    border-color: #00a32a;
    background: #edfaef;
    color: #00a32a;
}

.garsen-ag-score-circle.score-warning {
    border-color: #dba617;
    background: #fcf9e8;
    color: #dba617;
}

.garsen-ag-score-circle.score-poor {
    border-color: #d63638;
    background: #fcf0f1;
    color: #d63638;
}

.garsen-ag-score-label {
    font-size: 12px;
    color: #646970;
    text-transform: uppercase;
}

/* Severity Cards Grid */
.garsen-ag-severity-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.garsen-ag-severity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.garsen-ag-severity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.garsen-ag-severity-card .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-bottom: 8px;
}

.garsen-ag-severity-card .severity-info {
    text-align: center;
}

.garsen-ag-severity-card .severity-count {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.garsen-ag-severity-card .severity-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 4px;
}

.garsen-ag-severity-card.severity-critical {
    background: #fcf0f1;
}

.garsen-ag-severity-card.severity-critical .dashicons,
.garsen-ag-severity-card.severity-critical .severity-count {
    color: #d63638;
}

.garsen-ag-severity-card.severity-serious {
    background: #fef8ee;
}

.garsen-ag-severity-card.severity-serious .dashicons,
.garsen-ag-severity-card.severity-serious .severity-count {
    color: #b32d2e;
}

.garsen-ag-severity-card.severity-moderate {
    background: #f0f6fc;
}

.garsen-ag-severity-card.severity-moderate .dashicons,
.garsen-ag-severity-card.severity-moderate .severity-count {
    color: #2271b1;
}

.garsen-ag-severity-card.severity-minor {
    background: #f0f0f1;
}

.garsen-ag-severity-card.severity-minor .dashicons,
.garsen-ag-severity-card.severity-minor .severity-count {
    color: #646970;
}

/* Severity Bar */
.garsen-ag-severity-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f1;
}

.garsen-ag-severity-bar .severity-bar-segment {
    height: 100%;
    transition: width 0.3s;
}

.garsen-ag-severity-bar .severity-bar-segment.severity-critical,
#bar-critical { background: #d63638; height: 100%; }
.garsen-ag-severity-bar .severity-bar-segment.severity-serious,
#bar-serious { background: #dba617; height: 100%; }
.garsen-ag-severity-bar .severity-bar-segment.severity-moderate,
#bar-moderate { background: #2271b1; height: 100%; }
.garsen-ag-severity-bar .severity-bar-segment.severity-minor,
#bar-minor { background: #a7aaad; height: 100%; }

/* Top Issues Section */
.garsen-ag-top-issues {
    margin-top: 24px;
}

.garsen-ag-top-issues h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

/* Issues Tab Toolbar */
.garsen-ag-issues-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
}

.garsen-ag-issues-count {
    font-size: 14px;
    color: #1d2327;
}

.garsen-ag-issues-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.garsen-ag-issues-filters select,
.garsen-ag-issues-filters input[type="search"] {
    min-width: 120px;
}

.garsen-ag-checkbox-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}

/* Issues List */
.garsen-ag-issues-list {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    max-height: 600px;
    overflow-y: auto;
}

.garsen-ag-issue-item {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #f0f0f1;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

.garsen-ag-issue-item:hover {
    background: #f9f9f9;
}

.garsen-ag-issue-item:last-child {
    border-bottom: none;
}

.garsen-ag-issue-item.severity-critical {
    border-left: 4px solid #d63638;
}

.garsen-ag-issue-item.severity-serious {
    border-left: 4px solid #dba617;
}

.garsen-ag-issue-item.severity-moderate {
    border-left: 4px solid #2271b1;
}

.garsen-ag-issue-item.severity-minor {
    border-left: 4px solid #a7aaad;
}

.garsen-ag-issue-item .issue-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.garsen-ag-issue-item .issue-message {
    font-size: 14px;
    color: #1d2327;
    line-height: 1.5;
}

.garsen-ag-issue-item .issue-selector {
    margin-top: 8px;
}

.garsen-ag-issue-item .issue-selector code {
    display: block;
    padding: 8px 10px;
    background: #f6f7f7;
    border-radius: 4px;
    font-size: 11px;
    color: #646970;
    overflow-x: auto;
    white-space: nowrap;
}

/* Pagination */
.garsen-ag-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.garsen-ag-pagination .pagination-info {
    font-size: 13px;
    color: #646970;
}

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

.garsen-ag-pagination .pagination-current {
    font-size: 13px;
    color: #1d2327;
}

/* Subtabs */
.garsen-ag-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid #e2e4e7;
    margin-bottom: 20px;
}

.garsen-ag-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #646970;
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.garsen-ag-subtab:hover {
    color: #2271b1;
}

.garsen-ag-subtab.active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

.garsen-ag-subtab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.garsen-ag-subtab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e7e8ea;
    color: #50575e;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
}

.garsen-ag-subtab.active .garsen-ag-subtab-count {
    background: #2271b1;
    color: #fff;
}

/* Subtab Panels */
.garsen-ag-subtab-panel {
    display: none;
}

.garsen-ag-subtab-panel.active {
    display: block;
}

/* Telemetry Summary */
.garsen-ag-telemetry-summary {
    margin-bottom: 16px;
}

/* Telemetry Stats (from JavaScript) */
.telemetry-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    min-width: 70px;
}

.stat-item.has-issue {
    background: #fcf0f1;
    border-color: #f5c6cb;
}

.stat-item .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1d2327;
}

.stat-item .stat-label {
    font-size: 11px;
    color: #646970;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Telemetry List (from JavaScript) */
.garsen-ag-telemetry-content {
    margin-bottom: 12px;
}

.telemetry-list {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.telemetry-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f1;
}

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

.telemetry-item .item-tag {
    display: inline-block;
    min-width: 50px;
    padding: 3px 8px;
    background: #e7e8ea;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #50575e;
    text-transform: uppercase;
    text-align: center;
}

.telemetry-item .item-text {
    flex: 1;
    font-size: 13px;
    color: #1d2327;
    word-break: break-word;
}

.telemetry-item .item-text.empty {
    color: #d63638;
    font-style: italic;
}

.telemetry-item.level-1 { padding-left: 14px; }
.telemetry-item.level-2 { padding-left: 28px; }
.telemetry-item.level-3 { padding-left: 42px; }
.telemetry-item.level-4 { padding-left: 56px; }
.telemetry-item.level-5 { padding-left: 70px; }
.telemetry-item.level-6 { padding-left: 84px; }

/* View All Button */
.garsen-ag-view-all-btn {
    margin-top: 12px;
}

/* Empty Message */
.garsen-ag-empty-message {
    padding: 20px;
    text-align: center;
    color: #646970;
    font-style: italic;
}

/* Raw Data Toolbar */
.garsen-ag-raw-data-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.garsen-ag-raw-data-toolbar input[type="search"] {
    flex: 1;
    min-width: 200px;
}

/* Raw Data Viewer */
.garsen-ag-raw-data-container {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    overflow: hidden;
}

.garsen-ag-json-viewer {
    margin: 0;
    padding: 16px;
    background: #1d2327;
    color: #e7e8ea;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 500px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Scans Page Toolbar */
.garsen-ag-scans-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
}

.garsen-ag-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.garsen-ag-filters select,
.garsen-ag-filters input[type="date"] {
    min-width: 130px;
}

.garsen-ag-filter-select,
.garsen-ag-filter-date {
    padding: 4px 8px;
}

/* Scans Table */
.garsen-ag-scans-table {
    margin-top: 0;
}

.garsen-ag-scans-table tbody tr {
    cursor: pointer;
    transition: background 0.2s;
}

.garsen-ag-scans-table tbody tr:hover {
    background: #f0f6fc;
}

/* Retention Notice */
.garsen-ag-retention-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: #f0f6fc;
    border: 1px solid #c5d9ed;
    border-radius: 4px;
    font-size: 13px;
    color: #2271b1;
}

.garsen-ag-retention-notice .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Empty State */
.garsen-ag-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #646970;
}

.garsen-ag-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #c3c4c7;
    margin-bottom: 16px;
}

.garsen-ag-empty-state h3 {
    margin: 0 0 8px;
    color: #1d2327;
}

.garsen-ag-empty-state p {
    margin: 0 0 16px;
}

/* Loading State */
.garsen-ag-loading {
    text-align: center;
    padding: 40px;
    color: #646970;
}

.garsen-ag-loading .spinner {
    float: none;
    margin: 0 8px 0 0;
}

/* ========================================
   DRAWER (Issue Details)
   ======================================== */

.garsen-ag-drawer {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.garsen-ag-drawer.open {
    right: 0;
}

.garsen-ag-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

.garsen-ag-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 100001;
    background: #fff;
}

.garsen-ag-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e4e7;
    background: #f6f7f7;
}

.garsen-ag-drawer-header h2 {
    margin: 0;
    font-size: 16px;
}

.garsen-ag-drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #646970;
    padding: 4px;
    line-height: 1;
}

.garsen-ag-drawer-close:hover {
    color: #d63638;
}

.garsen-ag-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Drawer Sections */
.drawer-section {
    margin-bottom: 24px;
}

.drawer-section h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.drawer-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    color: #646970;
}

.drawer-section p {
    margin: 0;
    line-height: 1.6;
}

.drawer-severity {
    margin-bottom: 12px;
}

.drawer-rule {
    margin: 0 0 8px;
    font-size: 18px;
}

.drawer-wcag,
.drawer-type {
    font-size: 13px;
    color: #646970;
    margin-bottom: 4px;
}

.drawer-code {
    display: block;
    padding: 12px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 8px;
}

.drawer-screenshot {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid #e2e4e7;
}

body.drawer-open {
    overflow: hidden;
}

body.modal-open {
    overflow: hidden;
}

/* Responsive Drawer */
@media screen and (max-width: 600px) {
    .garsen-ag-drawer {
        width: 100%;
        max-width: 100%;
    }
}

/* Sticky Header - alternate class */
.garsen-ag-sticky-header {
    position: sticky;
    top: 32px;
    z-index: 100;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sticky-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e4e7;
}

.sticky-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scan-domain {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    margin: 0;
}

.garsen-ag-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.garsen-ag-status-badge.status-completed { background: #d4edda; color: #155724; }
.garsen-ag-status-badge.status-processing { background: #cce5ff; color: #004085; }
.garsen-ag-status-badge.status-queued { background: #f0f6fc; color: #0a4b78; }
.garsen-ag-status-badge.status-failed { background: #f8d7da; color: #721c24; }

.scan-meta-pills {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #646970;
}

.scan-meta-pills .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

.sticky-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-score .score-value {
    font-size: 28px;
    font-weight: 700;
}

.header-score .score-value.score-good { color: #00a32a; }
.header-score .score-value.score-warning { color: #dba617; }
.header-score .score-value.score-poor { color: #d63638; }

/* Sticky Header Summary Bar */
.sticky-header-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f9f9f9;
}

.summary-counts {
    display: flex;
    gap: 20px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.summary-item .count {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.summary-item.critical .count { background: #fcf0f1; color: #d63638; }
.summary-item.serious .count { background: #fef8ee; color: #b32d2e; }
.summary-item.moderate .count { background: #f0f6fc; color: #2271b1; }
.summary-item.minor .count { background: #f0f0f1; color: #646970; }

.summary-total {
    font-weight: 600;
    color: #1d2327;
}

/* Tab Navigation */
.garsen-ag-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #c3c4c7;
    background: #f6f7f7;
    padding: 0 20px;
}

.garsen-ag-tab {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #646970;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.garsen-ag-tab:hover {
    color: #2271b1;
}

.garsen-ag-tab.active {
    color: #2271b1;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
}

.garsen-ag-tab .tab-count {
    display: inline-block;
    background: #e7e8ea;
    color: #50575e;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

.garsen-ag-tab.active .tab-count {
    background: #2271b1;
    color: #fff;
}

/* Tab Panels */
.garsen-ag-tab-panel {
    display: none;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 24px;
}

.garsen-ag-tab-panel.active {
    display: block;
}

/* Overview Tab KPIs */
.overview-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: #1d2327;
}

.kpi-label {
    font-size: 12px;
    color: #646970;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Score Circle */
.overview-score-section {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
}

.score-circle-container {
    text-align: center;
}

#overview-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #f0f0f1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid #c3c4c7;
    margin: 0 auto;
}

#overview-score-circle.score-good { border-color: #00a32a; background: #edfaef; }
#overview-score-circle.score-warning { border-color: #dba617; background: #fcf9e8; }
#overview-score-circle.score-poor { border-color: #d63638; background: #fcf0f1; }

#overview-score-value {
    font-size: 36px;
    font-weight: 700;
    color: #1d2327;
}

#overview-score-label {
    margin-top: 8px;
    font-size: 13px;
    color: #646970;
}

/* Severity Breakdown */
.severity-breakdown {
    flex: 1;
}

.severity-breakdown h4 {
    margin: 0 0 16px;
    font-size: 14px;
}

.garsen-ag-severity-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.garsen-ag-severity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.severity-bar-visual {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f1;
    margin-top: 16px;
}

.severity-bar-visual .bar-segment {
    height: 100%;
    transition: width 0.3s;
}

.severity-bar-visual .bar-segment.critical { background: #d63638; }
.severity-bar-visual .bar-segment.serious { background: #dba617; }
.severity-bar-visual .bar-segment.moderate { background: #2271b1; }
.severity-bar-visual .bar-segment.minor { background: #a7aaad; }

/* Top Issues Table */
.top-issues-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
}

.top-issues-table {
    width: 100%;
    border-collapse: collapse;
}

.top-issues-table th,
.top-issues-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e4e7;
}

.top-issues-table th {
    background: #f6f7f7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #646970;
}

.severity-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-badge.severity-critical { background: #fcf0f1; color: #d63638; }
.severity-badge.severity-serious { background: #fef8ee; color: #b32d2e; }
.severity-badge.severity-moderate { background: #f0f6fc; color: #2271b1; }
.severity-badge.severity-minor { background: #f0f0f1; color: #646970; }

.issue-flag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 4px;
}

.issue-flag.flag-review { background: #fff3cd; color: #856404; }
.issue-flag.flag-high-risk { background: #f8d7da; color: #721c24; }
.issue-flag.flag-screenshot { background: #d1ecf1; color: #0c5460; }

/* Issues Tab */
.issues-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.issues-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.issues-filters select,
.issues-filters input[type="text"] {
    min-width: 140px;
}

.issues-filters label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.issues-count {
    font-size: 13px;
    color: #646970;
}

.issues-count strong {
    color: #1d2327;
}

/* Issue List */
#issues-list {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    max-height: 600px;
    overflow-y: auto;
}

.garsen-ag-issue-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f1;
    cursor: pointer;
    transition: background 0.2s;
}

.garsen-ag-issue-item:hover {
    background: #f9f9f9;
}

.garsen-ag-issue-item:last-child {
    border-bottom: none;
}

.issue-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.issue-rule {
    font-family: monospace;
    font-size: 12px;
    color: #646970;
}

.issue-wcag {
    font-size: 11px;
    padding: 2px 6px;
    background: #e7e8ea;
    border-radius: 3px;
    color: #50575e;
}

.issue-flags {
    margin-left: auto;
}

.issue-learn-link {
    color: #2271b1;
    text-decoration: none;
    margin-left: 4px;
}

.issue-learn-link:hover {
    color: #135e96;
}

.issue-learn-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.drawer-rules-link {
    margin-top: 12px;
}

.drawer-rules-link .dashicons {
    vertical-align: text-bottom;
    margin-right: 4px;
}

.issue-item-message {
    font-size: 14px;
    color: #1d2327;
    line-height: 1.5;
}

.issue-item-selector {
    margin-top: 8px;
}

.issue-item-selector code {
    display: block;
    padding: 8px 10px;
    background: #f6f7f7;
    border-radius: 4px;
    font-size: 11px;
    color: #646970;
    overflow-x: auto;
    white-space: nowrap;
}

/* Pagination */
.garsen-ag-list-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.pagination-info {
    font-size: 13px;
    color: #646970;
}

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

.pagination-current {
    font-size: 13px;
    color: #1d2327;
}

/* Issue Drawer */
.garsen-ag-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.garsen-ag-drawer {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.garsen-ag-drawer.open {
    right: 0;
}

.garsen-ag-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e4e7;
    background: #f6f7f7;
}

.garsen-ag-drawer-header h3 {
    margin: 0;
    font-size: 16px;
}

.garsen-ag-drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #646970;
    padding: 4px;
}

.garsen-ag-drawer-close:hover {
    color: #d63638;
}

.garsen-ag-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.drawer-section {
    margin-bottom: 24px;
}

.drawer-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    color: #646970;
}

.drawer-section p {
    margin: 0;
    line-height: 1.6;
}

.drawer-code {
    display: block;
    padding: 12px;
    background: #f6f7f7;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.drawer-screenshot {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid #e2e4e7;
}

.drawer-severity {
    margin-bottom: 12px;
}

.drawer-rule {
    margin: 0 0 8px;
    font-size: 18px;
}

.drawer-wcag,
.drawer-type {
    font-size: 13px;
    color: #646970;
    margin-bottom: 4px;
}

body.drawer-open {
    overflow: hidden;
}

/* Pages Tab */
.pages-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
}

.pages-table th,
.pages-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e4e7;
}

.pages-table th {
    background: #f6f7f7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #646970;
}

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

.page-details-row {
    background: #f9f9f9;
}

.page-details-content {
    padding: 16px;
}

.page-details-content .detail-section {
    margin-bottom: 16px;
}

.page-details-content .detail-section:last-child {
    margin-bottom: 0;
}

.page-details-content h5 {
    margin: 0 0 8px;
    font-size: 13px;
    color: #1d2327;
}

.page-details-content ul {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: #646970;
}

.toggle-page-details .dashicons {
    transition: transform 0.2s;
}

/* Telemetry Tab */
.garsen-ag-subtabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #e2e4e7;
    margin-bottom: 20px;
}

.garsen-ag-subtab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #646970;
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.garsen-ag-subtab:hover {
    color: #2271b1;
}

.garsen-ag-subtab.active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

.garsen-ag-subtab .subtab-count {
    display: inline-block;
    background: #e7e8ea;
    color: #50575e;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
}

.garsen-ag-subtab.active .subtab-count {
    background: #2271b1;
    color: #fff;
}

.garsen-ag-subtab-panel {
    display: none;
}

.garsen-ag-subtab-panel.active {
    display: block;
}

/* Telemetry Stats */
.telemetry-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    min-width: 70px;
}

.stat-item.has-issue {
    background: #fcf0f1;
    border-color: #f5c6cb;
}

.stat-item .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1d2327;
}

.stat-item .stat-label {
    font-size: 11px;
    color: #646970;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Telemetry List */
.telemetry-list {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.telemetry-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f1;
}

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

.telemetry-item .item-tag {
    display: inline-block;
    min-width: 60px;
    padding: 3px 8px;
    background: #e7e8ea;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #50575e;
    text-transform: uppercase;
    text-align: center;
}

.telemetry-item .item-text {
    flex: 1;
    font-size: 13px;
    color: #1d2327;
    word-break: break-word;
}

.telemetry-item .item-text.empty {
    color: #d63638;
    font-style: italic;
}

.telemetry-item.level-1 { padding-left: 14px; }
.telemetry-item.level-2 { padding-left: 28px; }
.telemetry-item.level-3 { padding-left: 42px; }
.telemetry-item.level-4 { padding-left: 56px; }
.telemetry-item.level-5 { padding-left: 70px; }
.telemetry-item.level-6 { padding-left: 84px; }

.garsen-ag-view-all-btn {
    margin-top: 12px;
}

.garsen-ag-empty-message {
    color: #646970;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ========================================
   TELEMETRY MODAL - Scoped and Isolated
   ======================================== */

/* Modal container - full viewport overlay */
#telemetry-modal.garsen-ag-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: none;
}

/* Background overlay - inside modal container */
#telemetry-modal .garsen-ag-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Modal content box - centered and above overlay */
#telemetry-modal .garsen-ag-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: 90vw;
    max-height: 80vh;
    background: #fff;
    border-radius: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

/* Modal header */
#telemetry-modal .garsen-ag-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e4e7;
    background: #fff;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

#telemetry-modal .garsen-ag-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

/* Modal close button */
#telemetry-modal .garsen-ag-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #646970;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
}

#telemetry-modal .garsen-ag-modal-close:hover {
    color: #d63638;
    background: #f0f0f1;
}

#telemetry-modal .garsen-ag-modal-close:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Modal toolbar with search */
#telemetry-modal .garsen-ag-modal-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid #e2e4e7;
    background: #f6f7f7;
    flex-shrink: 0;
}

#telemetry-modal .garsen-ag-modal-toolbar input[type="search"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
}

#telemetry-modal .garsen-ag-modal-toolbar input[type="search"]:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Modal body - scrollable content area */
#telemetry-modal .garsen-ag-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #fff;
    min-height: 200px;
    max-height: calc(80vh - 180px);
}

/* List inside modal */
#telemetry-modal .modal-list {
    border: none;
    border-radius: 0;
}

#telemetry-modal .modal-list .telemetry-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f1;
    background: #fff;
}

#telemetry-modal .modal-list .telemetry-item:hover {
    background: #f9f9f9;
}

#telemetry-modal .modal-list .telemetry-item:last-child {
    border-bottom: none;
}

#telemetry-modal .modal-list .item-tag {
    display: inline-block;
    min-width: 70px;
    padding: 4px 10px;
    background: #2271b1;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

#telemetry-modal .modal-list .item-text {
    flex: 1;
    font-size: 14px;
    color: #1d2327;
    word-break: break-word;
}

#telemetry-modal .modal-list .item-text.empty {
    color: #d63638;
    font-style: italic;
}

/* Modal footer */
#telemetry-modal .garsen-ag-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e2e4e7;
    background: #f6f7f7;
    font-size: 13px;
    color: #646970;
    text-align: right;
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
}

body.modal-open {
    overflow: hidden;
}

/* Raw Data Tab */
.raw-data-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

#raw-data-viewer {
    background: #1d2327;
    color: #e7e8ea;
    padding: 16px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 600px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Scans List Page */
.garsen-ag-scans-page .filters-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.garsen-ag-scans-page .filters-bar select,
.garsen-ag-scans-page .filters-bar input[type="date"] {
    min-width: 140px;
}

.garsen-ag-scans-page .filters-bar .filter-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

#scans-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
}

#scans-table th,
#scans-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e4e7;
}

#scans-table th {
    background: #f6f7f7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #646970;
}

#scans-table tr {
    cursor: pointer;
    transition: background 0.2s;
}

#scans-table tbody tr:hover {
    background: #f9f9f9;
}

#scans-table tr:last-child td {
    border-bottom: none;
}

.scan-url {
    font-size: 13px;
    color: #2271b1;
}

.score-badge {
    font-weight: 600;
}

.score-badge.score-good { color: #00a32a; }
.score-badge.score-warning { color: #dba617; }
.score-badge.score-poor { color: #d63638; }

#scans-loading,
#scans-empty {
    padding: 40px;
    text-align: center;
    color: #646970;
}

#scans-empty .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #c3c4c7;
    margin-bottom: 16px;
}

#scans-pagination {
    margin-top: 16px;
}

.retention-notice {
    background: #f0f6fc;
    border: 1px solid #c5d9ed;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #2271b1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.retention-notice .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Loading States */
#scan-detail-loading {
    padding: 60px;
    text-align: center;
}

#scan-detail-loading .spinner {
    float: none;
    margin: 0 auto 16px;
}

#scan-detail-error {
    padding: 40px;
    text-align: center;
    color: #d63638;
}

#scan-detail-error .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

/* Responsive Redesign */
@media screen and (max-width: 1024px) {
    .overview-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .overview-score-section {
        flex-direction: column;
    }
}

@media screen and (max-width: 782px) {
    .garsen-ag-sticky-header {
        position: relative;
        top: 0;
    }

    .sticky-header-main {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .sticky-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .summary-counts {
        flex-wrap: wrap;
    }

    .garsen-ag-tabs {
        overflow-x: auto;
        padding: 0 10px;
    }

    .garsen-ag-tab {
        padding: 10px 14px;
        white-space: nowrap;
    }

    .overview-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .issues-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .issues-filters {
        flex-direction: column;
    }

    .garsen-ag-drawer {
        width: 100%;
        max-width: 100%;
    }

    #telemetry-modal {
        width: 95%;
        max-height: 90vh;
    }
}

@media screen and (max-width: 480px) {
    .overview-kpis {
        grid-template-columns: 1fr;
    }

    .garsen-ag-severity-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .telemetry-stats {
        justify-content: center;
    }
}