/* ============================================
   CCB Corporate Design — Audit Detail Modal
   Component styles for the audit log detail partial (_AuditLogDetail.cshtml).
   All values via design tokens — no hex colors, no magic numbers.
   ============================================ */

/* ---------- Section cards (Snapshot, Changes, ...) ---------- */
.audit-section {
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background-color: var(--white);
}

.audit-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ccb-orange);
    margin: 0 0 var(--spacing-3) 0;
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--ccb-orange-100);
}

/* ---------- Row layout ---------- */
.audit-row {
    row-gap: var(--spacing-2);
}

.audit-row-key {
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}

.audit-row-value {
    color: var(--gray-900);
    word-break: break-word;
}

/* ---------- Leaf value styles ---------- */
.audit-text,
.audit-number {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

.audit-date {
    font-variant-numeric: tabular-nums;
    color: var(--gray-800);
}

.audit-empty {
    color: var(--gray-500);
    font-style: italic;
}

/* ---------- HTML preview block ---------- */
.audit-html-raw {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--gray-700);
    word-break: break-all;
    padding: var(--spacing-2);
    background-color: var(--gray-50);
    border-radius: var(--radius-sm);
}

.audit-html-preview {
    margin-top: var(--spacing-2);
    padding: var(--spacing-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background-color: var(--gray-50);
}

.audit-html-preview-label {
    display: block;
    margin-bottom: var(--spacing-2);
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Diff "Before → After" ---------- */
.audit-diff {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
}

.audit-diff-before {
    color: var(--theme-danger);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.audit-diff-arrow {
    color: var(--gray-500);
    font-weight: var(--font-weight-bold);
}

.audit-diff-after {
    color: var(--theme-success);
    font-weight: var(--font-weight-semibold);
}

/* ---------- Array bullets ---------- */
.audit-array {
    list-style: none;
    padding-left: 0;
}

.audit-array > li {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.audit-array > li:last-child {
    border-bottom: none;
}

/* ---------- Json fallback ---------- */
.audit-json {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--gray-700);
    background-color: var(--gray-50);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    margin: 0;
}