/* ============================================================
   ai-page-audit.css
   Styles for the AI page audit panel in _pagefeedback.cshtml.
   Referenced from _Layout.cshtml so it is always available in
   the CMS editor.
   ============================================================ */

/* ── Header row (h3 + audit button) ── */
.pgaudit-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pgaudit-header h3 { margin: 0; }

/* ── Spinner ── */
.pgaudit-spinner {
    font-size: 11px;
    color: #666;
}

/* ── Inline result placeholder ── */
.pgaudit-result { margin-top: 6px; }

/* ── Audit summary row ── */
.pgaudit-summary-row {
    margin-bottom: 10px;
    background: #f8f9fc;
}

.pgaudit-icon {
    color: #5865f2;
    margin-right: 5px;
}

.pgaudit-badge-ml { margin-left: 8px; }
.pgaudit-score    { margin-left: 10px; }

.pgaudit-date {
    margin-left: 12px;
    color: #888;
}

.pgaudit-preview-btn { margin-left: 10px; }

/* ── Recommendations section ── */
.pgaudit-tips-section {
    margin-top: 8px;
    border-top: 1px solid #e0e4f0;
    padding-top: 6px;
}

.pgaudit-tips-toggle {
    font-size: 11px;
    color: #5865f2;
    text-decoration: none;
    cursor: pointer;
}

.pgaudit-tips-toggle:hover { color: #4752c4; text-decoration: none; }

.pgaudit-tip-count {
    background: #5865f2;
    color: #fff;
    margin-left: 4px;
}

.pgaudit-tip-chevron {
    margin-left: 4px;
    font-size: 10px;
}

.pgaudit-tips-body { margin-top: 8px; }

/* ── Individual tip items ── */
.pgaudit-tip-item {
    margin-bottom: 6px;
    padding: 7px 10px;
    border-radius: 4px;
}

.pgaudit-tip--high   { background: #fdf0ef; border-left: 3px solid #c0392b; }
.pgaudit-tip--medium { background: #fef9f0; border-left: 3px solid #e67e22; }
.pgaudit-tip--low    { background: #f4f4f4; border-left: 3px solid #7f8c8d; }

.pgaudit-tip-priority {
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
}

.pgaudit-tip--high   .pgaudit-tip-priority { color: #c0392b; }
.pgaudit-tip--medium .pgaudit-tip-priority { color: #e67e22; }
.pgaudit-tip--low    .pgaudit-tip-priority { color: #7f8c8d; }

.pgaudit-tip-cat {
    font-size: 10px;
    margin-right: 6px;
}

.pgaudit-tip-action {
    margin-top: 3px;
    padding-left: 2px;
    font-size: 11px;
    color: #555;
}

.pgaudit-tip-action-arrow {
    font-size: 9px;
    margin-right: 4px;
}

.pgaudit-tip--high   .pgaudit-tip-action-arrow { color: #c0392b; }
.pgaudit-tip--medium .pgaudit-tip-action-arrow { color: #e67e22; }
.pgaudit-tip--low    .pgaudit-tip-action-arrow { color: #7f8c8d; }

/* ── Audit modal ── */
.pgaudit-modal-dialog {
    width: 95vw;
    max-width: 95vw;
    margin: 25vh auto;
    padding: 0;
}

.pgaudit-modal-content {
    height: 92vh;
    display: flex;
    flex-direction: column;
}

.pgaudit-modal-header { flex-shrink: 0; }

.pgaudit-modal-icon {
    color: #5865f2;
    margin-right: 6px;
}

.pgaudit-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pgaudit-tabs {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px 0;
}

.pgaudit-tab-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ── Preview pane ── */
.pgaudit-pane-preview {
    height: 100%;
    position: relative;
}

.pgaudit-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.pgaudit-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.pgaudit-overlay-text {
    margin-top: 12px;
    color: #666;
}

.pgaudit-error-panel {
    padding: 40px;
    display: none;
    text-align: center;
}

.pgaudit-error-icon { color: #e74c3c; }
.pgaudit-error-msg  { margin-top: 12px; color: #666; }

/* ── Source pane ── */
.pgaudit-pane-source {
    height: 100%;
    position: relative;
    overflow: auto;
}

.pgaudit-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.pgaudit-code-pre {
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 12px 44px 12px 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    font-size: 11px;
    border-radius: 0;
}

.pgaudit-source-loading {
    padding: 40px;
    display: none;
    text-align: center;
}

/* ── Modal footer ── */
.pgaudit-modal-footer { flex-shrink: 0; }