Mujtaba Hussain
Deploy GDPR Interactive Compliance Explorer to HF Spaces
edf6470
Raw History Blame Contribute Delete
82.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GDPR Interactive Compliance Explorer & Knowledge Graph</title>
<meta name="description" content="Interactive legal-tech exploration and visual analytics platform for Regulation (EU) 2016/679 (GDPR), featuring 936 line-by-line normative triples with 4-tier legal provenance.">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Styles -->
<!-- Cytoscape for Knowledge Graph -->
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.28.1/dist/cytoscape.min.js"></script>
<script type="module" crossorigin src="./assets/index-CJB4hcrp.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-ByAd2Vml.css">
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="app-header">
<div class="brand-section">
<div class="brand-logo">&#128737;</div>
<div class="brand-title">
<h1>GDPR Compliance Explorer</h1>
<p>Regulation (EU) 2016/679 &bull; Deontic Normative Triples &amp; 4-Tier Legal Provenance</p>
</div>
</div>
<div class="header-stats">
<div class="stat-pill">
<span class="indicator-dot"></span>
<span>Corpus: <strong>99 Articles &bull; 173 Recitals</strong></span>
</div>
<div class="stat-pill">
<span class="badge badge-verified">&#10003; SHA-256 Provenance</span>
</div>
<div class="stat-pill">
<span>Standards: <strong>W3C DPV &bull; ISO 27701</strong></span>
</div>
</div>
</header>
<!-- Top Metrics Grid -->
<section class="metrics-grid">
<div class="glass-panel metric-card">
<div class="metric-label">Total Normative Clauses</div>
<div class="metric-value" id="statTotalTriples">936</div>
<div class="metric-sub">Line-by-line Hohfeldian tuples</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Binding Legal Obligations</div>
<div class="metric-value" id="statTotalObligations" style="color: var(--mod-obligation);">489</div>
<div class="metric-sub">Mandatory compliance duties</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Knowledge Graph Entities</div>
<div class="metric-value" id="statTotalNodes" style="color: var(--accent-cyan);">355</div>
<div class="metric-sub">Across 924 relational links</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Cryptographic Integrity</div>
<div class="metric-value" id="statVerifiedHashes" style="color: #34d399;">100%</div>
<div class="metric-sub">EUR-Lex ELI permalink verified</div>
</div>
</section>
<!-- Navigation Tabs -->
<nav class="nav-tabs" role="tablist">
<button class="nav-tab active" data-tab="tab-triples" id="tabBtnTriples">
<span>&#128269;</span> Rules &amp; Triples Explorer
</button>
<button class="nav-tab" data-tab="tab-assistant" id="tabBtnAssistant">
<span>&#128172;</span> AI Legal Assistant (Verifiable RAG)
</button>
<button class="nav-tab" data-tab="tab-graph" id="tabBtnGraph">
<span>&#128391;</span> Knowledge Graph Visualizer
</button>
<button class="nav-tab" data-tab="tab-compliance" id="tabBtnCompliance">
<span>&#9881;</span> Compliance Decision Engines
</button>
<button class="nav-tab" data-tab="tab-standards" id="tabBtnStandards">
<span>&#128214;</span> W3C DPV &amp; ISO 27701 Matrix
</button>
<button class="nav-tab" data-tab="tab-dictionary" id="tabBtnDictionary">
<span>&#128196;</span> Data Dictionary Taxonomy
</button>
<button class="nav-tab" data-tab="tab-ropa" id="tabBtnRopa">
<span>&#128221;</span> Art. 30 ROPA Register
</button>
<button class="nav-tab" data-tab="tab-modeler" id="tabBtnModeler">
<span>&#127959;</span> Architecture Modeler
</button>
<button class="nav-tab" data-tab="tab-cross-reg" id="tabBtnCrossReg">
<span>&#9878;</span> Cross-Regulatory (AI Act &bull; NIS2)
</button>
<button class="nav-tab" data-tab="tab-linter" id="tabBtnLinter">
<span>&#128737;</span> Privacy Linter (DevSecOps)
</button>
<button class="nav-tab" data-tab="tab-dpia" id="tabBtnDpia">
<span>&#128203;</span> Art. 35 DPIA Wizard
</button>
<button class="nav-tab" data-tab="tab-dsar" id="tabBtnDsar">
<span>&#128236;</span> DSAR SLA Orchestrator
</button>
</nav>
<!-- TAB 1: TRIPLES EXPLORER -->
<main class="tab-content active" id="tab-triples">
<!-- Filter Bar -->
<div class="glass-panel filter-bar">
<div class="filter-row-primary">
<div class="search-input-wrapper">
<span class="search-icon">&#128269;</span>
<input type="text" id="searchQuery" class="search-input" placeholder="Search verbatim text, actors, actions, or keywords (e.g. '72 hours', 'consent', 'erasure')...">
</div>
<div class="select-wrapper">
<select id="actorFilter" class="filter-select">
<option value="ALL">All Legal Actors</option>
</select>
</div>
<div class="select-wrapper">
<select id="modalityFilter" class="filter-select">
<option value="ALL">All Modalities</option>
<option value="OBLIGATION">Obligation (Shall / Must)</option>
<option value="RIGHT">Right (Shall Have Right)</option>
<option value="PROHIBITION">Prohibition (Shall Not)</option>
<option value="PERMISSION">Permission (May / Can)</option>
<option value="DEFINITION">Definition (Means)</option>
<option value="DECLARATIVE">Declarative Norm</option>
</select>
</div>
<div class="select-wrapper">
<select id="articleFilter" class="filter-select">
<option value="ALL">All Articles (1-99)</option>
</select>
</div>
</div>
<div class="filter-row-secondary">
<div class="quick-toggles">
<span style="color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; font-weight: 600; margin-right: 0.2rem;">Quick Toggles:</span>
<div class="toggle-chip" id="toggleDeadlines">⏱ Has Deadlines</div>
<div class="toggle-chip" id="toggleExceptions">⚠️ Has Statutory Exceptions</div>
<div class="toggle-chip" id="toggleCitations">🔗 Has Cross-Citations</div>
</div>
<div class="filter-actions">
<span id="resultCount" style="color: var(--text-muted); font-size: 0.8rem; margin-right: 0.5rem;">936 rules matched</span>
<button class="btn btn-secondary btn-sm" id="resetFiltersBtn">&#8635; Reset</button>
<button class="btn btn-secondary btn-sm" id="exportCsvBtn">&#8681; CSV</button>
<button class="btn btn-primary btn-sm" id="exportJsonBtn">&#8681; JSON</button>
</div>
</div>
</div>
<!-- Table Container -->
<div class="glass-panel table-container">
<table class="triples-table" id="triplesTable">
<thead>
<tr>
<th style="width: 105px;">ID</th>
<th style="width: 100px;">Location</th>
<th style="width: 180px;">Norm Addressee</th>
<th style="width: 130px;">Modality</th>
<th style="width: 190px;">Predicate &amp; Theme</th>
<th>Verbatim Statutory Clause</th>
<th style="width: 110px; text-align: right;">Provenance</th>
</tr>
</thead>
<tbody id="triplesTableBody">
<!-- Rendered by tripleView.js -->
</tbody>
</table>
<!-- Pagination -->
<div class="pagination-bar">
<div id="paginationInfo">Showing 1-25 of 936 rules</div>
<div class="pagination-controls">
<select id="pageSizeSelect" class="filter-select" style="padding: 0.25rem 0.5rem; font-size: 0.78rem; width: auto;">
<option value="25">25 per page</option>
<option value="50">50 per page</option>
<option value="100">100 per page</option>
</select>
<button class="btn btn-secondary btn-sm" id="prevPageBtn">&larr; Prev</button>
<span id="currentPageNumber" style="font-weight: 600; padding: 0 0.5rem;">Page 1</span>
<button class="btn btn-secondary btn-sm" id="nextPageBtn">Next &rarr;</button>
</div>
</div>
</div>
</main>
<!-- TAB 2: KNOWLEDGE GRAPH VISUALIZER -->
<section class="tab-content" id="tab-graph">
<div class="graph-view-container">
<!-- Graph Canvas -->
<div class="graph-canvas-wrapper glass-panel">
<div class="graph-floating-controls">
<button class="btn btn-secondary btn-sm" id="graphZoomIn" title="Zoom In">+</button>
<button class="btn btn-secondary btn-sm" id="graphZoomOut" title="Zoom Out">&minus;</button>
<button class="btn btn-secondary btn-sm" id="graphFit" title="Fit to Screen">&#8635; Fit</button>
<select id="graphLayoutSelect" class="filter-select" style="padding: 0.35rem; font-size: 0.75rem; background: rgba(15,23,42,0.9);">
<option value="cose">Force-Directed (cose)</option>
<option value="concentric">Concentric Rings</option>
<option value="circle">Circular</option>
<option value="breadthfirst">Hierarchical</option>
</select>
</div>
<div id="cy"></div>
</div>
<!-- Graph Sidebar -->
<aside class="glass-panel graph-sidebar">
<h3>Entity Types &amp; Filters</h3>
<div id="graphLegend" style="font-size: 0.8rem;">
<!-- Generated by graphView.js -->
</div>
<h3 style="margin-top: 0.5rem;">Selected Entity Details</h3>
<div id="graphNodeDetails">
<div style="color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2rem 0;">
Click any node in the knowledge graph to view its legal attributes, definitions, and statutory relationships.
</div>
</div>
</aside>
</div>
</section>
<!-- TAB 3: COMPLIANCE DECISION ENGINES -->
<section class="tab-content" id="tab-compliance">
<!-- W3C SHACL Executable Policy Auditor -->
<div class="shacl-auditor-container">
<div class="shacl-header-card">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem;">
<span style="font-size: 1.5rem;">&#9874;</span>
<h2 style="font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;">W3C SHACL Executable Policy Audit Engine</h2>
</div>
<p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.35rem; max-width: 820px; line-height: 1.45;">
Formally validate operational enterprise architecture payloads against machine-readable W3C SHACL constraint shapes grounded in statutory GDPR norms with 4-tier SHA-256 legal provenance.
</p>
</div>
<div class="shacl-header-meta">
<span class="badge" style="background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.35);">W3C SHACL 1.0</span>
<span class="badge badge-verified">&#128274; 100% Provenance Anchored</span>
<span class="badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35);">&lt; 1ms Execution</span>
</div>
</div>
<div class="shacl-workspace">
<!-- Left Column: Payload Editor & Scenario Selector -->
<div class="shacl-editor-panel">
<div class="shacl-editor-toolbar">
<label style="font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
Operational Architecture Payload
</label>
<div style="display: flex; gap: 0.4rem;">
<button class="btn btn-secondary btn-sm" id="formatJsonBtn" title="Prettify JSON">&#9881; Format</button>
<button class="btn btn-secondary btn-sm" id="resetScenarioBtn" title="Reset to Scenario Default">&#8635; Reset</button>
</div>
</div>
<div class="select-wrapper">
<select id="auditScenarioSelect" class="filter-select" style="font-weight: 600;">
<option value="scenario-a-compliant-saas">Scenario A: Compliant EU Enterprise Cloud SaaS</option>
<option value="scenario-b-unlawful-us-transfer">Scenario B: Unlawful Cross-Border US Cloud Transfer</option>
<option value="scenario-c-late-breach-notification">Scenario C: Late High-Risk Data Breach Notification</option>
<option value="scenario-d-invalid-bundled-consent">Scenario D: Non-Compliant Pre-ticked Bundled Consent</option>
<option value="custom">Custom Operational Architecture (Interactive JSON)</option>
</select>
</div>
<div id="scenarioDescriptionBox" class="scenario-desc-box">
Standard B2B SaaS platform hosted in Frankfurt (EU-central-1), processing customer data with explicit contracts and encryption.
</div>
<textarea id="auditPayloadJson" class="payload-textarea" spellcheck="false" placeholder="Paste or edit operational JSON payload here..."></textarea>
<button id="runShaclAuditBtn" class="btn btn-primary" style="justify-content: center; padding: 0.85rem; font-weight: 700; font-size: 0.95rem;">
<span>&#9654;</span> Run SHACL Compliance Audit
</button>
</div>
<!-- Right Column: Audit Findings & Provenance Feed -->
<div class="shacl-results-panel">
<!-- Score Card -->
<div class="shacl-score-card">
<div class="shacl-score-left">
<div class="shacl-score-circle" id="auditScoreCircle">100</div>
<div>
<div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">
Statutory Compliance Status
</div>
<div id="auditStatusBadge" style="margin-top: 0.25rem;">
<span class="badge badge-verified" style="font-size: 0.85rem; padding: 0.25rem 0.65rem;">COMPLIANT</span>
</div>
</div>
</div>
<div class="shacl-stats-row">
<div>
<div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Evaluated</div>
<div style="font-size: 1.1rem; font-weight: 700; color: #f1f5f9;" id="auditEvaluatedCount">2</div>
</div>
<div>
<div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Critical</div>
<div style="font-size: 1.1rem; font-weight: 700; color: #fb7185;" id="auditCriticalCount">0</div>
</div>
<div>
<div style="font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;">Standard</div>
<div style="font-size: 1.1rem; font-weight: 700; color: #fbbf24;" id="auditStandardCount">0</div>
</div>
</div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
Violation Findings &amp; Normative Citations
</div>
<div style="display: flex; gap: 0.45rem;">
<button class="btn btn-secondary btn-sm" id="copyAuditJsonBtn">&#128203; Copy Report</button>
<button class="btn btn-primary btn-sm" id="exportAuditCertBtn">&#128220; Download Certificate</button>
</div>
</div>
<!-- Dynamic Findings List -->
<div id="auditFindingsContainer" class="shacl-findings-list">
<!-- Dynamically populated -->
</div>
</div>
</div>
</div>
<!-- Statutory Fine Risk & Liability Quantifier (EDPB Guidelines 04/2022) -->
<div class="fine-calculator-card">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem;">
<span style="font-size: 1.4rem;">&#128176;</span>
<h3 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Statutory Fine Risk &amp; Financial Liability Quantifier</h3>
</div>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 820px; line-height: 1.45;">
Quantify financial exposure under the formal 5-step methodology established by the European Data Protection Board (<strong>EDPB Guidelines 04/2022</strong>) pursuant to Article 83 GDPR.
</p>
</div>
<div style="display: flex; gap: 0.45rem; flex-wrap: wrap;">
<span class="badge" style="background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4);">Tier 1: Up to &euro;10M / 2%</span>
<span class="badge" style="background: rgba(244, 63, 94, 0.2); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.4);">Tier 2: Up to &euro;20M / 4%</span>
<span class="badge badge-verified">EDPB 04/2022 Validated</span>
</div>
</div>
<div class="fine-workspace">
<!-- Left Column: Controls & Modifiers -->
<div class="fine-controls-panel">
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
<label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">
Worldwide Annual Turnover (&euro; EUR)
</label>
<span id="fineUndertakingBracket" class="badge" style="background: rgba(99, 102, 241, 0.2); color: #a5b4fc; font-size: 0.75rem;">
Medium Undertaking
</span>
</div>
<input type="text" id="fineTurnoverInput" class="filter-select" value="50,000,000" style="font-weight: 700; font-family: var(--font-mono); font-size: 1.05rem; color: #34d399; margin-bottom: 0.5rem;">
<input type="range" id="fineTurnoverSlider" class="fine-slider" min="500000" max="1000000000" step="1000000" value="50000000">
</div>
<div>
<label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 0.35rem;">
Evaluated Infringed Articles (Linked from SHACL Audit)
</label>
<input type="text" id="fineArticlesInput" class="filter-select" value="Art. 33, Art. 44" style="font-size: 0.85rem; color: var(--accent-cyan); font-family: var(--font-mono);">
</div>
<div>
<label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 0.35rem;">
Infringement Seriousness Rating (Step 1)
</label>
<select id="fineSeriousnessSelect" class="filter-select" style="font-size: 0.85rem;">
<option value="LOW">Low Seriousness (0% - 10% Base Ceiling &bull; Isolated, ordinary data)</option>
<option value="MEDIUM" selected>Medium Seriousness (10% - 20% Base Ceiling &bull; Systemic, moderate impact)</option>
<option value="HIGH">High Seriousness (20% - 100% Base Ceiling &bull; Sensitive/Health data, severe)</option>
</select>
</div>
<!-- Modifying Factors (Step 3) -->
<div class="factors-container">
<div>
<div class="factor-group-label" style="color: #fb7185;">Aggravating Modifiers (+%)</div>
<div style="display: flex; flex-direction: column; gap: 0.35rem;">
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="INTENTIONAL">
<span style="font-size: 0.75rem;">Intentional Action (+25%)</span>
</label>
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="RECIDIVISM">
<span style="font-size: 0.75rem;">Recidivism / Past Fines (+20%)</span>
</label>
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="FAILURE_TO_MITIGATE">
<span style="font-size: 0.75rem;">Failure to Mitigate (+15%)</span>
</label>
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="aggravating" value="LACK_OF_COOPERATION">
<span style="font-size: 0.75rem;">Obstruction of DPA (+20%)</span>
</label>
</div>
</div>
<div>
<div class="factor-group-label" style="color: #34d399;">Mitigating Modifiers (-%)</div>
<div style="display: flex; flex-direction: column; gap: 0.35rem;">
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="PROMPT_SELF_REPORT">
<span style="font-size: 0.75rem;">Spontaneous Notification (-20%)</span>
</label>
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="EXEMPLARY_COOPERATION">
<span style="font-size: 0.75rem;">Exemplary Cooperation (-15%)</span>
</label>
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="ROBUST_PRE_TOMS">
<span style="font-size: 0.75rem;">Robust TOMs / ISO 27001 (-15%)</span>
</label>
<label class="checklist-item" style="padding: 0.45rem;">
<input type="checkbox" class="fine-factor-cb" data-type="mitigating" value="PROMPT_SUBJECT_REMEDY">
<span style="font-size: 0.75rem;">Direct Redress to Subjects (-15%)</span>
</label>
</div>
</div>
</div>
</div>
<!-- Right Column: Fine Exposure Hero & 5-Step Breakdown -->
<div class="fine-summary-panel">
<div class="fine-exposure-hero">
<div class="fine-hero-top">
<div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">
Estimated Fine Exposure (Expected Amount)
</div>
<span id="fineTierBadge" class="badge badge-article">TIER_2 (Art. 83(5))</span>
</div>
<div id="fineExpectedVal" class="fine-expected-amount">&euro;2,000,000</div>
<div class="fine-exposure-grid">
<div class="fine-stat-box">
<div class="fine-stat-label">Min Exposure</div>
<div id="fineMinVal" class="fine-stat-value" style="color: #34d399;">&euro;400,000</div>
</div>
<div class="fine-stat-box">
<div class="fine-stat-label">Upper Exposure</div>
<div id="fineMaxVal" class="fine-stat-value" style="color: #fbbf24;">&euro;2,000,000</div>
</div>
<div class="fine-stat-box">
<div class="fine-stat-label">Statutory Ceiling</div>
<div id="fineCeilingVal" class="fine-stat-value" style="color: #fb7185;">&euro;20,000,000</div>
</div>
</div>
</div>
<div>
<div style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.5rem; letter-spacing: 0.05em;">
EDPB Guidelines 04/2022: 5-Step Assessment Trail
</div>
<div id="fineStepsContainer" style="display: flex; flex-direction: column; gap: 0.45rem;">
<!-- Dynamically populated by fineCalculator.js -->
</div>
</div>
</div>
</div>
</div>
<!-- Quick Regulatory Decision Wizards Grid -->
<div style="margin-bottom: 1rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem;">
<h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem;">Statutory Assessment Wizards</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary);">Interactive decision paths for DPIA mandates, 72-hour breach response, and DPO appointment obligations.</p>
</div>
<div class="audit-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
<!-- DPIA Checker -->
<div class="glass-panel audit-card">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<h4 style="font-size: 1.05rem; font-weight: 700;">DPIA Mandatory Trigger Evaluator</h4>
<p style="font-size: 0.8rem; color: var(--text-secondary);">Article 35(3) GDPR &bull; Data Protection Impact Assessment</p>
</div>
<span class="badge badge-article">Art. 35</span>
</div>
<div style="display: flex; flex-direction: column; gap: 0.45rem;">
<label class="checklist-item">
<input type="checkbox" class="dpia-check" data-mandatory="true">
<div style="font-size: 0.8rem;">
<strong>Automated Profiling:</strong> Systematic evaluation producing legal effects (Art. 35(3)(a)).
</div>
</label>
<label class="checklist-item">
<input type="checkbox" class="dpia-check" data-mandatory="true">
<div style="font-size: 0.8rem;">
<strong>Large-Scale Sensitive Data:</strong> Processing special categories (Art. 9/10) (Art. 35(3)(b)).
</div>
</label>
<label class="checklist-item">
<input type="checkbox" class="dpia-check" data-mandatory="true">
<div style="font-size: 0.8rem;">
<strong>Public Surveillance:</strong> Systematic monitoring of public area on a large scale (Art. 35(3)(c)).
</div>
</label>
<label class="checklist-item">
<input type="checkbox" class="dpia-check" data-mandatory="false">
<div style="font-size: 0.8rem;">
<strong>Vulnerable Data Subjects:</strong> Processing data of children or employees (EDPB Criteria).
</div>
</label>
</div>
<div id="dpiaResultBox" class="audit-status-box status-ok">
<span style="font-size: 1.25rem;">&#10003;</span>
<div>
<div style="font-weight: 700; font-size: 0.85rem;">DPIA Not Mandatory Under Statutory Triggers</div>
<div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;">
Standard processing principles apply under Article 5 and Article 32.
</div>
</div>
</div>
</div>
<!-- 72h Breach Escalation Wizard -->
<div class="glass-panel audit-card">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<h4 style="font-size: 1.05rem; font-weight: 700;">72-Hour Breach Escalation Wizard</h4>
<p style="font-size: 0.8rem; color: var(--text-secondary);">Articles 33 &amp; 34 GDPR &bull; Notification &amp; Communication</p>
</div>
<span class="badge badge-article">Art. 33 &bull; 34</span>
</div>
<div style="display: flex; flex-direction: column; gap: 0.65rem;">
<div>
<label style="font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.25rem;">
Risk to Rights &amp; Freedoms of Individuals:
</label>
<select id="breachRiskSelect" class="filter-select" style="font-size: 0.82rem;">
<option value="none">Unlikely to result in risk (Exempt from DPA)</option>
<option value="moderate" selected>Likely to result in risk (DPA within 72h)</option>
<option value="high">Likely to result in HIGH risk (DPA + Data Subject)</option>
</select>
</div>
<div>
<label style="font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.25rem;">
Were State-of-the-Art Technical Protections Applied (e.g. Encryption)?
</label>
<select id="breachEncryptionSelect" class="filter-select" style="font-size: 0.82rem;">
<option value="no" selected>No / Compromised in cleartext</option>
<option value="yes">Yes / Robust encryption applied (Art. 34(3)(a))</option>
</select>
</div>
</div>
<div id="breachResultBox" class="audit-status-box status-warning">
<span style="font-size: 1.25rem;">&#9888;</span>
<div>
<div style="font-weight: 700; font-size: 0.85rem;">TIER 2: NOTIFY DPA WITHIN 72 HOURS (Art. 33(1))</div>
<div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;">
Notify competent Supervisory Authority without undue delay and within 72 hours.
</div>
</div>
</div>
</div>
<!-- DPO Mandatory Designation Evaluator -->
<div class="glass-panel audit-card">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<h4 style="font-size: 1.05rem; font-weight: 700;">DPO Mandatory Evaluator</h4>
<p style="font-size: 0.8rem; color: var(--text-secondary);">Article 37 GDPR &bull; Data Protection Officer Designation</p>
</div>
<span class="badge badge-article">Art. 37</span>
</div>
<div style="display: flex; flex-direction: column; gap: 0.45rem;">
<label class="checklist-item">
<input type="checkbox" id="dpoPublicBody">
<div style="font-size: 0.8rem;">
<strong>Public Authority:</strong> Processing carried out by a public authority or body (Art. 37(1)(a)).
</div>
</label>
<label class="checklist-item">
<input type="checkbox" id="dpoMonitoring">
<div style="font-size: 0.8rem;">
<strong>Regular &amp; Systematic Monitoring:</strong> Core activities require regular monitoring on a large scale (Art. 37(1)(b)).
</div>
</label>
<label class="checklist-item">
<input type="checkbox" id="dpoSensitive">
<div style="font-size: 0.8rem;">
<strong>Large Scale Sensitive Data:</strong> Core activities consist of processing special data or criminal records (Art. 37(1)(c)).
</div>
</label>
</div>
<div id="dpoResultBox" class="audit-status-box status-ok">
<span style="font-size: 1.25rem;">&#10003;</span>
<div>
<div style="font-weight: 700; font-size: 0.85rem;">Mandatory DPO Designation Not Triggered</div>
<div style="font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem;">
Statutory criteria under Art. 37(1) not met. Voluntary appointment remains open.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TAB 4: W3C DPV & ISO 27701 STANDARDS MATRIX -->
<section class="tab-content" id="tab-standards">
<div class="glass-panel table-container">
<div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">
<h3 style="font-size: 1.1rem; font-weight: 700;">International Open Standards Interoperability</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem;">
Formal mapping of canonical GDPR legal concepts to the <strong>W3C Data Privacy Vocabulary (DPV v1.0)</strong>, <strong>ISO/IEC 27701:2019 (PIMS)</strong>, and <strong>ISO/IEC 27001 (ISMS)</strong> Annex A controls.
</p>
</div>
<table class="triples-table">
<thead>
<tr>
<th>GDPR Legal Concept</th>
<th>Canonical ID</th>
<th>Legal Basis</th>
<th>W3C DPV Term &amp; IRI</th>
<th>ISO/IEC 27701 Clause</th>
<th>ISO/IEC 27001 Mapping</th>
</tr>
</thead>
<tbody id="standardsTableBody">
<!-- Rendered by app.js -->
</tbody>
</table>
</div>
</section>
<!-- TAB 5: DOMAIN KNOWLEDGE DATA DICTIONARY -->
<section class="tab-content" id="tab-dictionary">
<!-- Sub-Navigation Pills -->
<div class="dict-sub-tabs">
<button class="dict-sub-tab active" data-sec="dict-sec-subjects">
<span>&#128101;</span> 1. Subjects (Actors &amp; Duty-Bearers)
</button>
<button class="dict-sub-tab" data-sec="dict-sec-objects">
<span>&#128194;</span> 2. Objects (Assets &amp; Artifacts)
</button>
<button class="dict-sub-tab" data-sec="dict-sec-predicates">
<span>&#128279;</span> 3. Predicates (Deontic Verbs)
</button>
<button class="dict-sub-tab" data-sec="dict-sec-spo">
<span>&#9878;</span> 4. SPO Compatibility Matrix
</button>
<button class="dict-sub-tab" data-sec="dict-sec-ops">
<span>&#9881;</span> 5. Processing Taxonomy (Art. 4(2))
</button>
</div>
<!-- SECTION 1: SUBJECTS -->
<div class="dict-section" id="dict-sec-subjects" style="display: block;">
<div style="margin-bottom: 1rem;">
<h3 style="font-size: 1.15rem; font-weight: 700;">Subject Taxonomy: Legal Duty-Bearers &amp; Right-Holders</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">
Formal domain definitions of all legal persons, natural persons, and public authorities recognized by the GDPR with Hohfeldian legal roles and statutory capacities.
</p>
</div>
<div class="subjects-grid" id="subjectsCardsGrid">
<!-- Rendered by domainDictionaryView.js -->
</div>
</div>
<!-- SECTION 2: OBJECTS -->
<div class="dict-section glass-panel table-container" id="dict-sec-objects" style="display: none;">
<div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">
<h3 style="font-size: 1.15rem; font-weight: 700;">Object Taxonomy: Regulated Assets, Artifacts &amp; Sanctions</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">
Formal domain definitions of regulated information assets, compliance artifacts, risk events, and statutory sanctions.
</p>
</div>
<table class="triples-table">
<thead>
<tr>
<th style="width: 200px;">Object Name &amp; ID</th>
<th style="width: 140px;">Category</th>
<th style="width: 180px;">Sensitivity / Risk</th>
<th style="width: 130px;">Statutory Basis</th>
<th>Domain Definition</th>
<th style="width: 190px;">ISO/IEC 27701 Mapping</th>
</tr>
</thead>
<tbody id="objectsTableBody">
<!-- Rendered by domainDictionaryView.js -->
</tbody>
</table>
</div>
<!-- SECTION 3: PREDICATES -->
<div class="dict-section glass-panel table-container" id="dict-sec-predicates" style="display: none;">
<div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">
<h3 style="font-size: 1.15rem; font-weight: 700;">Predicate Catalog: Domain Actions &amp; Deontic Relations</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">
Formal domain verbs connecting Subjects to Objects with strict Domain/Range constraints, inverse relations, statutory deadlines, and exception rules.
</p>
</div>
<table class="triples-table">
<thead>
<tr>
<th style="width: 210px;">Predicate &amp; Cypher</th>
<th style="width: 150px;">Domain (Subject)</th>
<th style="width: 160px;">Range (Object)</th>
<th style="width: 130px;">Deontic Modality</th>
<th style="width: 170px;">Inverse Predicate</th>
<th style="width: 120px;">Legal Anchor</th>
<th>Operational Meaning &amp; Statutory Constraints</th>
</tr>
</thead>
<tbody id="predicatesTableBody">
<!-- Rendered by domainDictionaryView.js -->
</tbody>
</table>
</div>
<!-- SECTION 4: SPO MATRIX -->
<div class="dict-section glass-panel table-container" id="dict-sec-spo" style="display: none;">
<div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">
<h3 style="font-size: 1.15rem; font-weight: 700;">Subject-Predicate-Object (SPO) Compatibility Matrix</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">
Formal legal compatibility rules validating permissible interactions between Subjects and Objects under EU data protection law.
</p>
</div>
<table class="triples-table">
<thead>
<tr>
<th style="width: 90px;">Rule ID</th>
<th style="width: 150px;">Subject</th>
<th style="width: 190px;">Predicate</th>
<th style="width: 170px;">Object</th>
<th style="width: 130px;">Status</th>
<th style="width: 170px;">Deontic Classification</th>
<th style="width: 110px;">Legal Anchor</th>
<th>Compliance Rule &amp; Statutory Rationale</th>
</tr>
</thead>
<tbody id="spoMatrixTableBody">
<!-- Rendered by domainDictionaryView.js -->
</tbody>
</table>
</div>
<!-- SECTION 5: PROCESSING TAXONOMY -->
<div class="dict-section glass-panel table-container" id="dict-sec-ops" style="display: none;">
<div style="padding: 1.25rem; border-bottom: 1px solid var(--border-subtle);">
<h3 style="font-size: 1.15rem; font-weight: 700;">Controlled Processing Operations Taxonomy</h3>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem;">
Statutory taxonomy of all 15 personal data processing operations established under Article 4(2) GDPR.
</p>
</div>
<table class="triples-table">
<thead>
<tr>
<th style="width: 250px;">Processing Operation Code</th>
<th style="width: 120px;">Legal Basis</th>
<th>Operational &amp; Regulatory Definition</th>
</tr>
</thead>
<tbody id="definitionsTableBody">
<!-- Rendered by app.js -->
</tbody>
</table>
</div>
</section>
<!-- TAB 6: ARTICLE 30 ROPA REGISTER -->
<section class="tab-content" id="tab-ropa">
<!-- ROPA Header Card -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem;">
<span style="font-size: 1.4rem;">&#128221;</span>
<h2 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Article 30 GDPR: Record of Processing Activities (ROPA)</h2>
</div>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 820px; line-height: 1.45;">
Formal inventory of personal data processing operations required of controllers under Article 30(1) GDPR, structured in compliance with standard European Data Protection Board (EDPB) accountability guidelines.
</p>
</div>
<div style="display: flex; gap: 0.45rem; flex-wrap: wrap;">
<button class="btn btn-secondary btn-sm" id="exportRopaCsvBtn">&#8681; Export CSV</button>
<button class="btn btn-secondary btn-sm" id="exportRopaJsonBtn">&#8681; Export JSON</button>
<button class="btn btn-primary btn-sm" id="exportRopaMdBtn">&#8681; Export Markdown</button>
</div>
</div>
<!-- Filter Bar -->
<div class="glass-panel filter-bar" style="margin-bottom: 1.25rem;">
<div class="filter-row-primary">
<div class="search-input-wrapper">
<span class="search-icon">&#128269;</span>
<input type="text" id="ropaSearchInput" class="search-input" placeholder="Search activities, purpose, categories of data, or recipients...">
</div>
<div class="select-wrapper">
<select id="ropaBasisFilter" class="filter-select">
<option value="ALL">All Lawful Bases</option>
<option value="CONTRACT_ART_6_1_B">Contract (Art. 6(1)(b))</option>
<option value="LEGAL_OBLIGATION_ART_6_1_C">Legal Obligation (Art. 6(1)(c))</option>
<option value="LEGITIMATE_INTERESTS_ART_6_1_F">Legitimate Interests (Art. 6(1)(f))</option>
<option value="CONSENT_ART_6_1_A">Consent (Art. 6(1)(a))</option>
</select>
</div>
<div class="select-wrapper">
<select id="ropaTransferFilter" class="filter-select">
<option value="ALL">All Transfer Types</option>
<option value="TRANSFERRED">Third Country Transfers (Outside EEA)</option>
<option value="EEA_ONLY">EEA Local Processing Only</option>
</select>
</div>
<div class="select-wrapper">
<select id="ropaSpecialFilter" class="filter-select">
<option value="ALL">All Data Categories</option>
<option value="SPECIAL_ONLY">Article 9 Special Category Data Only</option>
</select>
</div>
</div>
<div class="filter-row-secondary">
<span id="ropaCountDisplay" style="color: var(--text-muted); font-size: 0.8rem;">4 activities registered</span>
</div>
</div>
<!-- ROPA Table -->
<div class="glass-panel table-container">
<table class="triples-table">
<thead>
<tr>
<th style="width: 110px;">ROPA ID</th>
<th style="width: 260px;">Activity Name &amp; Purpose</th>
<th style="width: 170px;">Lawful Basis</th>
<th style="width: 170px;">Data Subjects</th>
<th style="width: 180px;">Personal Data</th>
<th style="width: 120px;">Transfers</th>
<th style="width: 110px; text-align: right;">Action</th>
</tr>
</thead>
<tbody id="ropaTableBody">
<!-- Rendered by ropaManager.js -->
</tbody>
</table>
</div>
</section>
<!-- TAB 7: VISUAL ARCHITECTURE MODELER -->
<section class="tab-content" id="tab-modeler">
<!-- Modeler Header -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem;">
<span style="font-size: 1.4rem;">&#127959;</span>
<h2 style="font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;">Visual Privacy Architecture Modeler &amp; Live SHACL Auditor</h2>
</div>
<p style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; max-width: 840px; line-height: 1.45;">
Visually design enterprise data flows, processing nodes, storage regions, and third-party processors. The engine live-evaluates W3C SHACL constraint shapes in &lt; 1ms and computes statutory fine exposure on the fly.
</p>
</div>
<div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
<div class="select-wrapper">
<select id="modelerTemplateSelect" class="filter-select" style="font-weight: 600;">
<option value="template-compliant-saas">Template 1: Compliant Multi-Tier EU Cloud</option>
<option value="template-unlawful-us-transfer">Template 2: Unlawful Direct US Analytics Transfer</option>
<option value="template-missing-dpa-processor">Template 3: Unregulated Sub-processor (Missing DPA)</option>
<option value="template-high-risk-ai">Template 4: High-Risk AI Profiling (Missing DPIA)</option>
</select>
</div>
<button class="btn btn-primary btn-sm" id="runModelerAuditBtn">&#9654; Live Audit Canvas</button>
</div>
</div>
<div id="modelerDescBox" class="scenario-desc-box" style="margin-bottom: 1.25rem;">
Multi-tenant B2B platform hosted in Frankfurt (EU), governed by binding DPAs and encrypted databases.
</div>
<!-- Live Audit Status Banner & Score -->
<div class="glass-panel" style="padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div style="display: flex; align-items: center; gap: 1rem;">
<div class="shacl-score-circle" id="modelerScoreCircle" style="width: 52px; height: 52px; font-size: 1.2rem;">100</div>
<div>
<div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700;">Live Architecture Health</div>
<div id="modelerAuditStatus" style="margin-top: 0.2rem;">
<span class="badge badge-verified">COMPLIANT ARCHITECTURE</span>
</div>
</div>
</div>
<div id="modelerFineSummaryBox" style="flex: 1; max-width: 480px;">
<!-- Dynamically populated by architectureModeler.js -->
</div>
</div>
<!-- Visual Canvas Area -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<div style="font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
Interactive Architecture Topology Canvas
</div>
<div style="display: flex; gap: 0.5rem; font-size: 0.75rem; flex-wrap: wrap;">
<span class="badge" style="border-left: 3px solid #38bdf8;">Data Subject</span>
<span class="badge" style="border-left: 3px solid #818cf8;">Controller</span>
<span class="badge" style="border-left: 3px solid #34d399;">Storage</span>
<span class="badge" style="border-left: 3px solid #fbbf24;">Processor</span>
<span class="badge" style="border-left: 3px solid #f43f5e;">Cross-Border</span>
<span class="badge" style="border-left: 3px solid #ec4899;">High-Risk AI</span>
</div>
</div>
<div id="modelerCanvas">
<!-- Dynamically populated by architectureModeler.js -->
</div>
</div>
<!-- Modeler Findings & Violations List -->
<div class="glass-panel" style="padding: 1.5rem;">
<div style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.05em;">
Active Architecture Policy Violations (W3C SHACL Grounded)
</div>
<div id="modelerFindingsList" class="shacl-findings-list">
<!-- Dynamically populated by architectureModeler.js -->
</div>
</div>
</section>
<!-- TAB: CROSS-REGULATORY HARMONIZATION -->
<section class="tab-content" id="tab-cross-reg">
<!-- Top Banner / Header -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<span>&#9878;</span> Cross-Regulatory Harmonization Engine
</h2>
<p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;">
Unified statutory conformance across <strong>GDPR (2016/679)</strong>, <strong>EU AI Act (2024/1689)</strong>, and <strong>NIS2 Directive (2022/2555)</strong>.
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span class="badge" style="background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc;">GDPR: 32016R0679</span>
<span class="badge" style="background: rgba(236, 72, 153, 0.15); border: 1px solid rgba(236, 72, 153, 0.3); color: #f472b6;">AI Act: 32024R1689</span>
<span class="badge" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7;">NIS2: 32022L2555</span>
</div>
</div>
<!-- DUAL-INCIDENT SLA NOTIFICATION TIMELINE -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">
<div>
<div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
Statutory Incident Escalation
</div>
<h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;">
Dual-Incident SLA Notification Timeline (NIS2 24h &bull; GDPR 72h)
</h3>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<button class="btn btn-secondary btn-sm" id="incidentPresetNow">Incident: Now (T=0)</button>
<button class="btn btn-secondary btn-sm" id="incidentPresetApproaching">Incident: -19h (NIS2 Imminent)</button>
<button class="btn btn-secondary btn-sm" id="incidentPresetBreached">Incident: -78h (GDPR Breached)</button>
</div>
</div>
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; background: rgba(0, 0, 0, 0.2); padding: 0.85rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
<label for="incidentDateInput" style="font-size: 0.82rem; font-weight: 600; color: #cbd5e1;">
Detection Timestamp:
</label>
<input type="datetime-local" id="incidentDateInput" class="filter-select" style="max-width: 240px; font-family: var(--font-mono); font-size: 0.82rem;">
<button class="btn btn-primary btn-sm" id="evalIncidentBtn">
<span>&#9881;</span> Re-evaluate SLAs
</button>
<span style="font-size: 0.78rem; color: var(--text-muted); margin-left: auto;">
Dual reporting required when cybersecurity incidents compromise personal data confidentiality.
</span>
</div>
<!-- Milestones Grid -->
<div id="incidentTimelineGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
<!-- Dynamically populated by crossRegulatoryView.js -->
</div>
</div>
<!-- INTERACTIVE CROSS-REGULATORY SYSTEM AUDITOR -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">
<div>
<div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
Live System Compliance Auditing
</div>
<h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;">
Harmonized Risk &amp; Requirement Evaluator
</h3>
</div>
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
<label for="crossPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load System Preset:</label>
<select id="crossPresetSelect" class="filter-select" style="min-width: 300px;">
<option value="scenario-compliant-ai">Compliant Diagnostic Medical AI (100% Pass)</option>
<option value="scenario-ai-credit-scoring">Automated Credit Scoring AI (High-Risk Deficit)</option>
<option value="scenario-biometric-categorization">Biometric Emotion &amp; Political Profiling (Prohibited)</option>
<option value="scenario-dual-ransomware">Critical Infrastructure Ransomware (Active Dual Breach)</option>
</select>
<button class="btn btn-primary btn-sm" id="runCrossAuditBtn">
<span>&#9881;</span> Audit System
</button>
<button class="btn btn-secondary btn-sm" id="exportCrossCertBtn">
<span>&#128229;</span> Export Certificate (.md)
</button>
</div>
</div>
<!-- Auditor Layout Grid -->
<div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; align-items: start;" class="cross-auditor-layout">
<!-- Parameters Checklist Form -->
<div class="glass-panel" style="padding: 1.25rem; background: rgba(0, 0, 0, 0.25);">
<div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.85rem; letter-spacing: 0.05em;">
Operational Architecture Controls &amp; Parameters
</div>
<div style="display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.82rem;">
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkBiometricCategorization" class="cross-audit-toggle">
<span>Biometric Data Ingestion &amp; Recognition Active</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkSensitiveInference" class="cross-audit-toggle">
<span>Inferring Sensitive Data / Emotions (AI Act Art. 5(1)(c))</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkAutomatedDecisions" class="cross-audit-toggle">
<span>Automated Decision-Making / Profiling (GDPR Art. 22)</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkHumanOversight" class="cross-audit-toggle">
<span>Human-in-the-Loop Override Control (AI Act Art. 14)</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkDPIAConducted" class="cross-audit-toggle">
<span>Prior DPIA Completed &amp; Signed (GDPR Art. 35)</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkBiasAudited" class="cross-audit-toggle">
<span>Statistical Bias Audited on Training Datasets (AI Act Art. 10)</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkDataMinimization" class="cross-audit-toggle">
<span>Data Minimization &amp; Privacy-Preserving ML Applied</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkMFAActive" class="cross-audit-toggle">
<span>Mandatory MFA on Privileged Access (NIS2 Art. 21)</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkSupplyChainAudited" class="cross-audit-toggle">
<span>Third-Party Vendor Supply Chain Audited (NIS2 Art. 21(2))</span>
</label>
<label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer;">
<input type="checkbox" id="chkIncidentActive" class="cross-audit-toggle">
<span>Active Cybersecurity Incident / Data Breach Detected</span>
</label>
</div>
</div>
<!-- Evaluation Outcome Panel -->
<div>
<!-- Status Pill & Score -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<div id="crossAuditStatusBadge">
<!-- Populated by crossRegulatoryView.js -->
</div>
<div style="font-size: 0.85rem; color: var(--text-secondary);">
Harmonization Score: <strong id="crossAuditScoreVal" style="color: #34d399; font-size: 1.1rem;">100%</strong>
</div>
</div>
<!-- Findings List -->
<div id="crossAuditFindingsList">
<!-- Populated by crossRegulatoryView.js -->
</div>
</div>
</div>
</div>
<!-- HARMONIZATION MATRIX CATALOG -->
<div class="glass-panel" style="padding: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">
<div>
<div style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">
Unified Legal Framework Matrix
</div>
<h3 style="font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; color: #f1f5f9;">
Tri-Regulatory Rule Standards Catalog
</h3>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<button class="cross-filter-btn active" data-filter="ALL">All Regulations</button>
<button class="cross-filter-btn" data-filter="AI_ACT">GDPR + AI Act</button>
<button class="cross-filter-btn" data-filter="NIS2">GDPR + NIS2</button>
<button class="cross-filter-btn" data-filter="TRI_REG">Tri-Regulatory Core</button>
<div class="search-input-wrapper" style="min-width: 220px;">
<input type="text" id="crossRegSearch" class="search-input" placeholder="Search rules, articles..." style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">
</div>
</div>
</div>
<div id="crossRegRulesContainer">
<!-- Dynamically populated by crossRegulatoryView.js -->
</div>
</div>
</section>
<!-- TAB: PRIVACY-AS-CODE LINTER -->
<section class="tab-content" id="tab-linter">
<!-- Banner -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<span>&#128737;</span> Privacy-as-Code DevSecOps Static Analysis Linter
</h2>
<p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;">
Automated static analysis for <strong>Terraform Infrastructure</strong> and <strong>OpenAPI Specs</strong> enforcing GDPR, AI Act, and NIS2 compliance before deployment.
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span class="badge badge-verified">&#10003; SARIF v2.1.0 Compatible</span>
<span class="badge badge-actor">CI/CD &amp; Pre-Commit Gating</span>
</div>
</div>
<!-- Controls & Editor -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">
<div style="display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;">
<label for="linterPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load Architecture / API Spec:</label>
<select id="linterPresetSelect" class="filter-select" style="min-width: 320px;">
<option value="tf-vulnerable">Vulnerable Terraform Plan (Non-EEA, Unencrypted, Public S3)</option>
<option value="tf-compliant">Compliant Terraform Plan (Frankfurt, KMS Encrypted, Strict IAM)</option>
<option value="api-vulnerable">Vulnerable OpenAPI Spec (Biometric Endpoint Missing Auth/DPIA)</option>
<option value="api-compliant">Compliant OpenAPI Spec (OAuth2 mTLS, DPIA Reference, POST Body)</option>
</select>
</div>
<div style="display: flex; gap: 0.6rem; flex-wrap: wrap;">
<button class="btn btn-primary btn-sm" id="runLinterBtn">
<span>&#9881;</span> Run Privacy Lint
</button>
<button class="btn btn-secondary btn-sm" id="exportSarifBtn">
<span>&#128229;</span> Export SARIF (.json)
</button>
</div>
</div>
<!-- 2-Column Linter Layout -->
<div style="display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem;" class="linter-grid-layout">
<div>
<div style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.4rem; letter-spacing: 0.05em;">
Input Specification (JSON / Terraform Plan / OpenAPI)
</div>
<textarea id="linterCodeEditor" class="linter-editor" spellcheck="false"></textarea>
</div>
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem;">
<div id="linterStatusBadge">
<!-- Dynamically populated -->
</div>
<div style="font-size: 0.82rem; color: var(--text-secondary);">
Infringements: <strong id="linterViolationsCount" style="color: #fca5a5;">0</strong>
</div>
</div>
<div id="linterFindingsList" style="max-height: 400px; overflow-y: auto;">
<!-- Dynamically populated by privacyLinterView.js -->
</div>
</div>
</div>
</div>
</section>
<!-- TAB: ARTICLE 35 DPIA WIZARD -->
<section class="tab-content" id="tab-dpia">
<!-- Banner -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<span>&#128203;</span> Article 35 Data Protection Impact Assessment (DPIA) Wizard
</h2>
<p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;">
Automated statutory risk assessment adhering strictly to <strong>EDPB Guidelines WP 248 rev.01</strong> with inherent/residual risk scoring.
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span class="badge" style="background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc;">GDPR Art. 35 &bull; WP 248</span>
<button class="btn btn-primary btn-sm" id="exportDpiaReportBtn">
<span>&#128229;</span> Export Official DPIA Report (.md)
</button>
</div>
</div>
<!-- Controls & Scoring Overview -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;">
<div style="display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;">
<label for="dpiaPresetSelect" style="font-size: 0.82rem; color: var(--text-secondary);">Load Operation Blueprint:</label>
<select id="dpiaPresetSelect" class="filter-select" style="min-width: 320px;">
<option value="op-ai-recruitment">Autonomous AI Recruitment &amp; Video Scoring Engine</option>
<option value="op-smart-cctv">Commercial Center CCTV Facial Recognition &amp; Heatmap</option>
<option value="op-internal-payroll">Internal Employee Monthly Salary Remittance (Low Risk)</option>
</select>
</div>
<div style="display: flex; gap: 0.8rem; align-items: center;">
<div id="dpiaThresholdBadge">
<!-- Dynamically populated -->
</div>
</div>
</div>
<!-- Operation Details Form -->
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; margin-bottom: 1.25rem;">
<div>
<label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">Operation Title</label>
<input type="text" id="dpiaOpTitle" class="filter-select" style="width: 100%; margin-top: 0.3rem;">
</div>
<div>
<label style="font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">Processing Description &amp; Scope</label>
<input type="text" id="dpiaOpDesc" class="filter-select" style="width: 100%; margin-top: 0.3rem;">
</div>
</div>
<!-- Metrics Grid -->
<div class="metrics-grid" style="margin-bottom: 1rem;">
<div class="glass-panel metric-card">
<div class="metric-label">Triggered High-Risk Criteria</div>
<div class="metric-value" id="dpiaCriteriaCountVal" style="color: var(--mod-prohibition);">0 / 10</div>
<div class="metric-sub">&ge;2 triggers mandatory DPIA</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Inherent Baseline Risk</div>
<div class="metric-value" id="dpiaInherentScoreVal" style="color: #fbbf24;">16 / 25</div>
<div class="metric-sub">Likelihood &times; Severity</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Safeguards Reduction</div>
<div class="metric-value" id="dpiaReductionVal" style="color: #34d399;">-65%</div>
<div class="metric-sub">Applied TOMs mitigating effect</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Final Residual Risk</div>
<div class="metric-value" id="dpiaResidualScoreVal" style="color: #60a5fa;">5.6 / 25</div>
<div class="metric-sub" id="dpiaResidualBadge">🟢 Low Risk</div>
</div>
</div>
<!-- Mandatory Art. 36 Banner -->
<div id="dpiaArt36Banner" style="display: none; margin-bottom: 1rem;">
<!-- Dynamically populated if score >= 15 -->
</div>
<!-- 2-Column Criteria & Risk Form -->
<div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start;">
<div>
<div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.6rem; letter-spacing: 0.05em;">
EDPB WP 248 High-Risk Criteria Checklist
</div>
<div id="dpiaCriteriaContainer">
<!-- Dynamically populated by dpiaWizard.js -->
</div>
</div>
<div>
<!-- Inherent Sliders -->
<div class="glass-panel" style="padding: 1.25rem; background: rgba(0, 0, 0, 0.25); margin-bottom: 1.25rem;">
<div style="font-size: 0.82rem; font-weight: 700; color: var(--accent-indigo); text-transform: uppercase; margin-bottom: 0.85rem; letter-spacing: 0.05em;">
Inherent Risk Parameters (Pre-Mitigation)
</div>
<div style="margin-bottom: 1rem;">
<div style="display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.3rem;">
<span>Likelihood of Harm:</span>
<strong>Level <span id="dpiaLikelihoodVal">4</span> / 5</strong>
</div>
<input type="range" id="dpiaLikelihoodSlider" min="1" max="5" value="4" style="width: 100%;">
</div>
<div>
<div style="display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.3rem;">
<span>Severity of Impact:</span>
<strong>Level <span id="dpiaSeverityVal">4</span> / 5</strong>
</div>
<input type="range" id="dpiaSeveritySlider" min="1" max="5" value="4" style="width: 100%;">
</div>
</div>
<!-- TOMs Checklist -->
<div>
<div style="font-size: 0.82rem; font-weight: 700; color: #34d399; text-transform: uppercase; margin-bottom: 0.6rem; letter-spacing: 0.05em;">
Technical &amp; Organizational Safeguards (TOMs)
</div>
<div id="dpiaTomsContainer">
<!-- Dynamically populated by dpiaWizard.js -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TAB: DSAR SLA ORCHESTRATOR -->
<section class="tab-content" id="tab-dsar">
<!-- Banner -->
<div class="glass-panel" style="padding: 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<h2 style="font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<span>&#128236;</span> Data Subject Access Request (DSAR) SLA Workflow Orchestrator
</h2>
<p style="font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem;">
Statutory 1-month SLA deadline tracking under <strong>Article 12(3) GDPR</strong> with Article 17(3) statutory legal exemption evaluation.
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<button class="btn btn-primary btn-sm" id="newDsarTicketBtn">
<span>+</span> Log New Request
</button>
</div>
</div>
<!-- Top Queue Metrics -->
<section class="metrics-grid" style="margin-bottom: 1.5rem;">
<div class="glass-panel metric-card">
<div class="metric-label">Active DSAR Requests</div>
<div class="metric-value" id="dsarMetricTotal">4</div>
<div class="metric-sub">In queue for fulfillment</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Urgent Requests (&le;5 Days)</div>
<div class="metric-value" id="dsarMetricUrgent" style="color: #fbbf24;">1</div>
<div class="metric-sub">Approaching 1-month SLA limit</div>
</div>
<div class="glass-panel metric-card">
<div class="metric-label">Statutory Breaches (&gt;30 Days)</div>
<div class="metric-value" id="dsarMetricBreached" style="color: var(--mod-prohibition);">1</div>
<div class="metric-sub">Infringing Article 12(3) GDPR</div>
</div>
</section>
<!-- Filter Bar -->
<div class="glass-panel filter-bar" style="margin-bottom: 1.5rem;">
<div class="filter-row-primary">
<div class="search-input-wrapper">
<span class="search-icon">&#128269;</span>
<input type="text" id="dsarSearchInput" class="search-input" placeholder="Search ticket ID, data subject name, email, or request details...">
</div>
<div class="select-wrapper">
<select id="dsarRightFilter" class="filter-select">
<option value="ALL">All Rights (Chapter III)</option>
<option value="RIGHT_ACCESS">Art. 15 Right of Access</option>
<option value="RIGHT_RECTIFICATION">Art. 16 Rectification</option>
<option value="RIGHT_ERASURE">Art. 17 Erasure ('To be Forgotten')</option>
<option value="RIGHT_PORTABILITY">Art. 20 Data Portability</option>
<option value="RIGHT_OBJECT">Art. 21 Right to Object</option>
</select>
</div>
<div class="select-wrapper">
<select id="dsarStatusFilter" class="filter-select">
<option value="ALL">All Statuses</option>
<option value="ACTIVE">🟢 Active (>5d remaining)</option>
<option value="URGENT">⚠️ Urgent (&le;5d remaining)</option>
<option value="BREACHED">🔴 Statutory Breached</option>
</select>
</div>
</div>
</div>
<!-- Tickets Queue List -->
<div id="dsarTicketsContainer">
<!-- Dynamically populated by dsarManager.js -->
</div>
</section>
<!-- TAB: AI LEGAL ASSISTANT -->
<section class="tab-content" id="tab-assistant">
<div class="assistant-layout glass-panel">
<!-- Assistant Header -->
<div class="assistant-header">
<div>
<h3 style="font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem;">
<span>&#128172;</span> Verifiable GDPR Legal Assistant
</h3>
<p style="font-size: 0.8rem; color: var(--text-secondary);">
Deterministic, offline Retrieval-Augmented Generation &bull; 100% Cryptographically Grounded &bull; Zero Hallucinations
</p>
</div>
<div style="display: flex; gap: 0.5rem;">
<span class="badge badge-verified">&#10003; 100% SHA-256 Verifiable</span>
<span class="badge badge-actor">Offline Engine</span>
</div>
</div>
<!-- Quick Prompts Bar -->
<div class="assistant-prompts-bar">
<span style="font-size: 0.76rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; align-self: center;">Suggested:</span>
<div class="assistant-prompt-pill" data-prompt="What must a controller do when a personal data breach occurs?">
What must a controller do when a personal data breach occurs?
</div>
<div class="assistant-prompt-pill" data-prompt="Under what conditions is a Data Protection Impact Assessment (DPIA) mandatory?">
When is a DPIA mandatory?
</div>
<div class="assistant-prompt-pill" data-prompt="What are the exceptions to the data subject's right to erasure?">
Exceptions to right to erasure
</div>
<div class="assistant-prompt-pill" data-prompt="What are the 6 lawful bases for processing personal data under Article 6?">
6 lawful bases under Art. 6
</div>
<div class="assistant-prompt-pill" data-prompt="What are the maximum administrative fine ceilings under Article 83?">
Fines &amp; penalties under Art. 83
</div>
</div>
<!-- Chat Thread -->
<div class="assistant-messages-container" id="assistantMessages">
<div class="chat-message assistant-message">
<div class="message-sender">&#128737; GDPR Legal Reasoner (Zero-Hallucination Engine)</div>
<div class="message-content">
<div style="font-size: 0.92rem; line-height: 1.5; color: #f1f5f9;">
Welcome to the <strong>Verifiable GDPR AI Legal Assistant</strong>.
<p style="margin-top: 0.5rem; color: #cbd5e1; font-size: 0.86rem;">
Unlike generic large language models that may fabricate article numbers or misquote statutory timelines, this reasoning engine is mathematically anchored to the <strong>936 line-by-line normative triples</strong> of Regulation (EU) 2016/679.
</p>
<p style="margin-top: 0.5rem; color: #cbd5e1; font-size: 0.86rem;">
Ask any legal or compliance question, or select a suggested prompt above. Every retrieved legal rule includes its exact Hohfeldian modality, duty bearer, statutory timeline, and <strong>cryptographic SHA-256 provenance link</strong>.
</p>
</div>
</div>
</div>
</div>
<!-- Input Bar -->
<div class="assistant-input-bar">
<input type="text" id="assistantInput" class="assistant-input-field" placeholder="Ask any GDPR compliance question (e.g. 'What are processor obligations for data breaches?', 'What rights exist under automated profiling?')...">
<button class="btn btn-primary" id="assistantSendBtn">
<span>Ask Assistant</span> &rarr;
</button>
</div>
</div>
</section>
</div>
<!-- 4-TIER PROVENANCE MODAL -->
<div class="modal-overlay" id="provenanceModal">
<div class="modal-box">
<div class="modal-header">
<div>
<div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.2rem;">
4-Tier Statutory Provenance Inspector
</div>
<h2 id="modalTitle" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<!-- Rendered by provenanceModal.js -->
</h2>
</div>
<button class="modal-close" id="modalCloseBtn" title="Close (Esc)">&times;</button>
</div>
<div id="modalBody">
<!-- Rendered by provenanceModal.js -->
</div>
</div>
</div>
<!-- ARTICLE 30 ROPA DETAILS MODAL -->
<div class="modal-overlay" id="ropaModal">
<div class="modal-box">
<div class="modal-header">
<div>
<div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.2rem;">
Article 30 Processing Activity Specification
</div>
<h2 id="ropaModalTitle" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<!-- Rendered by ropaManager.js -->
</h2>
</div>
<button class="modal-close" id="ropaModalCloseBtn" title="Close (Esc)">&times;</button>
</div>
<div id="ropaModalBody">
<!-- Rendered by ropaManager.js -->
</div>
</div>
</div>
<!-- DSAR RESPONSE & EXEMPTION MODAL -->
<div class="modal-overlay" id="dsarResponseModal">
<div class="modal-box" style="max-width: 750px;">
<div class="modal-header">
<div>
<div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.2rem;">
Data Subject Rights SLA Workflow
</div>
<h2 id="dsarResponseTitle" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;">
<!-- Rendered by dsarManager.js -->
</h2>
</div>
<button class="modal-close" id="dsarResponseCloseBtn" title="Close (Esc)">&times;</button>
</div>
<div id="dsarResponseBody">
<!-- Rendered by dsarManager.js -->
</div>
</div>
</div>
<!-- Main JavaScript App -->
</body>
</html>