{"id":2786,"date":"2026-05-08T15:43:11","date_gmt":"2026-05-08T19:43:11","guid":{"rendered":"https:\/\/shirishranjit.com\/blog1\/?page_id=2786"},"modified":"2026-05-12T15:29:09","modified_gmt":"2026-05-12T19:29:09","slug":"2786-2","status":"publish","type":"page","link":"https:\/\/shirishranjit.com\/blog1\/architect-principles\/2786-2","title":{"rendered":""},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Multi-Tenant Car Garage Repair SaaS Platform Architecture for Microsoft Azure<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Executive Summary<\/h2>\n\n\n\n<p>This document presents a&nbsp;production-ready, enterprise-grade architecture&nbsp;for a multi-tenant SaaS platform designed to serve car garage repair businesses. The solution leverages&nbsp;Azure-native services&nbsp;with a pooled database tenancy model to support&nbsp;99% availability,&nbsp;24-hour RTO\/RPO, and&nbsp;offline-capable mobile applications&nbsp;across iOS and Android. The architecture supports&nbsp;customer-facing mobile apps&nbsp;and&nbsp;web-based admin portals&nbsp;for garage staff, optimized for&nbsp;multi-region deployment&nbsp;to ensure low latency and disaster recovery capabilities.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">A) High-Level Azure Architecture<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Architecture Overview<\/h3>\n\n\n\n<p>The architecture follows a&nbsp;modern, cloud-native approach&nbsp;with clear tenant boundaries, leveraging Azure&#8217;s global infrastructure for resilience and performance.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: #464feb;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: linear-gradient(to bottom, transparent 0%, #b0beff 15%, #b0beff 85%, transparent 100%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: #f5f7fa;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: #ebefff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-accent: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --radius: 12px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: #e0e0e0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px rgba(39, 16, 16, 0.1);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --font: \"Segoe Sans\", \"Segoe UI\", \"Segoe UI Web (West European)\", -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --overflow-wrap: break-word;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; @media (prefers-color-scheme: dark) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: #7385ff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: linear-gradient(to bottom, transparent 0%, transparent 3%, #6264a7 30%, #6264a7 50%, transparent 97%, transparent 100%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: #1a1a1a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: #2a2a2a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: #3d3d3d;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; @media (prefers-contrast: more),&nbsp;&nbsp;&nbsp; (forced-colors: active) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: ActiveText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: ActiveText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: CanvasText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: CanvasText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: ButtonBorder;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insights-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: grid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns: repeat(2,minmax(240px,1fr));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card:last-child:nth-child(odd){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-column: 1 \/ -1;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: var(--shadow);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; min-width: 220px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px 20px 16px 20px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px 0px 8px 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 8px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card .icon {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline-flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; justify-content: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card p {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.92rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.5;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow-wrap: var(--overflow-wrap);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card p b, .insight-card p strong {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metrics-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display:grid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns:repeat(2,minmax(210px,1fr));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 16px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card:last-child:nth-child(odd){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-column:1 \/ -1; &nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 1 1 210px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-direction: column;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 8px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-title);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card .metric-card-value {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.4rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card p {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.85rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.45;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow-wrap: var(--overflow-wrap);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 0 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 56px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; list-style: none;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.9rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.4;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container::before {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: \"\";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: calc(-40px + 56px);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 2px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--timeline-ln);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px 20px 16px 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li:last-child {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 0px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li::before {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: \"\";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 18px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: -40px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 14px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 14px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: var(--timeline-border) 2px solid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 50%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transform: translateX(-50%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0px 0px 2px 0px #00000012, 0px 4px 8px 0px #00000014;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 5px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li h4 em {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 5px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-style: normal;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li * {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.9rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.4;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li * b, .timeline-container &gt; li * strong {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @media (max-width:600px){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .metrics-container,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .insights-container{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns:1fr;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }&lt;\/style&gt;&lt;div class=\"metrics-container\"&gt; &lt;div class=\"metric-card\"&gt;&lt;h4&gt;Target Availability&lt;\/h4&gt;&lt;div class=\"metric-card-value\"&gt;99%&lt;\/div&gt;&lt;p&gt;SLA with multi-region deployment&lt;\/p&gt;&lt;\/div&gt; &lt;div class=\"metric-card\"&gt;&lt;h4&gt;RTO\/RPO Target&lt;\/h4&gt;&lt;div class=\"metric-card-value\"&gt;24 hrs&lt;\/div&gt;&lt;p&gt;Disaster recovery objective&lt;\/p&gt;&lt;\/div&gt; &lt;div class=\"metric-card\"&gt;&lt;h4&gt;Avg Users\/Tenant&lt;\/h4&gt;&lt;div class=\"metric-card-value\"&gt;7&lt;\/div&gt;&lt;p&gt;Staff per garage location&lt;\/p&gt;&lt;\/div&gt; &lt;div class=\"metric-card\"&gt;&lt;h4&gt;Tenancy Model&lt;\/h4&gt;&lt;div class=\"metric-card-value\"&gt;Pooled DB&lt;\/div&gt;&lt;p&gt;Cost-optimized isolation&lt;\/p&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Azure Services Selection Justification<\/h3>\n\n\n\n<p>Azure App Service (Recommended) vs AKS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Azure App Service\u00a0is the recommended compute platform for this workload because:\n<ul class=\"wp-block-list\">\n<li>Simplified operations: Built-in auto-scaling, load balancing, and managed patching reduce operational overhead<\/li>\n\n\n\n<li>Cost-effective for small-to-medium scale: With average 7 users per tenant, the operational complexity of Kubernetes is unnecessary<\/li>\n\n\n\n<li>Multi-tenant features: Native support for deployment slots, traffic routing, and scaling rules suitable for pooled tenancy models<\/li>\n\n\n\n<li>Faster time-to-market: PaaS abstraction accelerates development without sacrificing control<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>AKS would be preferred if: The platform scales to hundreds of tenants with complex microservices requiring fine-grained orchestration, or if there&#8217;s need for hybrid\/edge deployment<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Core Architecture Components<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>graph TB&nbsp;&nbsp;&nbsp; subgraph \"Client Layer\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MA&#91;Mobile Apps iOS\/Android]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; WA&#91;Web Admin Portal]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Global Edge - Azure Front Door\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AFD&#91;Azure Front Door Premium]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; WAF&#91;Web Application Firewall]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CDN&#91;Content Delivery]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"API Gateway Layer\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; APIM&#91;Azure API Management]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subgraph \"Multi-Region Gateways\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; APIM1&#91;Primary Region Gateway]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; APIM2&#91;Secondary Region Gateway]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Identity &amp; Security\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ENTRA&#91;Microsoft Entra ID B2B]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; KV&#91;Azure Key Vault]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Application Tier - Region 1 Primary\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AS1&#91;Azure App Service Plan]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; API1&#91;API Apps - REST\/GraphQL]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FUNC1&#91;Azure Functions - Background Jobs]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Application Tier - Region 2 Secondary\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AS2&#91;Azure App Service Plan]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; API2&#91;API Apps - REST\/GraphQL]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FUNC2&#91;Azure Functions - Background Jobs]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Data Tier - Region 1\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SQL1&#91;\"(Azure SQL Database&lt;br\/&gt;Elastic Pool)\"]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; BLOB1&#91;\"Blob Storage&lt;br\/&gt;Hot\/Cool Tiers\"]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; REDIS1&#91;Azure Cache for Redis]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Data Tier - Region 2\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SQL2&#91;\"(Azure SQL Database&lt;br\/&gt;Read Replica)\"]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; BLOB2&#91;\"Blob Storage&lt;br\/&gt;RA-GZRS Replica\"]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Messaging &amp; Events\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SB&#91;\"Azure Service Bus&lt;br\/&gt;Premium Tier\"]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; EG&#91;Azure Event Grid]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Monitoring &amp; Operations\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MON&#91;Azure Monitor]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AI&#91;Application Insights]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; LA&#91;Log Analytics]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; subgraph \"Notification Services\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NH&#91;Azure Notification Hubs]&nbsp;&nbsp;&nbsp; end&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; MA --&gt; AFD&nbsp;&nbsp;&nbsp; WA --&gt; AFD&nbsp;&nbsp;&nbsp; AFD --&gt; WAF&nbsp;&nbsp;&nbsp; WAF --&gt; APIM&nbsp;&nbsp;&nbsp; APIM --&gt; APIM1&nbsp;&nbsp;&nbsp; APIM --&gt; APIM2&nbsp;&nbsp;&nbsp; APIM1 --&gt; ENTRA&nbsp;&nbsp;&nbsp; APIM1 --&gt; AS1&nbsp;&nbsp;&nbsp; APIM2 --&gt; AS2&nbsp;&nbsp;&nbsp; AS1 --&gt; SQL1&nbsp;&nbsp;&nbsp; AS1 --&gt; BLOB1&nbsp;&nbsp;&nbsp; AS1 --&gt; REDIS1&nbsp;&nbsp;&nbsp; AS2 --&gt; SQL2&nbsp;&nbsp;&nbsp; AS2 --&gt; BLOB2&nbsp;&nbsp;&nbsp; API1 --&gt; SB&nbsp;&nbsp;&nbsp; API1 --&gt; EG&nbsp;&nbsp;&nbsp; API2 --&gt; SB&nbsp;&nbsp;&nbsp; FUNC1 --&gt; SB&nbsp;&nbsp;&nbsp; FUNC2 --&gt; SB&nbsp;&nbsp;&nbsp; SQL1 -.Geo-Replication.-&gt; SQL2&nbsp;&nbsp;&nbsp; BLOB1 -.RA-GZRS.-&gt; BLOB2&nbsp;&nbsp;&nbsp; AS1 --&gt; KV&nbsp;&nbsp;&nbsp; AS2 --&gt; KV&nbsp;&nbsp;&nbsp; API1 --&gt; NH&nbsp;&nbsp;&nbsp; API2 --&gt; NH&nbsp;&nbsp;&nbsp; NH --&gt; MA&nbsp;&nbsp;&nbsp; AS1 --&gt; AI&nbsp;&nbsp;&nbsp; AS2 --&gt; AI&nbsp;&nbsp;&nbsp; AI --&gt; MON&nbsp;&nbsp;&nbsp; MON --&gt; LA<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Service Mapping to Architecture Layers<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td>Layer<\/td><td>Azure Service<\/td><td>Purpose<\/td><td>Multi-Tenant Consideration<\/td><\/tr><\/thead><tbody><tr><td>Global Edge<\/td><td>Azure Front Door Premium<\/td><td>Global load balancing, SSL termination, WAF protection, content caching<\/td><td>Single instance serving all tenants with tenant-aware routing<\/td><\/tr><tr><td>API Gateway<\/td><td>Azure API Management (Multi-region)<\/td><td>API abstraction, rate limiting, tenant validation, policy enforcement<\/td><td>Per-tenant rate limits, subscription keys, usage analytics<\/td><\/tr><tr><td>Identity<\/td><td>Microsoft Entra ID B2B<\/td><td>Authentication, authorization, tenant claim injection<\/td><td>Tenant ID embedded in JWT claims<\/td><\/tr><tr><td>Secrets<\/td><td>Azure Key Vault<\/td><td>Centralized secrets, certificates, connection strings<\/td><td>Tenant-specific secrets isolated by naming convention<\/td><\/tr><tr><td>Compute<\/td><td>Azure App Service (Premium V3)<\/td><td>REST\/GraphQL APIs, tenant-aware business logic<\/td><td>Shared app services with tenant context in all requests<\/td><\/tr><tr><td>Async Processing<\/td><td>Azure Functions (Premium Plan)<\/td><td>Background jobs, scheduled tasks, event handlers<\/td><td>Tenant ID in message metadata for isolation<\/td><\/tr><tr><td>Database<\/td><td>Azure SQL Database (Elastic Pool)<\/td><td>Pooled tenant data with row-level security<\/td><td>Single database,&nbsp;<code>TenantId<\/code>discriminator column<\/td><\/tr><tr><td>Object Storage<\/td><td>Azure Blob Storage (RA-GZRS)<\/td><td>Photos, documents, invoices, vehicle images<\/td><td>Tenant-prefixed container naming<\/td><\/tr><tr><td>Cache<\/td><td>Azure Cache for Redis (Premium)<\/td><td>Session state, tenant configuration, frequently accessed data<\/td><td>Tenant-keyed cache entries<\/td><\/tr><tr><td>Messaging<\/td><td>Azure Service Bus (Premium)<\/td><td>Reliable async messaging, workflow orchestration<\/td><td>Tenant ID in message properties<\/td><\/tr><tr><td>Events<\/td><td>Azure Event Grid<\/td><td>Domain events, webhooks, integrations<\/td><td>Tenant-filtered event subscriptions<\/td><\/tr><tr><td>Notifications<\/td><td>Azure Notification Hubs<\/td><td>Push notifications to mobile devices<\/td><td>Per-tenant notification templates and tags<\/td><\/tr><tr><td>Monitoring<\/td><td>Application Insights<\/td><td>Telemetry, performance, errors, custom metrics<\/td><td>Tenant dimension in all telemetry<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">B) Multi-Tenant SaaS Design (Deep Dive)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tenant Definition<\/h3>\n\n\n\n<p>A tenant is defined as a garage company, which may operate one or multiple physical locations. Each garage company represents an independent business entity with its own:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Staff (owners, service advisors, mechanics)<\/li>\n\n\n\n<li>Customers and their vehicles<\/li>\n\n\n\n<li>Work orders, estimates, and invoices<\/li>\n\n\n\n<li>Configuration and branding preferences<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tenancy Model: Pooled Database with Discriminator Pattern<\/h3>\n\n\n\n<p>The architecture implements a&nbsp;pooled multi-tenant model&nbsp;where all tenants share the same Azure SQL Database within an Elastic Pool, using a&nbsp;<code>TenantId<\/code>&nbsp;discriminator column for logical isolation.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: #464feb;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: linear-gradient(to bottom, transparent 0%, #b0beff 15%, #b0beff 85%, transparent 100%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: #f5f7fa;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: #ebefff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-accent: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --radius: 12px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: #e0e0e0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px rgba(39, 16, 16, 0.1);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --font: \"Segoe Sans\", \"Segoe UI\", \"Segoe UI Web (West European)\", -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --overflow-wrap: break-word;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; @media (prefers-color-scheme: dark) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: #7385ff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: linear-gradient(to bottom, transparent 0%, transparent 3%, #6264a7 30%, #6264a7 50%, transparent 97%, transparent 100%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: #1a1a1a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: #2a2a2a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: #3d3d3d;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; @media (prefers-contrast: more),&nbsp;&nbsp;&nbsp; (forced-colors: active) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: ActiveText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: ActiveText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: CanvasText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: CanvasText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: ButtonBorder;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insights-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: grid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns: repeat(2,minmax(240px,1fr));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card:last-child:nth-child(odd){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-column: 1 \/ -1;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: var(--shadow);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; min-width: 220px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px 20px 16px 20px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px 0px 8px 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 8px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card .icon {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline-flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; justify-content: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card p {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.92rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.5;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow-wrap: var(--overflow-wrap);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card p b, .insight-card p strong {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metrics-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display:grid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns:repeat(2,minmax(210px,1fr));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 16px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card:last-child:nth-child(odd){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-column:1 \/ -1; &nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 1 1 210px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-direction: column;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 8px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-title);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card .metric-card-value {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.4rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card p {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.85rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.45;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow-wrap: var(--overflow-wrap);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 0 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 56px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; list-style: none;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.9rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.4;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container::before {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: \"\";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: calc(-40px + 56px);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 2px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--timeline-ln);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px 20px 16px 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li:last-child {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 0px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li::before {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: \"\";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 18px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: -40px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 14px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 14px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: var(--timeline-border) 2px solid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 50%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transform: translateX(-50%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0px 0px 2px 0px #00000012, 0px 4px 8px 0px #00000014;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 5px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li h4 em {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 5px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-style: normal;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li * {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.9rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.4;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li * b, .timeline-container &gt; li * strong {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @media (max-width:600px){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .metrics-container,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .insights-container{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns:1fr;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }&lt;\/style&gt;&lt;div class=\"insights-container\"&gt; &lt;div class=\"insight-card\"&gt;&lt;h4&gt;? Pooled Model Benefits&lt;\/h4&gt;&lt;p&gt;Cost efficiency, simplified operations, easier schema updates, optimal for 7 users\/tenant scale&lt;\/p&gt; &lt;\/div&gt; &lt;div class=\"insight-card\"&gt;&lt;h4&gt;? Isolation Strategy&lt;\/h4&gt;&lt;p&gt;Row-Level Security (RLS), application-layer validation, separate Blob containers per tenant&lt;\/p&gt; &lt;\/div&gt; &lt;div class=\"insight-card\"&gt;&lt;h4&gt;? Resource Sharing&lt;\/h4&gt;&lt;p&gt;Elastic Pool distributes DTUs\/vCores across tenants, automatic load balancing&lt;\/p&gt; &lt;\/div&gt; &lt;div class=\"insight-card\"&gt;&lt;h4&gt;? Noisy Neighbor Protection&lt;\/h4&gt;&lt;p&gt;Resource governance policies, query timeout limits, connection pooling per tenant&lt;\/p&gt; &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Isolation Model Comparison<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td>Aspect<\/td><td>Pooled DB (Recommended)<\/td><td>Schema-per-Tenant<\/td><td>Database-per-Tenant<\/td><\/tr><\/thead><tbody><tr><td>Cost<\/td><td>?&nbsp;Most efficient &#8211; Shared resources<\/td><td>Moderate &#8211; Complex management<\/td><td>?&nbsp;Highest &#8211; Separate DB instances<\/td><\/tr><tr><td>Isolation<\/td><td>Application-enforced RLS<\/td><td>Strong &#8211; Schema isolation<\/td><td>Strongest &#8211; Physical separation<\/td><\/tr><tr><td>Ops Complexity<\/td><td>?&nbsp;Low &#8211; Single deployment<\/td><td>High &#8211; Multiple schemas<\/td><td>?&nbsp;Very High &#8211; Multiple DBs<\/td><\/tr><tr><td>Scale Limit<\/td><td>500-1000 tenants<\/td><td>100-200 tenants<\/td><td>50-100 tenants<\/td><\/tr><tr><td>Schema Updates<\/td><td>?&nbsp;Single migration<\/td><td>Complex coordination<\/td><td>Very complex<\/td><\/tr><tr><td>Backup\/Restore<\/td><td>Point-in-time for all<\/td><td>Per-schema complexity<\/td><td>?&nbsp;Per-tenant granular<\/td><\/tr><tr><td>Best For<\/td><td>Small-medium tenants (7 users avg)<\/td><td>Regulated industries<\/td><td>Enterprise customers<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Justification: Given the requirements of&nbsp;average 7 users per tenant,&nbsp;no strict compliance needs, and&nbsp;cost optimization, the pooled model provides the best balance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tenant Onboarding Lifecycle<\/h3>\n\n\n\n<p><code>&lt;style&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: #464feb;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: linear-gradient(to bottom, transparent 0%, #b0beff 15%, #b0beff 85%, transparent 100%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: #f5f7fa;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: #ebefff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-accent: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --radius: 12px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: #e0e0e0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px rgba(39, 16, 16, 0.1);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --font: \"Segoe Sans\", \"Segoe UI\", \"Segoe UI Web (West European)\", -apple-system, \"system-ui\", Roboto, \"Helvetica Neue\", sans-serif;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --overflow-wrap: break-word;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; @media (prefers-color-scheme: dark) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: #7385ff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: linear-gradient(to bottom, transparent 0%, transparent 3%, #6264a7 30%, #6264a7 50%, transparent 97%, transparent 100%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: #424242;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: #1a1a1a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: #2a2a2a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: #ffffff;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: #3d3d3d;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; @media (prefers-contrast: more),&nbsp;&nbsp;&nbsp; (forced-colors: active) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :root {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --accent: ActiveText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-ln: ActiveText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --timeline-border: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-card: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --bg-hover: Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-title: CanvasText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --text-sub: CanvasText;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --shadow: 0 2px 10px Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --hover-shadow: 0 4px 14px Canvas;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --border: ButtonBorder;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insights-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: grid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns: repeat(2,minmax(240px,1fr));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card:last-child:nth-child(odd){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-column: 1 \/ -1;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: var(--shadow);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; min-width: 220px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px 20px 16px 20px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px 0px 8px 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 8px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card .icon {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline-flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; justify-content: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card p {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.92rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.5;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow-wrap: var(--overflow-wrap);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .insight-card p b, .insight-card p strong {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metrics-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display:grid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns:repeat(2,minmax(210px,1fr));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 16px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card:last-child:nth-child(odd){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-column:1 \/ -1; &nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex: 1 1 210px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-direction: column;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gap: 8px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-title);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card .metric-card-value {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1.4rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .metric-card p {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.85rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.45;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow-wrap: var(--overflow-wrap);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 0 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0px 16px 0px 56px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; list-style: none;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: var(--font);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.9rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.4;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container::before {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: \"\";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: calc(-40px + 56px);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 2px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--timeline-ln);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 16px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 16px 20px 16px 20px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--radius);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--bg-card);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid var(--border);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li:last-child {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 0px;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li:hover {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--bg-hover);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li::before {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: \"\";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 18px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: -40px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 14px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 14px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: var(--timeline-border) 2px solid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 50%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transform: translateX(-50%);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0px 0px 2px 0px #00000012, 0px 4px 8px 0px #00000014;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li h4 {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 5px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--accent);&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li h4 em {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0 0 5px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 1rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--accent);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-style: normal;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li * {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 0.9rem;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: var(--text-sub);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 1.4;&nbsp;&nbsp;&nbsp; }<br \/>&nbsp;&nbsp;&nbsp; .timeline-container &gt; li * b, .timeline-container &gt; li * strong {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 600;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @media (max-width:600px){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .metrics-container,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .insights-container{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns:1fr;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }&lt;\/style&gt;&lt;ul class=\"timeline-container\"&gt; &lt;li&gt; &lt;h4&gt;Step 1: Tenant Provisioning Request&lt;\/h4&gt; &lt;p&gt;Admin creates tenant via portal ? Event published to Service Bus ? Provisioning workflow triggered&lt;\/p&gt;&lt;\/li&gt; &lt;li&gt; &lt;h4&gt;Step 2: Data Initialization&lt;\/h4&gt; &lt;p&gt;Insert TenantId into Tenant table ? Create Blob container ? Initialize default configuration ? Generate API keys&lt;\/p&gt;&lt;\/li&gt; &lt;li&gt; &lt;h4&gt;Step 3: Identity Setup&lt;\/h4&gt; &lt;p&gt;Create Entra ID B2B group ? Assign owner user ? Configure RBAC roles ? Issue invitation emails&lt;\/p&gt;&lt;\/li&gt; &lt;li&gt; &lt;h4&gt;Step 4: Service Configuration&lt;\/h4&gt; &lt;p&gt;Register tenant in API Management ? Set rate limits ? Configure notification templates ? Enable monitoring&lt;\/p&gt;&lt;\/li&gt; &lt;li&gt; &lt;h4&gt;Step 5: Activation &amp; Notification&lt;\/h4&gt; &lt;p&gt;Mark tenant as Active ? Send welcome email ? Provide login credentials ? Schedule onboarding call&lt;\/p&gt;&lt;\/li&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tenant-Aware Routing and Authorization<\/h3>\n\n\n\n<p>Every API request follows this flow:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Request arrives at Azure Front Door\u00a0with custom domain or tenant subdomain (e.g.,\u00a0<code>joes-auto.garagehub.com<\/code>)<\/li>\n\n\n\n<li>API Management extracts tenant context\u00a0from:\n<ul class=\"wp-block-list\">\n<li>JWT token claims (<code>tid<\/code>\u00a0or custom\u00a0<code>tenant_id<\/code>\u00a0claim)<\/li>\n\n\n\n<li>Request headers (<code>X-Tenant-ID<\/code>)<\/li>\n\n\n\n<li>Subdomain parsing<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Tenant validation policy\u00a0in API Management:\n<ul class=\"wp-block-list\">\n<li>Verifies tenant exists and is active<\/li>\n\n\n\n<li>Checks subscription key if using API-key auth<\/li>\n\n\n\n<li>Enforces per-tenant rate limits<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Request forwarded to App Service\u00a0with enriched headers including\u00a0<code>X-Tenant-ID<\/code><\/li>\n\n\n\n<li>Application middleware\u00a0validates tenant context and sets it in request scope<\/li>\n\n\n\n<li>Database queries\u00a0automatically filtered by\u00a0<code>TenantId<\/code>\u00a0via:\n<ul class=\"wp-block-list\">\n<li>Entity Framework global query filters<\/li>\n\n\n\n<li>SQL Row-Level Security (RLS) policies<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Azure-Specific Implementation Patterns<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Pattern 1: Tenant Context Propagation<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Middleware in Azure App Servicepublic class TenantContextMiddleware{&nbsp;&nbsp;&nbsp; public async Task InvokeAsync(HttpContext context, TenantService tenantService)&nbsp;&nbsp;&nbsp; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tenantId = context.User.FindFirst(\"tenant_id\")?.Value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ?? context.Request.Headers&#91;\"X-Tenant-ID\"].FirstOrDefault();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (string.IsNullOrEmpty(tenantId))&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; throw new UnauthorizedAccessException(\"Tenant context missing\");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tenant = await tenantService.GetTenantAsync(tenantId);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (tenant == null || !tenant.IsActive)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; throw new UnauthorizedAccessException(\"Invalid or inactive tenant\");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; context.Items&#91;\"TenantContext\"] = tenant;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; await _next(context);&nbsp;&nbsp;&nbsp; }}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Pattern 2: Azure SQL Row-Level Security<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>-- Create security policy for tenant isolationCREATE FUNCTION dbo.fn_TenantPredicate(@TenantId UNIQUEIDENTIFIER)RETURNS TABLEWITH SCHEMABINDINGASRETURN SELECT 1 AS fn_TenantPredicate_resultWHERE @TenantId = CAST(SESSION_CONTEXT(N'TenantId') AS UNIQUEIDENTIFIER);<br \/>CREATE SECURITY POLICY TenantSecurityPolicyADD FILTER PREDICATE dbo.fn_TenantPredicate(TenantId) ON dbo.WorkOrders,ADD FILTER PREDICATE dbo.fn_TenantPredicate(TenantId) ON dbo.Customers,ADD FILTER PREDICATE dbo.fn_TenantPredicate(TenantId) ON dbo.Vehicles;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Noisy Neighbor Mitigation<\/h3>\n\n\n\n<p>Azure SQL Elastic Pool Configuration:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use\u00a0Premium tier\u00a0with sufficient eDTUs to handle burst loads<\/li>\n\n\n\n<li>Implement\u00a0per-database min\/max DTU limits\u00a0to prevent single tenant monopolization<\/li>\n\n\n\n<li>Enable\u00a0query performance insights\u00a0to identify problematic queries<\/li>\n\n\n\n<li>Set\u00a0query timeout limits\u00a0(30 seconds default, 120 seconds max)<\/li>\n\n\n\n<li>Use\u00a0Resource Governor\u00a0for CPU\/memory caps per session<\/li>\n<\/ul>\n\n\n\n<p>Application-Level Protection:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rate limiting in API Management\u00a0with per-tenant subscription keys<\/li>\n\n\n\n<li>Connection pool limits\u00a0per tenant context<\/li>\n\n\n\n<li>Async job throttling\u00a0using Azure Service Bus message rate limits<\/li>\n\n\n\n<li>Blob storage bandwidth limits\u00a0per container (tenant-prefixed)<\/li>\n<\/ul>\n\n\n\n<p>Monitoring &amp; Alerts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Track\u00a0DTU consumption per tenant\u00a0using custom Application Insights metrics<\/li>\n\n\n\n<li>Alert on\u00a0sustained high resource usage\u00a0(>80% for 15+ minutes)<\/li>\n\n\n\n<li>Implement\u00a0tenant usage dashboards\u00a0for capacity planning<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Per-Tenant Backup and Restore<\/h3>\n\n\n\n<p>Strategy:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Database: Azure SQL point-in-time restore with tenant-specific data extraction\n<ul class=\"wp-block-list\">\n<li>Full backups retained for 35 days<\/li>\n\n\n\n<li>Transaction log backups every 5-10 minutes<\/li>\n\n\n\n<li>Tenant-specific restore: Clone database ? Extract tenant data ? Import to production<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Blob Storage: Soft delete enabled (30-day retention) + versioning\n<ul class=\"wp-block-list\">\n<li>Per-tenant container restoration from soft-deleted state<\/li>\n\n\n\n<li>Point-in-time restore for containers using blob versioning<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Recovery Procedure:\n<ul class=\"wp-block-list\">\n<li>Identify recovery point (timestamp)<\/li>\n\n\n\n<li>Restore SQL database to separate server<\/li>\n\n\n\n<li>Export tenant-specific rows using\u00a0<code>WHERE TenantId = '{tenant-id}'<\/code><\/li>\n\n\n\n<li>Restore blob container from versioned snapshots<\/li>\n\n\n\n<li>Import data to production with validation<\/li>\n\n\n\n<li>Notify tenant of restoration completion<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n<div class=\"twttr_buttons\"><div class=\"twttr_twitter\">\n\t\t\t\t\t<a href=\"http:\/\/twitter.com\/share?text=\" class=\"twitter-share-button\" data-via=\"\" data-hashtags=\"\"  data-size=\"default\" data-url=\"https:\/\/shirishranjit.com\/blog1\/architect-principles\/2786-2\"  data-related=\"\" target=\"_blank\">Tweet<\/a>\n\t\t\t\t<\/div><div class=\"twttr_followme\">\n\t\t\t\t\t\t<a href=\"https:\/\/twitter.com\/shiranjit\" class=\"twitter-follow-button\" data-size=\"default\"  data-show-screen-name=\"false\"  target=\"_blank\">Follow me<\/a>\n\t\t\t\t\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Multi-Tenant Car Garage Repair SaaS Platform Architecture for Microsoft Azure Executive Summary This document presents a&nbsp;production-ready, enterprise-grade architecture&nbsp;for a multi-tenant SaaS platform designed to serve car garage repair businesses. The solution leverages&nbsp;Azure-native services&nbsp;with a pooled database tenancy model to support&nbsp;99% &hellip; <a href=\"https:\/\/shirishranjit.com\/blog1\/architect-principles\/2786-2\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2688,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2786","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/2786"}],"collection":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/comments?post=2786"}],"version-history":[{"count":3,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/2786\/revisions"}],"predecessor-version":[{"id":2789,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/2786\/revisions\/2789"}],"up":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/2688"}],"wp:attachment":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/media?parent=2786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}