/**
 * ACP Dashboard Layout v1.7.0
 *
 * FÁZE 1 redesign — Quick Win
 *
 * This stylesheet ADDS new layout wrappers and styling for the redesigned
 * dashboard. It does NOT modify any existing classes or selectors. All existing
 * functionality (filters, markers, scroll-to-error, tab order, etc.) continues
 * to work exactly as before.
 *
 * Structure (from outside in):
 *   .acp-dashboard                — root wrapper (already on .accessibility-report)
 *   .acp-dashboard-sticky-header  — URL + score + DDA + actions (sticky top)
 *   .acp-dashboard-fw-banner      — PROMINENT framework detection banner
 *   .acp-dashboard-tabs-nav       — main 4 tabs (sticky below header)
 *   .acp-dashboard-grid           — 2-column layout (main / sidebar)
 *     .acp-dashboard-main         — preview + issues
 *     .acp-dashboard-sidebar      — quicknav + credits + AI handoff
 *
 * @version 1.7.0
 * @package AccessibilityCheckerPro
 */

/* ============================================================================
 * 1. ROOT — Activate dashboard layout
 * ============================================================================ */

/* When .accessibility-report has the .acp-dashboard class, kick in new layout.
 * Without this class, the report falls back to original styling.
 * This makes the redesign feature-flaggable. */
.accessibility-report.acp-dashboard {
    /* Override original padding/margin so sticky header reaches edges */
    padding: 0 !important;
    margin: 0 !important;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* Hide ORIGINAL sections we're replacing or moving.
 * We never delete them — that breaks JS hooks. We hide visually. */
.acp-dashboard .summary-container,
.acp-dashboard > .report-header > h2,
.acp-dashboard .technology-stack-section,
.acp-dashboard .progress-bars-section,
.acp-dashboard .pdf-export-section {
    display: none !important;
}

/* Original report-preview-section (Live Preview iframe) — we'll move into .acp-dashboard-main
 * via wrapper. Just override its margin. */
.acp-dashboard .report-preview-section {
    margin: 0 !important;
}

/* ============================================================================
 * 2. STICKY HEADER — URL, score, DDA, actions
 * ============================================================================ */

.acp-dashboard-sticky-header {
    background: linear-gradient(180deg, #1a2234, #131c2e);
    border-bottom: 1px solid #1e5f99;
    padding: 12px 18px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto auto auto;
    gap: 14px;
    align-items: center;
}

.acp-dashboard-sticky-header .acp-h-meta {
    min-width: 0;
}
.acp-dashboard-sticky-header .acp-h-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    flex-wrap: wrap;
}
.acp-dashboard-sticky-header .acp-h-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}
.acp-dashboard-sticky-header .acp-h-host {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* "Scan another URL" - prominent back link */
.acp-dashboard-sticky-header .acp-back-to-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: #c4b5fd;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s ease;
}
.acp-dashboard-sticky-header .acp-back-to-input:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.6);
    color: #fff;
    text-decoration: none;
}
.acp-dashboard-sticky-header .acp-h-row2 {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
}
.acp-dashboard-sticky-header .acp-h-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

/* Stats compacted */
.acp-dashboard-sticky-header .acp-h-stats {
    display: flex;
    gap: 14px;
    align-items: center;
}
.acp-dashboard-sticky-header .acp-h-stat {
    display: flex;
    flex-direction: column;
}
.acp-dashboard-sticky-header .acp-h-stat-n {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
}
.acp-dashboard-sticky-header .acp-h-stat-l {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}
.acp-dashboard-sticky-header .acp-h-stat-n.crit { color: #f87171; }
.acp-dashboard-sticky-header .acp-h-stat-n.warn { color: #fbbf24; }
.acp-dashboard-sticky-header .acp-h-stat-n.ok { color: #34d399; }

/* Score ring + DDA */
.acp-dashboard-sticky-header .acp-h-score {
    display: flex;
    align-items: center;
    gap: 8px;
}
.acp-dashboard-sticky-header .acp-h-ring {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: conic-gradient(var(--acp-score-color, #dc2626) 0% var(--acp-score-pct, 39%), rgba(255, 255, 255, 0.1) var(--acp-score-pct, 39%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.acp-dashboard-sticky-header .acp-h-ring-inner {
    width: 30px;
    height: 30px;
    background: #1a2234;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
}
.acp-dashboard-sticky-header .acp-h-score-meta {
    display: flex;
    flex-direction: column;
}
.acp-dashboard-sticky-header .acp-h-score-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.acp-dashboard-sticky-header .acp-h-dda {
    background: #dc2626;
    color: #fff;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}
.acp-dashboard-sticky-header .acp-h-dda.compliant {
    background: #10b981;
}

/* Action buttons */
.acp-dashboard-sticky-header .acp-h-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.acp-dashboard-sticky-header .acp-h-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 6px 11px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}
.acp-dashboard-sticky-header .acp-h-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}
.acp-dashboard-sticky-header .acp-h-btn.primary {
    background: #1e5f99;
    border-color: #1e5f99;
}
.acp-dashboard-sticky-header .acp-h-btn.primary:hover {
    background: #2563eb;
}

/* ============================================================================
 * 3. FRAMEWORK DETECTOR BANNER — PROMINENT, never miss it
 * ============================================================================ */

.acp-dashboard-fw-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(251, 146, 60, 0.08));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    /* NOT sticky — sticky only on header itself.
     * If we made fw-banner sticky too, sidebar/tabs would shift wrong on scroll.
     * The fw banner scrolls away naturally with the report content,
     * so user can focus on issues without info repeating. */
    position: relative;
    z-index: 99;
}
.acp-dashboard-fw-banner .acp-fw-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.acp-dashboard-fw-banner .acp-fw-label-icon {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.acp-dashboard-fw-banner .acp-fw-svg-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.acp-dashboard-fw-banner .acp-fw-boxes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.acp-dashboard-fw-banner .acp-fw-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}
.acp-dashboard-fw-banner .acp-fw-box-cat {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin-left: 4px;
}
.acp-dashboard-fw-banner .acp-fw-fix-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-align: right;
    line-height: 1.5;
}
.acp-dashboard-fw-banner .acp-fw-fix-note strong {
    color: #fff;
    font-weight: 500;
}

/* ============================================================================
 * 4. MAIN TABS — Move ABOVE the iframe (was below at 5017px!)
 * ============================================================================ */

.accessibility-report.acp-dashboard .report-tabs {
    background: #131c2e;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0 !important;
    position: sticky;
    top: 80px; /* Just below sticky header (~80px tall) */
    z-index: 98;
}
.accessibility-report.acp-dashboard .report-tabs .tabs-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.accessibility-report.acp-dashboard .report-tabs .tab-button {
    padding: 10px 14px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease;
    box-shadow: none !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
}
.accessibility-report.acp-dashboard .report-tabs .tab-button.active {
    color: #fff !important;
    border-bottom-color: #1e5f99 !important;
    background: none !important;
}
.accessibility-report.acp-dashboard .report-tabs .tab-button:hover:not(.active) {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ============================================================================
 * 5. GRID LAYOUT — Main content + sidebar
 * ============================================================================ */

.acp-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    padding: 16px 18px;
}
.acp-dashboard-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.acp-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 130px; /* Below sticky header + tabs nav */
    align-self: start;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden; /* Prevent AI handoff overflow */
    padding-right: 2px;
    min-width: 0; /* Critical: allow shrinking */
}

/* ============================================================================
 * 6. LIVE PREVIEW — Big and dominant in main column
 * ============================================================================ */

.acp-dashboard-main .report-preview-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.acp-dashboard-main .live-preview-header {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
}

/* ============================================================================
 * 7. TAB CONTENTS — Keep working as before, just style the wrapper
 * ============================================================================ */

.acp-dashboard-main .tab-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 14px 16px;
}

/* ============================================================================
 * 8. SIDEBAR CARDS — Quick navigation, credits, AI handoff
 * ============================================================================ */

.acp-dashboard-sidebar .acp-sb-card {
    background: #0a0f1c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 12px;
}
.acp-dashboard-sidebar .acp-sb-card h3 {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Move existing #issue-navigator into sidebar — restyle it.
 * The Quick Navigation is created by script.js as <div class="issue-navigator">.
 * It's inserted after .live-iframe-section. We'll move it via JS into sidebar. */
.acp-dashboard-sidebar .issue-navigator {
    background: #0a0f1c !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.85);
}
.acp-dashboard-sidebar .issue-navigator .navigator-title {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

/* ============================================================================
 * 9. AI HANDOFF — Make compact, move to sidebar
 * ============================================================================ */

.acp-dashboard-sidebar .acp-aih {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

/* CRITICAL: Force AI handoff controls to stack vertically in narrow sidebar.
 * Original CSS uses grid-template-columns: repeat(4, 1fr) which causes overflow
 * when parent is only 280px wide. We override to 1 column. */
.acp-dashboard-sidebar .acp-aih__controls,
.acp-dashboard-sidebar .acp-aih .acp-aih__controls {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.acp-dashboard-sidebar .acp-aih__control {
    min-width: 0 !important;
}
.acp-dashboard-sidebar .acp-aih__select,
.acp-dashboard-sidebar .acp-aih__input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    min-height: 36px !important;
}
.acp-dashboard-sidebar .acp-aih__control-label {
    font-size: 10px !important;
}
.acp-dashboard-sidebar .acp-aih__card {
    padding: 12px !important;
    max-width: 100%;
}
.acp-dashboard-sidebar .acp-aih__head {
    flex-wrap: wrap;
    gap: 8px;
}
.acp-dashboard-sidebar .acp-aih__head-left {
    min-width: 0 !important;
}
.acp-dashboard-sidebar .acp-aih__title {
    font-size: 14px !important;
}
.acp-dashboard-sidebar .acp-aih__sub {
    font-size: 11px !important;
}
.acp-dashboard-sidebar .acp-aih__meta-wrap {
    align-items: stretch;
    width: 100%;
}
.acp-dashboard-sidebar .acp-aih__meta {
    width: 100%;
    text-align: center;
    font-size: 10px !important;
    padding: 6px 8px !important;
    box-sizing: border-box;
}
.acp-dashboard-sidebar .acp-aih__providers,
.acp-dashboard-sidebar .acp-aih__actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.acp-dashboard-sidebar .acp-aih__provider,
.acp-dashboard-sidebar .acp-aih__btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
}
.acp-dashboard-sidebar .acp-aih__preview {
    font-size: 11px !important;
}
.acp-dashboard-sidebar .acp-aih__preview-toggle {
    font-size: 11px !important;
}

/* ============================================================================
 * 10. RESPONSIVE — Tablet
 * ============================================================================ */

@media (max-width: 1100px) {
    .acp-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .acp-dashboard-sidebar {
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .acp-dashboard-fw-banner {
        grid-template-columns: auto 1fr;
    }
    .acp-dashboard-fw-banner .acp-fw-fix-note {
        grid-column: 1 / -1;
        text-align: left;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
}

/* ============================================================================
 * 11. RESPONSIVE — Mobile
 * ============================================================================ */

@media (max-width: 768px) {
    .acp-dashboard-sticky-header {
        grid-template-columns: 1fr auto;
        padding: 8px 12px;
    }
    .acp-dashboard-sticky-header .acp-h-stats {
        display: none;
    }
    .acp-dashboard-sticky-header .acp-h-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
        margin-top: 8px;
    }
    .acp-dashboard-sticky-header .acp-h-btn {
        flex: 1;
        justify-content: center;
    }

    .acp-dashboard-fw-banner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 12px;
    }
    .acp-dashboard-fw-banner .acp-fw-fix-note {
        text-align: left;
        font-size: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 8px;
    }

    .acp-dashboard-grid {
        grid-template-columns: 1fr;
        padding: 10px 12px;
        gap: 10px;
    }
    .acp-dashboard-sidebar {
        position: static;
        max-height: none;
        display: flex;
    }

    /* Hide some sidebar cards on mobile by default — bottom nav controls them */
    .acp-dashboard.acp-mobile-view-issues .acp-dashboard-sidebar,
    .acp-dashboard.acp-mobile-view-issues .acp-dashboard-main .report-preview-section {
        display: none;
    }
    .acp-dashboard.acp-mobile-view-preview .acp-dashboard-main > *:not(.report-preview-section),
    .acp-dashboard.acp-mobile-view-preview .acp-dashboard-sidebar {
        display: none;
    }
    .acp-dashboard.acp-mobile-view-nav .acp-dashboard-main {
        display: none;
    }
    .acp-dashboard.acp-mobile-view-nav .acp-dashboard-sidebar > *:not(.issue-navigator):not(.acp-sb-card-quicknav) {
        display: none;
    }
    .acp-dashboard.acp-mobile-view-ai .acp-dashboard-main {
        display: none;
    }
    .acp-dashboard.acp-mobile-view-ai .acp-dashboard-sidebar > *:not(.acp-aih) {
        display: none;
    }

    .acp-dashboard-bottom-nav {
        display: grid !important;
    }
}

/* ============================================================================
 * 12. BOTTOM NAVIGATION — Mobile only
 * ============================================================================ */

.acp-dashboard-bottom-nav {
    display: none; /* Shown only on mobile via media query above */
    background: #0a0f1c;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 2px 6px;
    grid-template-columns: repeat(5, 1fr);
    position: sticky;
    bottom: 0;
    z-index: 50;
}
.acp-dashboard-bottom-nav .acp-btm-i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.acp-dashboard-bottom-nav .acp-btm-i.active {
    color: #93c5fd;
}
.acp-dashboard-bottom-nav .acp-btm-icon {
    font-size: 16px;
}

/* ============================================================================
 * 13. SCROLLBAR styling for sidebar
 * ============================================================================ */

.acp-dashboard-sidebar::-webkit-scrollbar {
    width: 6px;
}
.acp-dashboard-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.acp-dashboard-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.acp-dashboard-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
 * 14. FALLBACK — when fw-banner data not available
 * ============================================================================ */

.acp-dashboard-fw-banner.acp-fw-loading {
    opacity: 0.5;
}
.acp-dashboard-fw-banner.acp-fw-empty {
    display: none;
}

/* ============================================================================
 * 15. v1.1.0 — Live tested fixes (sticky header, AI summary, filter buttons,
 *     issue card responsive)
 * ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
 * 15.1 STICKY HEADER — improved layout (image 2 fix)
 * Score circle + DDA badge separated from PHP/JS/Total stats with a divider.
 * Below 1300px width, stats wrap to a second row to avoid score breaking flow.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard-sticky-header {
    grid-template-columns: minmax(0, 1.8fr) auto auto auto;
    gap: 18px;
}
.acp-dashboard-sticky-header .acp-h-score {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 14px;
}
.acp-dashboard-sticky-header .acp-h-stats {
    padding-right: 4px;
}

@media (max-width: 1300px) {
    .acp-dashboard-sticky-header {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            'meta score actions'
            'stats stats stats';
    }
    .acp-dashboard-sticky-header .acp-h-meta { grid-area: meta; }
    .acp-dashboard-sticky-header .acp-h-stats {
        grid-area: stats;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 8px;
        margin-top: 4px;
        justify-content: flex-start;
    }
    .acp-dashboard-sticky-header .acp-h-score {
        grid-area: score;
        border-left: none;
        padding-left: 0;
    }
    .acp-dashboard-sticky-header .acp-h-actions { grid-area: actions; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 15.2 AI ACCESSIBILITY SUMMARY — compact button (image 1 fix)
 * Originally renders as a wide widget. We make it a small inline button
 * that opens the full summary on click. Hide the subtitle line in compact mode.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-ai-summary-wrap {
    margin: 8px 0 !important;
    max-width: 100%;
}
.acp-dashboard .acp-ai-summary-btn {
    padding: 8px 14px !important;
    border-radius: 8px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    flex-wrap: wrap !important;
}
.acp-dashboard .acp-ai-summary-btn-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.acp-dashboard .acp-ai-summary-btn .acp-ai-summary-btn-text,
.acp-dashboard .acp-ai-summary-btn-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: normal !important;
}
/* Hide the large subtitle "Get a plain-English overview..." in compact view */
.acp-dashboard .acp-ai-summary-btn .acp-ai-summary-btn-sub,
.acp-dashboard .acp-ai-summary-btn-sub {
    display: none !important;
}
/* Generated summary box — keep within viewport */
.acp-dashboard .acp-ai-summary-box {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 15.3 FILTER BUTTONS — dark-theme matching colors (image 3 fix)
 * All / Critical / Warning buttons get translucent backgrounds and theme colors.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .severity-filter-btn,
.acp-dashboard-sidebar .severity-filter-btn,
.acp-dashboard-main .severity-filter-btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border: 1px solid !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
}

/* ALL — blue translucent */
.acp-dashboard .severity-filter-btn.filter-all {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
}
.acp-dashboard .severity-filter-btn.filter-all:hover:not(.active) {
    background: rgba(59, 130, 246, 0.18) !important;
}
.acp-dashboard .severity-filter-btn.filter-all.active {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

/* CRITICAL — red translucent */
.acp-dashboard .severity-filter-btn.filter-critical {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #f87171 !important;
}
.acp-dashboard .severity-filter-btn.filter-critical:hover:not(.active) {
    background: rgba(220, 38, 38, 0.18) !important;
}
.acp-dashboard .severity-filter-btn.filter-critical.active {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: #dc2626 !important;
    color: #fca5a5 !important;
}

/* WARNING — orange translucent */
.acp-dashboard .severity-filter-btn.filter-warning {
    background: rgba(251, 146, 60, 0.12) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: #fb923c !important;
}
.acp-dashboard .severity-filter-btn.filter-warning:hover:not(.active) {
    background: rgba(251, 146, 60, 0.18) !important;
}
.acp-dashboard .severity-filter-btn.filter-warning.active {
    background: rgba(251, 146, 60, 0.25) !important;
    border-color: #fb923c !important;
    color: #fdba74 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 15.4 ISSUE CARD HEADER — single-row metadata (image 4 fix)
 * #N + severity badge + title + WCAG level + criteria all on one flex row,
 * wrapping naturally on narrow viewports without stacking each on own line.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .issue-item .issue-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
}
.acp-dashboard .issue-item .issue-header > h5,
.acp-dashboard .issue-item .issue-header h5 {
    font-size: 14px !important;
    margin: 0 !important;
    flex: 1 1 200px !important; /* grow but allow wrap if needed */
    min-width: 0 !important;
    order: 3 !important;
}
.acp-dashboard .issue-item .issue-number-badge {
    order: 1 !important;
    flex-shrink: 0 !important;
}
.acp-dashboard .issue-item .severity-badge {
    order: 2 !important;
    flex-shrink: 0 !important;
}
.acp-dashboard .issue-item .wcag-level {
    order: 4 !important;
    flex-shrink: 0 !important;
}
.acp-dashboard .issue-item .wcag-criteria {
    order: 5 !important;
    flex-shrink: 0 !important;
}


/* ============================================================================
 * 16. MOBILE COMPLETE OVERHAUL — v1.2.0 (May 2026)
 * Fixes for narrow viewports (≤ 768px). Live-tested at 390px.
 *
 * Why this section exists:
 * Original mobile rules (section 11) collided with sticky-header grid + sidebar
 * sticky positioning. This block is a complete mobile override that:
 *   – stacks sticky header into single-column layout (no grid collisions)
 *   – stretches stat boxes evenly across one row
 *   – puts score circle + DDA badge side-by-side
 *   – fans out action buttons (New scan / PDF) full-width 50/50
 *   – stacks fw banner content vertically
 *   – removes sticky positioning from tabs (avoids overlap with sticky header)
 *   – stacks main + sidebar single-column at full width
 *   – AI summary becomes full-width button
 *   – issue card header allows wrap with title on its own line
 *   – AI handoff controls stack to single column (no grid overflow)
 * ============================================================================ */

@media (max-width: 768px) {
    /* ── 16.1 Container — prevent horizontal overflow ── */
    .accessibility-report.acp-dashboard {
        overflow-x: hidden;
    }

    /* ── 16.2 Sticky header — flex column, not grid ── */
    .acp-dashboard-sticky-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }
    .acp-dashboard-sticky-header .acp-h-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .acp-dashboard-sticky-header .acp-h-row1 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .acp-dashboard-sticky-header .acp-h-host {
        max-width: none !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .acp-dashboard-sticky-header .acp-h-row2,
    .acp-dashboard-sticky-header .acp-h-flag {
        white-space: normal !important;
        font-size: 11px !important;
    }

    /* Stats row — even spacing across full width */
    .acp-dashboard-sticky-header .acp-h-stats {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 8px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        margin: 0 !important;
    }
    .acp-dashboard-sticky-header .acp-h-stat {
        flex: 1 !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Score row — circle + DDA side-by-side, full width */
    .acp-dashboard-sticky-header .acp-h-score {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 0 !important;
        border: none !important;
    }
    .acp-dashboard-sticky-header .acp-h-ring {
        flex-shrink: 0 !important;
    }
    .acp-dashboard-sticky-header .acp-h-score-meta {
        flex: 1 !important;
        align-items: flex-start !important;
        min-width: 0 !important;
    }
    .acp-dashboard-sticky-header .acp-h-dda {
        white-space: normal !important;
        text-align: left !important;
        word-break: break-word;
    }

    /* Actions row — full-width split */
    .acp-dashboard-sticky-header .acp-h-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .acp-dashboard-sticky-header .acp-h-actions .acp-h-btn {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* ── 16.3 Framework banner — vertical stack ── */
    .acp-dashboard-fw-banner {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        align-items: flex-start !important;
        grid-template-columns: none !important;
    }
    .acp-dashboard-fw-banner .acp-fw-boxes {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .acp-dashboard-fw-banner .acp-fw-fix-note {
        text-align: left !important;
        font-size: 10px !important;
        width: 100% !important;
    }

    /* ── 16.4 Tabs — horizontal scroll, no sticky ── */
    .accessibility-report.acp-dashboard .report-tabs {
        padding: 0 !important;
        position: relative !important;
        top: auto !important;
    }
    .accessibility-report.acp-dashboard .report-tabs .tabs-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .accessibility-report.acp-dashboard .report-tabs .tab-button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* ── 16.5 Grid layout — single column, full width ── */
    .acp-dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px !important;
        gap: 10px !important;
        grid-template-columns: none !important;
    }
    .acp-dashboard-main,
    .acp-dashboard-sidebar {
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .acp-dashboard-sidebar {
        display: flex !important;
    }

    /* ── 16.6 Live preview — no overflow ── */
    .acp-dashboard-main .report-preview-section {
        width: 100% !important;
        overflow: hidden !important;
    }

    /* ── 16.7 AI summary — full-width button ── */
    .acp-dashboard .acp-ai-summary-btn {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* ── 16.8 Filter buttons — smaller padding ── */
    .acp-dashboard .severity-filter-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* ── 16.9 Issue cards — wrapping headers, smaller titles ── */
    .acp-dashboard .issue-item {
        width: 100% !important;
        overflow: hidden !important;
    }
    .acp-dashboard .issue-item .issue-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    .acp-dashboard .issue-item .issue-header h5 {
        flex: 1 1 100% !important;
        font-size: 13px !important;
        order: 3 !important;
    }

    /* ── 16.10 Bottom nav — disabled until reworked ── */
    .acp-dashboard-bottom-nav {
        display: none !important;
    }
}

/* ============================================================================
 * 17. LIVE PREVIEW HEADER OPTIMIZATION — v1.3.0 (May 2026)
 *
 * Why: The original .live-preview-header is 52px tall and shows
 * "Live Preview (Desktop: 1920px, scale: 47%)" + "Hide Popups" button.
 * That's a lot of vertical space for info that's mostly metadata.
 *
 * Solution:
 *   – Hide the bulky header completely
 *   – "Hide Popups" becomes a small floating overlay button on the iframe
 *     (top-right corner, dark translucent, with backdrop blur)
 *   – The "Desktop 1920px, scale 47%" info gets moved to sticky header
 *     by JS (so users can still see it, just compactly)
 *   – Saves ~52px of vertical real estate per scan
 * ============================================================================ */

/* ── 17.1 Hide the bulky preview header ── */
.acp-dashboard .live-preview-header {
    display: none !important;
}

/* ── 17.2 Make iframe wrapper relative for absolute-positioned button ── */
.acp-dashboard .live-iframe-section,
.acp-dashboard .live-iframe-outer {
    position: relative !important;
}

/* ── 17.3 "Hide Popups" → floating overlay button (top-right of iframe) ── */
.acp-dashboard .acp-hide-popups-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
.acp-dashboard .acp-hide-popups-btn:hover {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}
.acp-dashboard .acp-hide-popups-btn:focus-visible {
    outline: 2px solid #1e5f99 !important;
    outline-offset: 2px !important;
}

/* ── 17.4 Tighten preview-section spacing now that header is gone ── */
.acp-dashboard .report-preview-section,
.acp-dashboard .preview-container {
    padding: 0 !important;
}
.acp-dashboard .live-iframe-section {
    margin-top: 0 !important;
}

/* ── 17.5 Mobile: keep button visible but slightly smaller ── */
@media (max-width: 768px) {
    .acp-dashboard .acp-hide-popups-btn {
        top: 6px !important;
        right: 6px !important;
        padding: 5px 9px !important;
        font-size: 10px !important;
    }
}

/* ── 17.6 Preview info badge in sticky header (added by JS) ── */
.acp-dashboard-sticky-header .acp-h-preview-info {
    margin-left: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================================================
 * 18. SECTION-BY-SECTION FIXES — v1.4.0 (May 2026)
 * Live-tested with Tomas in Chrome DevTools mobile (375px iPhone SE) + tablet
 * (829px) + desktop (1361px). All fixes approved one-by-one.
 *
 * Order of fixes (matches conversation):
 *   18.1  Issue card title on its own row (universal, not just mobile)
 *   18.2  AI Summary mobile padding + Generate button visibility
 *   18.3  Tabs nav horizontal scroll on mobile
 *   18.4  Dark-on-dark "Tested against the Australian DDA..." text fix
 *   18.5  Tablet layout (extend mobile rules to 1024px)
 *   18.6  Disable ALL sticky positioning (header, fw-banner, tabs, bottom nav)
 *   18.7  Empty sidebar collapse (Quick Nav + AI Handoff moved to main)
 *   18.8  Grid padding zero — main full width matches sticky header
 *   18.9  AI Handoff collapsable wrap styling (matches AI Summary size)
 * ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.1 ISSUE CARD HEADER — title on its own row (universal)
 * Fixes Tomas' "WCAG and Critical between buttons looks weird" complaint.
 * Title (h5) gets order:5 and flex:1 1 100% so it always wraps to a new line
 * BELOW the badges. Works on all viewports.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .issue-item .issue-header {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
}
.acp-dashboard .issue-item .issue-number-badge {
    order: 1 !important;
    flex: 0 0 auto !important;
}
.acp-dashboard .issue-item .severity-badge {
    order: 2 !important;
    flex: 0 0 auto !important;
}
.acp-dashboard .issue-item .wcag-level {
    order: 3 !important;
    flex: 0 0 auto !important;
}
.acp-dashboard .issue-item .wcag-criteria {
    order: 4 !important;
    flex: 0 0 auto !important;
}
/* Title — full width on its own row, BELOW badges */
.acp-dashboard .issue-item .issue-header h5,
.acp-dashboard .issue-item .issue-header > h5 {
    order: 5 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 6px 0 0 0 !important;
    font-weight: 600 !important;
}

/* Mobile: smaller compact badges */
@media (max-width: 768px) {
    .acp-dashboard .issue-item .issue-header {
        gap: 4px !important;
        padding: 10px !important;
    }
    .acp-dashboard .issue-item .issue-number-badge {
        font-size: 10px !important;
        padding: 1px 5px !important;
    }
    .acp-dashboard .issue-item .severity-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px;
    }
    .acp-dashboard .issue-item .wcag-level {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }
    .acp-dashboard .issue-item .wcag-criteria {
        font-size: 9px !important;
        padding: 1px 4px !important;
        opacity: 0.7;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }
    .acp-dashboard .issue-item .issue-header h5 {
        font-size: 13px !important;
        margin: 4px 0 0 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.2 AI SUMMARY MOBILE — padding around + Generate button visibility
 * Tomas: "AI summary nemá padding okolo" — added side margins
 * Plus the Generate CTA button was hidden by old CSS, brought back.
 * ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .acp-dashboard .acp-ai-summary-wrap {
        margin: 12px 12px !important;
    }
    .acp-dashboard .acp-ai-summary-btn {
        padding: 12px 14px !important;
        gap: 10px !important;
        width: auto !important;
        flex-wrap: wrap !important;
    }
    /* Bring back the Generate button on the right */
    .acp-dashboard .acp-ai-summary-btn .acp-ai-summary-btn-cta,
    .acp-dashboard .acp-ai-summary-btn-cta {
        display: inline-flex !important;
        margin-left: auto !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        gap: 4px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.3 TABS NAV — horizontal scroll on mobile (instead of vertical stack)
 * ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .acp-dashboard .report-tabs .tabs-nav,
    .accessibility-report.acp-dashboard .report-tabs .tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
    }
    .acp-dashboard .report-tabs .tab-button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 10px 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.4 DARK-ON-DARK TEXT FIX — "Tested against the Australian DDA..."
 * Original color was rgb(51,65,85) (slate-700) on dark bg = unreadable.
 * Now: white 75%, subtle bg, blue border-left for info-box look.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-jurisdiction-intro {
    color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 12px 14px !important;
    border-left: 3px solid rgba(59, 130, 246, 0.5) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 8px 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.5 TABLET LAYOUT — extend mobile sticky-header rules to 1024px
 * Tablet (768–1024px) was rendering desktop grid with stats overflowing.
 * Now sticky header stacks vertically up to 1024px.
 * ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .acp-dashboard-sticky-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }
    .acp-dashboard-sticky-header .acp-h-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .acp-dashboard-sticky-header .acp-h-row1 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .acp-dashboard-sticky-header .acp-h-host {
        max-width: none !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .acp-dashboard-sticky-header .acp-h-row2,
    .acp-dashboard-sticky-header .acp-h-flag {
        white-space: normal !important;
    }
    .acp-dashboard-sticky-header .acp-h-stats {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
        padding: 8px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        margin: 0 !important;
    }
    .acp-dashboard-sticky-header .acp-h-stat {
        flex: 0 0 auto !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .acp-dashboard-sticky-header .acp-h-score {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        padding: 0 !important;
        border: none !important;
    }
    .acp-dashboard-sticky-header .acp-h-ring {
        flex-shrink: 0 !important;
    }
    .acp-dashboard-sticky-header .acp-h-score-meta {
        flex: 1 !important;
        align-items: flex-start !important;
        min-width: 0 !important;
    }
    .acp-dashboard-sticky-header .acp-h-dda {
        white-space: normal !important;
        text-align: left !important;
    }
    .acp-dashboard-sticky-header .acp-h-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .acp-dashboard-sticky-header .acp-h-actions .acp-h-btn {
        flex: 1 !important;
        max-width: 240px !important;
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.6 DISABLE ALL STICKY — Tomas: "vypni ho prosim, bere to misto"
 * Sticky header, fw-banner, report-tabs, and bottom-nav all become relative.
 * Only the AI Handoff modal stays fixed (intentional dialog).
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-dashboard-sticky-header,
.acp-dashboard-sticky-header,
.acp-dashboard .acp-dashboard-fw-banner,
.acp-dashboard-fw-banner,
.acp-dashboard .report-tabs,
.accessibility-report.acp-dashboard .report-tabs,
.acp-dashboard .acp-dashboard-bottom-nav,
.acp-dashboard-bottom-nav {
    position: relative !important;
    top: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.7 EMPTY SIDEBAR COLLAPSE — when Quick Nav + AI Handoff move to main,
 * sidebar is empty. Hide it and let main expand to full width.
 * Uses :has() (modern browsers) + .has-empty-sidebar class fallback (JS adds).
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-dashboard-grid:has(.acp-dashboard-sidebar:empty) {
    grid-template-columns: 1fr !important;
}
.acp-dashboard .acp-dashboard-grid:has(.acp-dashboard-sidebar:empty) .acp-dashboard-sidebar {
    display: none !important;
}
/* Fallback for browsers without :has() — JS adds this class */
.acp-dashboard .acp-dashboard-grid.has-empty-sidebar {
    grid-template-columns: 1fr !important;
}
.acp-dashboard .acp-dashboard-grid.has-empty-sidebar .acp-dashboard-sidebar {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.8 GRID PADDING ZERO — main column must align with sticky header edges
 * Tomas: "spodni cast neni full width jako header"
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-dashboard-grid {
    padding: 0 !important;
}
.acp-dashboard .acp-dashboard-grid.has-empty-sidebar .acp-dashboard-main,
.acp-dashboard .acp-dashboard-grid:has(.acp-dashboard-sidebar:empty) .acp-dashboard-main {
    padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18.9 AI HANDOFF COLLAPSABLE WRAP — built by JS, styled here.
 * Wrapper is fit-content (matches AI Summary button size) on desktop;
 * full-width on mobile. Toggle button rotates chevron when expanded.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-aih-collapse-wrap {
    margin: 8px 0 12px 0;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(124, 58, 237, 0.05);
    width: auto;
    max-width: fit-content;
}
.acp-dashboard .acp-aih-collapse-wrap .acp-aih-toggle {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
.acp-dashboard .acp-aih-collapse-wrap .acp-aih-toggle:hover {
    background: rgba(124, 58, 237, 0.08);
}
.acp-dashboard .acp-aih-collapse-wrap .acp-aih-toggle:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.6);
    outline-offset: 2px;
}
.acp-dashboard .acp-aih-collapse-wrap .acp-aih-chevron {
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
}
.acp-dashboard .acp-aih-collapse-wrap .acp-aih-toggle[aria-expanded="true"] .acp-aih-chevron {
    transform: rotate(180deg);
}
/* The wrapped AI handoff itself — separator line on top when expanded */
.acp-dashboard .acp-aih-collapse-wrap > .acp-aih {
    border-top: 1px solid rgba(124, 58, 237, 0.2);
}

/* Mobile: full-width like AI Summary */
@media (max-width: 768px) {
    .acp-dashboard .acp-aih-collapse-wrap {
        margin: 8px 12px 12px 12px;
        max-width: none;
    }
    .acp-dashboard .acp-aih-collapse-wrap .acp-aih-toggle {
        width: 100%;
    }
}

/* ============================================================================
 * 19. AI ROW + UNIFIED BUTTONS — v1.5.0 (May 2026)
 * Live-tested with Tomas at desktop (1568px) + mobile (375px).
 *
 * Key changes:
 *   19.1  AI Row wrapper — AI Summary + Fix findings AI side-by-side (desktop)
 *         and stacked vertically (mobile). Both buttons identical size 469x48
 *         on desktop, full-width on mobile.
 *   19.2  Issue card action buttons (AI Explain / Copy / Show in Preview)
 *         smaller — font 11px, padding 5px 10px, height 28px.
 *   19.3  Tab Order — green outline + transparent bg (matches sidebar theme).
 *   19.4  Hide WordPress-converted emoji <img> (▶ in Tab Order, etc.)
 *   19.5  AIH toggle rebuilt to match AI Summary structure (icon + label + CTA)
 *   19.6  AIH collapsable wrap — wrapper neutral (no border/bg), styling on toggle
 * ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
 * 19.1 AI Row — AI Summary + Fix findings AI side-by-side
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .acp-ai-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin: 8px 0 12px 0 !important;
    padding: 0 !important;
}

/* Both wrappers — neutral container, each takes equal flex space */
.acp-dashboard .acp-ai-row > .acp-ai-summary-wrap,
.acp-dashboard .acp-ai-row > .acp-aih-collapse-wrap {
    flex: 1 1 280px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: auto !important;
    display: block !important;
}

/* Both buttons — identical visual treatment */
.acp-dashboard .acp-ai-row .acp-ai-summary-btn,
.acp-dashboard .acp-ai-row .acp-aih-toggle {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.acp-dashboard .acp-ai-row .acp-ai-summary-btn:hover,
.acp-dashboard .acp-ai-row .acp-aih-toggle:hover {
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
}

/* Mobile: stack vertically with same side margins */
@media (max-width: 768px) {
    .acp-dashboard .acp-ai-row {
        margin: 12px !important;
        gap: 10px !important;
    }
    .acp-dashboard .acp-ai-row > .acp-ai-summary-wrap,
    .acp-dashboard .acp-ai-row > .acp-aih-collapse-wrap {
        flex: 1 1 100% !important;
    }
}

/* Show "Open" CTA chevron rotation when expanded */
.acp-dashboard .acp-ai-row .acp-aih-toggle[aria-expanded="true"] .acp-aih-chevron {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 19.2 Issue card action buttons — smaller, compact
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard .issue-item button,
.acp-dashboard .issue-item .acp-ai-btn,
.acp-dashboard .issue-item .copy-btn,
.acp-dashboard .issue-item .show-in-preview-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
    min-height: 28px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
}
.acp-dashboard .issue-item button svg {
    width: 12px !important;
    height: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 19.3 Tab Order button — green outline + transparent bg
 * Matches the rest of the sidebar's theme-friendly transparent style.
 * Uses extra specificity to overpower any inline styles set by tab-order-overlay.js
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard button.acp-tab-order-btn,
.accessibility-report.acp-dashboard .acp-tab-order-btn,
.accessibility-report .acp-tab-order-btn {
    background: rgba(16, 185, 129, 0.12) !important;
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: rgb(110, 231, 183) !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}
.acp-dashboard button.acp-tab-order-btn:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: rgb(16, 185, 129) !important;
}
.acp-dashboard .acp-tab-order-btn svg,
.acp-dashboard .acp-tab-order-btn svg path,
.acp-dashboard .acp-tab-order-btn svg polygon {
    stroke: rgb(110, 231, 183) !important;
    fill: rgb(110, 231, 183) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 19.4 Hide WordPress emoji images globally inside dashboard buttons
 * WP auto-converts text emojis (▶, ⚡, ✓) into <img class="emoji"> from s.w.org,
 * which clashes with our design. Hide them on Tab Order and other buttons.
 * ───────────────────────────────────────────────────────────────────────────── */

.acp-dashboard button img.emoji,
.acp-dashboard button img[src*="s.w.org/images/core/emoji"],
.acp-dashboard a img.emoji,
.acp-dashboard a img[src*="s.w.org/images/core/emoji"] {
    display: none !important;
}

/* ============================================================================
 * 20. POLISH PASS — v1.6.0 (May 2026)
 * Live-tested with Tomas. Final round of design polish.
 *
 *   20.1  AI Row — proper side margins on mobile (12px from edges)
 *   20.2  Score circle — 72×72 (was 46×46) for visual dominance
 *   20.3  Quick Navigation pills — match issue card button size
 *   20.4  Tab Order moved to framework banner (next to Bricks Builder)
 *   20.5  Header actions — only PDF stays (New scan removed; "Scan another URL"
 *         is already in the meta column)
 *   20.6  Report Details — equal-height grid for Checked URL / Generated /
 *         Standard boxes with uppercase labels
 * ============================================================================ */

/* ── 20.1 AI Row — side margins on mobile ── */
@media (max-width: 1024px) {
    .acp-dashboard .acp-ai-row {
        margin: 12px !important;
        padding: 0 !important;
    }
}

/* ── 20.2 Score — bigger ring, dominant DDA badge ── */
.acp-dashboard .acp-h-score {
    gap: 18px !important;
}
.acp-dashboard .acp-h-ring {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
}
.acp-dashboard .acp-h-ring svg {
    width: 100% !important;
    height: 100% !important;
}
.acp-dashboard .acp-h-ring-text,
.acp-dashboard .acp-h-ring text {
    font-size: 20px !important;
    font-weight: 700 !important;
}
.acp-dashboard .acp-h-score .acp-h-score-meta {
    gap: 6px !important;
}
.acp-dashboard .acp-h-score .acp-h-score-label {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    opacity: 0.7;
}
.acp-dashboard .acp-h-score .acp-h-dda {
    font-size: 13px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
}

/* ── 20.3 Quick Navigation pills — match issue card button size ── */
.acp-dashboard .issue-navigator button,
.acp-dashboard .issue-navigator .nav-pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
    min-height: 28px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
}
/* Filter buttons (ALL/CRITICAL/WARNING) stay slightly bigger — primary actions */
.acp-dashboard .issue-navigator .severity-filter-btn.filter-all,
.acp-dashboard .issue-navigator .severity-filter-btn.filter-critical,
.acp-dashboard .issue-navigator .severity-filter-btn.filter-warning {
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
}

/* ── 20.4 Tab Order in framework banner (moved by JS) ── */
.acp-dashboard .acp-fw-boxes {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}
.acp-dashboard .acp-fw-boxes .acp-tab-order-btn {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* ── 20.5 Header actions — let PDF take its natural width ── */
.acp-dashboard .acp-h-actions {
    justify-content: flex-end !important;
}
.acp-dashboard .acp-h-actions .acp-h-btn {
    max-width: none !important;
}

/* ── 20.6 Report Details — equal-height grid (3 columns desktop / 1 mobile) ── */
.acp-dashboard .report-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
}
.acp-dashboard .report-info > .report-info-header {
    grid-column: 1 / -1 !important;
}
.acp-dashboard .report-info > .report-url,
.acp-dashboard .report-info > .report-date,
.acp-dashboard .report-info > .report-standard {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    align-self: stretch !important;
}
/* Uppercase labels (CHECKED URL: / GENERATED: / STANDARD:) */
.acp-dashboard .report-info > .report-url > strong,
.acp-dashboard .report-info > .report-date > strong,
.acp-dashboard .report-info > .report-standard > strong {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}
.acp-dashboard .report-info .report-url a {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}
@media (max-width: 768px) {
    .acp-dashboard .report-info {
        grid-template-columns: 1fr !important;
    }
}
/* ============================================================================
 * 21. PREVIEW ZOOM CONTROLS — v1.7.0 (May 2026)
 *
 * +/- zoom buttons + scale label + reset button overlaid on iframe preview.
 * Touch pan (drag) enabled when zoomed in beyond fit scale.
 *
 * Why: On mobile (375px), iframe is 1920px scaled to ~19% — unreadable.
 *      Pinch-to-zoom triggers page-level zoom which can cause a new scan.
 *      These controls let user zoom the IFRAME only, without affecting page.
 *
 * DOM (added by acp-dashboard-layout.js):
 *   .live-iframe-outer  (position: relative — already set in section 17.2)
 *     .acp-zoom-controls
 *       .acp-zoom-btn.acp-zoom-out
 *       .acp-zoom-scale-label
 *       .acp-zoom-btn.acp-zoom-in
 *       .acp-zoom-btn.acp-zoom-reset
 * ============================================================================ */

/* ── 21.1 Zoom control bar — bottom-left overlay on iframe ── */
.acp-dashboard .acp-zoom-controls {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    z-index: 15 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 2px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    font-family: inherit !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ── 21.2 Individual zoom buttons ── */
.acp-dashboard .acp-zoom-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}
.acp-dashboard .acp-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
.acp-dashboard .acp-zoom-btn:active {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(0.95);
}
.acp-dashboard .acp-zoom-btn:focus-visible {
    outline: 2px solid #1e5f99 !important;
    outline-offset: 1px !important;
}
.acp-dashboard .acp-zoom-btn svg {
    display: block !important;
    flex-shrink: 0 !important;
}

/* ── 21.3 Scale label between +/- ── */
.acp-dashboard .acp-zoom-scale-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 36px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 4px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ── 21.4 Reset button — hidden when at fit scale ── */
.acp-dashboard .acp-zoom-reset {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-left: 2px !important;
}
.acp-dashboard .acp-zoom-reset.acp-zoom-hidden {
    display: none !important;
}

/* ── 21.5 Touch action — prevent browser zoom on iframe area when our controls active ── */
.acp-dashboard .live-iframe-outer {
    touch-action: none !important;
}
/* Restore normal touch behavior when NOT zoomed (fitScale = no pan needed).
 * JS toggles this by adding/removing touch listeners conditionally. */

/* ── 21.6 Mobile adjustments ── */
@media (max-width: 768px) {
    .acp-dashboard .acp-zoom-controls {
        bottom: 8px !important;
        left: 8px !important;
        border-radius: 6px !important;
    }
    .acp-dashboard .acp-zoom-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .acp-dashboard .acp-zoom-scale-label {
        min-width: 36px !important;
        height: 32px !important;
        font-size: 10px !important;
    }
}

/* ── 21.7 Coexistence with Hide Popups button ── */
/* Hide Popups is top-right (section 17.3), zoom is bottom-left — no overlap.
 * But if both are present, make sure zoom controls don't block iframe click-through
 * for marker interactions. pointer-events is auto on the bar itself. */
.acp-dashboard .acp-zoom-controls * {
    pointer-events: auto !important;
}

/* ── 21.8 Coexistence with script.js zoom-out button ── */
/* script.js's zoomToMarker() creates .acp-zoom-out-btn (top-right).
 * Our controls are bottom-left. Both can coexist. Style the script.js button
 * to match our dark theme. */
.acp-dashboard .acp-zoom-out-btn {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
.acp-dashboard .acp-zoom-out-btn:hover {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}