/* QA Automation Labs — shared enhancement layer (loaded on every page via footer.php).
   Copy-locator inspector, dark mode, challenge mode, progress tracker, keyboard shortcuts. */

/* ---- Floating toolbar (bottom-right) ---- */
#qa-toolbar {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#qa-toolbar .qa-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #a83b5b;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
#qa-toolbar .qa-fab:hover { transform: scale(1.08); }
#qa-toolbar .qa-fab.active { background: #28a745; }
#qa-toolbar .qa-fab[data-on="true"].qa-dark-fab { background: #ffc107; color: #212529; }

/* ---- Inspector highlight + popover ---- */
.qa-inspecting * { cursor: crosshair !important; }
.qa-hl-outline {
    outline: 2px solid #a83b5b !important;
    outline-offset: 1px !important;
}
#qa-popover {
    position: fixed;
    z-index: 2100;
    width: 480px;
    max-width: 92vw;
    max-height: 66vh;
    overflow-y: auto;
    background: #212529;
    color: #f8f9fa;
    border-radius: 8px;
    padding: 10px 12px 12px;
    font-size: 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
    display: none;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
}
#qa-popover .qa-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #3a4046;
    cursor: grab;
    user-select: none;
    flex-wrap: wrap;
}
#qa-popover .qa-pop-head:active { cursor: grabbing; }
#qa-popover .qa-pop-grip { color: #6c757d; cursor: grab; font-size: 13px; margin-right: 2px; }
#qa-popover .qa-pop-head:hover .qa-pop-grip { color: #adb5bd; }
#qa-popover.qa-dragging, #qa-popover.qa-dragging .qa-pop-head, #qa-popover.qa-dragging .qa-pop-grip { cursor: grabbing; }
#qa-popover .qa-tag { color: #ff9ec3; font-weight: 700; }
#qa-popover .qa-role {
    background: #a83b5b; color: #fff; border-radius: 10px;
    padding: 1px 8px; font-size: 11px;
}
#qa-popover .qa-fw-switch { display: inline-flex; gap: 2px; background: #2d3238; border-radius: 6px; padding: 2px; }
#qa-popover .qa-fw-btn {
    background: none; border: none; color: #adb5bd; cursor: pointer;
    font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 4px; font-family: inherit;
}
#qa-popover .qa-fw-btn:hover { color: #fff; }
#qa-popover .qa-fw-btn.active { background: #0d6efd; color: #fff; }
#qa-popover .qa-snip-inline { margin-top: 8px; border-top: 1px solid #3a4046; padding-top: 8px; }
#qa-popover .qa-snip-inline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: #a5d6ff; font-size: 11px; }
#qa-popover .qa-snip-inline-code {
    margin: 0; background: #0d1117; color: #e6edf3; border-radius: 4px; padding: 8px 10px;
    font-size: 12px; white-space: pre-wrap; word-break: break-word; overflow-x: auto;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
}
#qa-popover .qa-pin { color: #ffc107; }
#qa-popover .qa-pin-hint { color: #6c757d; font-style: italic; }
#qa-popover .qa-pop-close {
    margin-left: auto; background: none; border: none; color: #adb5bd;
    font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
#qa-popover .qa-pop-close:hover { color: #fff; }
#qa-popover .qa-row { display: flex; align-items: center; margin-bottom: 6px; padding: 3px 4px; border-radius: 4px; }
#qa-popover .qa-row.qa-rec { background: rgba(40, 167, 69, .18); }
#qa-popover .qa-label { flex: 0 0 116px; color: #a5d6ff; }
#qa-popover .qa-row.qa-rec .qa-label { color: #7ee787; font-weight: 700; }
#qa-popover .qa-star { color: #ffd43b; }
#qa-popover .qa-val {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #2d3238;
    padding: 3px 7px;
    border-radius: 3px;
    margin-right: 6px;
}
#qa-popover .qa-copy {
    flex: 0 0 auto;
    background: #a83b5b;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 11px;
}
#qa-popover .qa-copy:hover { background: #c04a6d; }
#qa-popover .qa-copy.copied { background: #28a745; }
#qa-popover .qa-hint { color: #adb5bd; margin-top: 8px; font-size: 11px; line-height: 1.4; }
#qa-popover .qa-try { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; }
#qa-popover .qa-try-inputwrap { position: relative; flex: 1; min-width: 0; display: flex; }
#qa-popover .qa-try-input {
    flex: 1; min-width: 0; background: #2d3238; border: 1px solid #454d55; color: #f8f9fa;
    border-radius: 4px; padding: 4px 26px 4px 8px; font-size: 12px; font-family: inherit;
}
#qa-popover .qa-try-input:focus { outline: none; border-color: #0d6efd; }
#qa-popover .qa-try-clear {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #adb5bd; font-size: 16px; line-height: 1;
    cursor: pointer; padding: 0 5px;
}
#qa-popover .qa-try-clear:hover { color: #fff; }
#qa-popover .qa-try-btn {
    flex: 0 0 auto; background: #0d6efd; color: #fff; border: none; border-radius: 4px;
    padding: 4px 12px; cursor: pointer; font-size: 12px;
}
#qa-popover .qa-try-btn:hover { background: #3b82f6; }
#qa-popover .qa-try-result { flex: 0 0 auto; font-size: 12px; min-width: 60px; }
#qa-popover .qa-try-result.ok { color: #7ee787; }
#qa-popover .qa-try-result.err { color: #ff7b72; }

/* highlight for elements matched by the "try a locator" tester */
.qa-test-hit {
    outline: 3px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .35) !important;
    animation: qa-testpulse .7s ease;
}
@keyframes qa-testpulse {
    0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, .7); }
    100% { box-shadow: 0 0 0 10px rgba(13, 110, 253, 0), 0 0 0 4px rgba(13, 110, 253, .35); }
}

/* ---- Toast ---- */
#qa-toast {
    position: fixed;
    bottom: 80px;
    right: 18px;
    z-index: 2200;
    background: #28a745;
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
#qa-toast.show { opacity: 1; transform: translateY(0); }

/* ---- Challenge spinner overlay ---- */
#qa-challenge-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: #a83b5b;
    font-weight: 600;
}
body.dark-mode #qa-challenge-overlay { background: rgba(0, 0, 0, .8); color: #ffc107; }
#qa-challenge-overlay .qa-spinner {
    width: 54px;
    height: 54px;
    border: 5px solid rgba(168, 59, 91, .25);
    border-top-color: #a83b5b;
    border-radius: 50%;
    animation: qa-spin .8s linear infinite;
}
@keyframes qa-spin { to { transform: rotate(360deg); } }

/* ---- Dashboard progress tracker ---- */
#qa-progress-wrap { max-width: 560px; }
#qa-progress-bar-outer { height: 10px; background: #e9ecef; border-radius: 6px; overflow: hidden; }
#qa-progress-bar-inner { height: 100%; width: 0; background: #28a745; transition: width .3s ease; }
.qa-done-toggle {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 3;
    font-size: 1.1rem;
    color: #ced4da;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}
.qa-done-toggle.done { color: #28a745; }
.tool-card.qa-completed .tool-link { border-color: #28a745; }
.tool-card { position: relative; }

/* ---- Dark-mode readability tweaks for the redesigned dashboard ---- */
body.dark-mode .tool-title { color: #f8f9fa; }
body.dark-mode .tool-link { background: #343a40; border-color: #454d55; }
body.dark-mode .dashboard-intro,
body.dark-mode .tool-desc { color: #adb5bd; }
body.dark-mode [data-testid="snippets-panel"] pre { background: #0d1117 !important; color: #e6edf3; }