feat(sso): Azure AD / Entra ID SAML 2.0 integration

- sso_service: fix process_callback for Azure AD claim URIs (email, role)
  - Default role_attr to full Azure role claim URI
  - Fallback email resolution via Azure email claim URI + NameID
  - Username defaults to full email (prevents collision with local accounts)
  - User lookup also tries email field for existing local accounts
  - Logs warning when unknown role received from IdP

- frontend/api/sso.ts: new API module with getSsoStatus, getSsoConfig, updateSsoConfig

- LoginPage: redesigned for SSO-first flow
  - Shows Azure SSO button as primary when SSO enabled+configured
  - Local login collapsed under "Emergency admin access" section
  - Falls back to normal local login form when SSO is disabled

- SystemPage: new SsoConfigSection component (guided 5-step wizard)
  - Step 1: Copy SP Entity ID and ACS URL for IT team + metadata XML download
  - Step 2: Azure App Roles reference table (6 roles with exact values)
  - Step 3: Tenant ID field auto-fills idp_entity_id and idp_sso_url
  - Step 4: X.509 certificate paste field
  - Step 5: Attribute mapping pre-filled with Azure AD claim URIs
  - Enable/disable toggle + save

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/app/services/sso_service.py

@@ -176,21 +176,43 @@ def process_callback(db: Session, request_data: dict) -> User:
     # Extract attributes
     attrs     = auth.get_attributes()
     name_id   = auth.get_nameid()
-    email_attr    = cfg.attr_email    or "email"
-    username_attr = cfg.attr_username or "username"
-    role_attr     = cfg.attr_role     or "role"
 
-    email    = _first_attr(attrs, email_attr)    or name_id or ""
+    # Attribute claim URIs — defaults support both plain names and Azure AD full URIs
-    username = _first_attr(attrs, username_attr) or email.split("@")[0] or name_id
+    email_attr    = cfg.attr_email    or "email"
-    role     = _first_attr(attrs, role_attr)     or cfg.default_role or "viewer"
+    username_attr = cfg.attr_username or "email"   # Azure AD: use email as username
+    role_attr     = cfg.attr_role     or "http://schemas.microsoft.com/ws/2008/06/identity/claims/role"
+
+    # Resolve email: try configured attr → Azure email claim URI → NameID
+    email = (
+        _first_attr(attrs, email_attr)
+        or _first_attr(attrs, "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress")
+        or name_id
+        or ""
+    )
+
+    # Resolve username: keep full email (e.g. user@company.com) to avoid collisions with local accounts
+    raw_username = _first_attr(attrs, username_attr) or email or name_id or ""
+    username = raw_username.strip() or email.split("@")[0] or name_id
+
+    # Resolve role: try configured attr → Azure role claim URI → default
+    role = (
+        _first_attr(attrs, role_attr)
+        or _first_attr(attrs, "http://schemas.microsoft.com/ws/2008/06/identity/claims/role")
+        or cfg.default_role
+        or "viewer"
+    )
 
     # Validate role
     valid_roles = {"admin", "red_lead", "blue_lead", "red_tech", "blue_tech", "viewer"}
     if role not in valid_roles:
+        log.warning("SSO: unknown role '%s' for user '%s', falling back to default", role, username)
         role = cfg.default_role or "viewer"
 
-    # Look up or provision user
+    # Look up or provision user — try username first, then email (for existing local accounts)
-    user = db.query(User).filter(User.username == username).first()
+    user = (
+        db.query(User).filter(User.username == username).first()
+        or db.query(User).filter(User.email == email).first()
+    )
     if user:
         # Refresh role from IdP on every login
         user.role = role

frontend/src/api/sso.ts

@@ -0,0 +1,66 @@
+import client from "./client";
+
+export interface SsoStatus {
+  enabled: boolean;
+  provider_name: string | null;
+  configured: boolean;
+  login_url: string | null;
+}
+
+export interface SsoConfig {
+  id: string;
+  is_enabled: boolean;
+  provider_name: string | null;
+  sp_entity_id: string | null;
+  sp_acs_url: string | null;
+  sp_slo_url: string | null;
+  sp_certificate: string | null;
+  idp_entity_id: string | null;
+  idp_sso_url: string | null;
+  idp_slo_url: string | null;
+  idp_certificate: string | null;
+  attr_email: string | null;
+  attr_username: string | null;
+  attr_role: string | null;
+  default_role: string | null;
+  auto_provision: boolean;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface SsoConfigUpdate {
+  is_enabled: boolean;
+  provider_name?: string | null;
+  sp_entity_id?: string | null;
+  sp_acs_url?: string | null;
+  sp_slo_url?: string | null;
+  sp_certificate?: string | null;
+  sp_private_key?: string | null;
+  idp_entity_id?: string | null;
+  idp_sso_url?: string | null;
+  idp_slo_url?: string | null;
+  idp_certificate?: string | null;
+  attr_email?: string | null;
+  attr_username?: string | null;
+  attr_role?: string | null;
+  default_role?: string | null;
+  auto_provision?: boolean;
+}
+
+/** Public — used by LoginPage to decide which login to show. */
+export async function getSsoStatus(): Promise<SsoStatus> {
+  const { data } = await client.get<SsoStatus>("/sso/status");
+  return data;
+}
+
+/** Admin-only — full config. Returns 404 if never configured. */
+export async function getSsoConfig(): Promise<SsoConfig> {
+  const { data } = await client.get<SsoConfig>("/sso/config");
+  return data;
+}
+
+/** Admin-only — create or replace SSO config. */
+export async function updateSsoConfig(payload: SsoConfigUpdate): Promise<SsoConfig> {
+  const { data } = await client.put<SsoConfig>("/sso/config", payload);
+  return data;
+}

frontend/src/pages/LoginPage.tsx

@@ -1,6 +1,9 @@
 import { useState, type FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown, ChevronUp, ShieldAlert, Building2, Loader2 } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
+import { getSsoStatus } from "../api/sso";
 
 export default function LoginPage() {
   const { login, isAuthenticated } = useAuth();
@@ -10,6 +13,17 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [emergencyOpen, setEmergencyOpen] = useState(false);
+
+  // Fetch SSO status to determine which login method to show
+  const { data: ssoStatus, isLoading: ssoLoading } = useQuery({
+    queryKey: ["sso-status"],
+    queryFn: getSsoStatus,
+    retry: false,
+    staleTime: 30_000,
+  });
+
+  const ssoActive = ssoStatus?.enabled && ssoStatus?.configured;
 
   // If already logged in, redirect immediately
   if (isAuthenticated) {
@@ -21,7 +35,6 @@ export default function LoginPage() {
     e.preventDefault();
     setError(null);
     setLoading(true);
-
     try {
       await login(username, password);
       navigate("/dashboard", { replace: true });
@@ -38,15 +51,93 @@ export default function LoginPage() {
         {/* Logo */}
         <div className="flex flex-col items-center gap-3">
           <img src="/aegis-logo.png" alt="Aegis" className="h-16 w-16 rounded-full" />
-          <h1 className="text-2xl font-bold tracking-wide text-white">
+          <h1 className="text-2xl font-bold tracking-wide text-white">Aegis</h1>
-            Aegis
+          <p className="text-sm text-gray-400">MITRE ATT&CK Coverage Platform</p>
-          </h1>
-          <p className="text-sm text-gray-400">
-            MITRE ATT&CK Coverage Platform
-          </p>
         </div>
 
-        {/* Form */}
+        {ssoLoading ? (
+          /* Loading SSO status */
+          <div className="flex justify-center py-6">
+            <Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
+          </div>
+        ) : ssoActive ? (
+          /* ── SSO primary login ───────────────────────────────────── */
+          <div className="space-y-5">
+            {/* Primary: Azure SSO button */}
+            <a
+              href="/api/v1/sso/login"
+              className="flex w-full items-center justify-center gap-3 rounded-lg bg-[#0078d4] px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-[#106ebe] focus:outline-none focus:ring-2 focus:ring-[#0078d4]/50"
+            >
+              <Building2 className="h-5 w-5" />
+              Sign in with {ssoStatus?.provider_name || "Azure AD"}
+            </a>
+
+            <p className="text-center text-xs text-gray-500">
+              Use your corporate credentials — managed by your IT team
+            </p>
+
+            {/* Emergency local login (collapsible) */}
+            <div className="rounded-lg border border-gray-800 bg-gray-900/60">
+              <button
+                type="button"
+                onClick={() => setEmergencyOpen(!emergencyOpen)}
+                className="flex w-full items-center justify-between rounded-lg px-4 py-3 text-left transition-colors hover:bg-gray-800/40"
+              >
+                <div className="flex items-center gap-2">
+                  <ShieldAlert className="h-4 w-4 text-yellow-500" />
+                  <span className="text-sm font-medium text-yellow-400">
+                    Emergency admin access
+                  </span>
+                </div>
+                {emergencyOpen ? (
+                  <ChevronUp className="h-4 w-4 text-gray-500" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-gray-500" />
+                )}
+              </button>
+
+              {emergencyOpen && (
+                <div className="border-t border-gray-800 px-4 pb-4 pt-3">
+                  <p className="mb-3 text-xs text-gray-500">
+                    Local login — only for emergency admin access when SSO is unavailable.
+                  </p>
+                  <form onSubmit={handleSubmit} className="space-y-3">
+                    <input
+                      type="text"
+                      required
+                      autoFocus
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      placeholder="Username"
+                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
+                    />
+                    <input
+                      type="password"
+                      required
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      placeholder="Password"
+                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
+                    />
+                    {error && (
+                      <p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-400">
+                        {error}
+                      </p>
+                    )}
+                    <button
+                      type="submit"
+                      disabled={loading}
+                      className="w-full rounded-lg bg-gray-700 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-600 disabled:opacity-50"
+                    >
+                      {loading ? "Signing in…" : "Sign in locally"}
+                    </button>
+                  </form>
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          /* ── Local login (SSO not configured) ───────────────────── */
           <form onSubmit={handleSubmit} className="space-y-5">
             <div>
               <label
@@ -99,6 +190,7 @@ export default function LoginPage() {
               {loading ? "Signing in…" : "Sign in"}
             </button>
           </form>
+        )}
       </div>
     </div>
   );

frontend/src/pages/SystemPage.tsx

@@ -27,8 +27,17 @@ import {
   ExternalLink,
   CalendarCheck,
   ShieldCheck,
+  KeyRound,
+  Copy,
+  Building2,
 } from "lucide-react";
 import client from "../api/client";
+import {
+  getSsoConfig,
+  updateSsoConfig,
+  type SsoConfig,
+  type SsoConfigUpdate,
+} from "../api/sso";
 import {
   triggerMitreSync,
   triggerIntelScan,
@@ -1075,6 +1084,9 @@ export default function SystemPage() {
         )}
       </div>
 
+      {/* SSO / Azure AD Configuration */}
+      <SsoConfigSection />
+
       {/* System Information */}
       <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
         <h2 className="mb-4 text-lg font-semibold text-white">System Information</h2>
@@ -1768,6 +1780,452 @@ function CreateTemplateForm({
   );
 }
 
+/* ── SSO / Azure AD Configuration Section ───────────────────────── */
+
+const AZURE_ROLES = [
+  { value: "admin",      label: "Aegis Admin",      desc: "Full platform access including system settings" },
+  { value: "red_lead",   label: "Aegis Red Lead",   desc: "Red team lead — manage tests, campaigns and templates" },
+  { value: "blue_lead",  label: "Aegis Blue Lead",  desc: "Blue team lead — validate tests and manage coverage" },
+  { value: "red_tech",   label: "Aegis Red Tech",   desc: "Red team technician — execute tests" },
+  { value: "blue_tech",  label: "Aegis Blue Tech",  desc: "Blue team technician — review detections" },
+  { value: "viewer",     label: "Aegis Viewer",     desc: "Read-only access to dashboards and reports" },
+];
+
+function CopyField({ value, label }: { value: string; label: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = () => {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  return (
+    <div>
+      <label className="mb-1 block text-xs font-medium text-gray-400">{label}</label>
+      <div className="flex items-center gap-2">
+        <code className="flex-1 truncate rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-cyan-300 font-mono">
+          {value || <span className="text-gray-600 italic">not set</span>}
+        </code>
+        <button
+          type="button"
+          onClick={copy}
+          disabled={!value}
+          className="flex-shrink-0 rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 transition-colors hover:text-white disabled:opacity-40"
+          title="Copy"
+        >
+          {copied ? <CheckCircle className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function SsoConfigSection() {
+  const queryClient = useQueryClient();
+
+  // Derive default SP values from the current browser origin
+  const origin = window.location.origin;
+  const defaultSpEntityId = `${origin}/api/v1/sso/metadata`;
+  const defaultSpAcsUrl   = `${origin}/api/v1/sso/callback`;
+
+  const { data: existingConfig, isLoading: configLoading } = useQuery<SsoConfig | null>({
+    queryKey: ["sso-config"],
+    queryFn: async () => {
+      try {
+        return await getSsoConfig();
+      } catch {
+        return null; // 404 = not configured yet
+      }
+    },
+  });
+
+  // Form state — pre-seeded from existing config when loaded
+  const [tenantId, setTenantId] = useState("");
+  const [form, setForm] = useState<SsoConfigUpdate>({
+    is_enabled:     false,
+    provider_name:  "Azure AD / Entra ID",
+    sp_entity_id:   defaultSpEntityId,
+    sp_acs_url:     defaultSpAcsUrl,
+    idp_entity_id:  "",
+    idp_sso_url:    "",
+    idp_certificate: "",
+    attr_email:     "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
+    attr_username:  "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
+    attr_role:      "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
+    default_role:   "viewer",
+    auto_provision: true,
+  });
+  const [formLoaded, setFormLoaded] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  // Load existing config into form (once)
+  if (existingConfig && !formLoaded) {
+    setForm({
+      is_enabled:      existingConfig.is_enabled,
+      provider_name:   existingConfig.provider_name ?? "Azure AD / Entra ID",
+      sp_entity_id:    existingConfig.sp_entity_id   ?? defaultSpEntityId,
+      sp_acs_url:      existingConfig.sp_acs_url      ?? defaultSpAcsUrl,
+      idp_entity_id:   existingConfig.idp_entity_id   ?? "",
+      idp_sso_url:     existingConfig.idp_sso_url     ?? "",
+      idp_certificate: existingConfig.idp_certificate ?? "",
+      attr_email:      existingConfig.attr_email      ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
+      attr_username:   existingConfig.attr_username   ?? "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
+      attr_role:       existingConfig.attr_role       ?? "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",
+      default_role:    existingConfig.default_role    ?? "viewer",
+      auto_provision:  existingConfig.auto_provision  ?? true,
+    });
+    // Try to extract tenant ID from existing idp_sso_url
+    if (existingConfig.idp_sso_url) {
+      const m = existingConfig.idp_sso_url.match(/microsoftonline\.com\/([^/]+)\//);
+      if (m) setTenantId(m[1]);
+    }
+    setFormLoaded(true);
+  }
+
+  // Auto-fill IdP URLs when tenant ID is entered
+  const handleTenantChange = (val: string) => {
+    setTenantId(val);
+    if (val.trim()) {
+      setForm((f) => ({
+        ...f,
+        idp_entity_id: `https://sts.windows.net/${val.trim()}/`,
+        idp_sso_url:   `https://login.microsoftonline.com/${val.trim()}/saml2`,
+      }));
+    }
+  };
+
+  const saveMutation = useMutation({
+    mutationFn: (payload: SsoConfigUpdate) => updateSsoConfig(payload),
+    onSuccess: () => {
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 4000);
+      queryClient.invalidateQueries({ queryKey: ["sso-config"] });
+      queryClient.invalidateQueries({ queryKey: ["sso-status"] });
+    },
+  });
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    saveMutation.mutate(form);
+  };
+
+  const isConfigured = !!(form.idp_entity_id && form.idp_sso_url && form.idp_certificate);
+
+  return (
+    <div className="rounded-xl border border-indigo-500/30 bg-gray-900 p-6">
+      {/* Header */}
+      <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
+        <div className="flex items-start gap-4">
+          <div className="rounded-lg bg-indigo-500/10 p-3 mt-0.5">
+            <KeyRound className="h-6 w-6 text-indigo-400" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-white">Azure AD / Entra ID SSO</h2>
+            <p className="mt-1 text-sm text-gray-400 max-w-2xl">
+              Delegate authentication to Azure Active Directory via SAML 2.0.
+              Users sign in with their corporate credentials; roles are assigned automatically via Azure App Roles.
+            </p>
+          </div>
+        </div>
+        {/* Enabled badge */}
+        <span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${
+          form.is_enabled && isConfigured
+            ? "border-green-500/40 bg-green-900/20 text-green-400"
+            : "border-gray-600 bg-gray-800/50 text-gray-400"
+        }`}>
+          {form.is_enabled && isConfigured ? (
+            <><CheckCircle className="h-3 w-3" /> Active</>
+          ) : (
+            <><XCircle className="h-3 w-3" /> {isConfigured ? "Disabled" : "Not configured"}</>
+          )}
+        </span>
+      </div>
+
+      {configLoading ? (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-indigo-400" />
+        </div>
+      ) : (
+        <form onSubmit={handleSave} className="space-y-8">
+
+          {/* ── Step 1: SP values for IT ─────────────────────────── */}
+          <div>
+            <div className="mb-3 flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">1</span>
+              <h3 className="text-sm font-semibold text-white">Give these values to your IT team</h3>
+            </div>
+            <p className="mb-4 text-xs text-gray-400">
+              Your IT team needs to register Aegis as an Enterprise Application in Azure AD.
+              Provide them with the following SP (Service Provider) values:
+            </p>
+            <div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
+              <CopyField
+                label="Entity ID (Identifier)"
+                value={form.sp_entity_id ?? defaultSpEntityId}
+              />
+              <CopyField
+                label="Reply URL (Assertion Consumer Service)"
+                value={form.sp_acs_url ?? defaultSpAcsUrl}
+              />
+              <div className="pt-1">
+                <a
+                  href="/api/v1/sso/metadata"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-500/30 bg-indigo-900/20 px-3 py-1.5 text-xs font-medium text-indigo-400 transition-colors hover:bg-indigo-900/40"
+                >
+                  <Download className="h-3.5 w-3.5" />
+                  Download SP Metadata XML
+                </a>
+                <span className="ml-2 text-xs text-gray-500">
+                  (Alternative to manual entry — import this XML directly into Azure AD)
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* ── Step 2: Azure App Roles to create ───────────────── */}
+          <div>
+            <div className="mb-3 flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">2</span>
+              <h3 className="text-sm font-semibold text-white">Create App Roles in Azure</h3>
+            </div>
+            <p className="mb-3 text-xs text-gray-400">
+              In your Azure Enterprise App → App Roles, create the following roles. The{" "}
+              <strong className="text-gray-200">Value</strong> field must match exactly (case-sensitive):
+            </p>
+            <div className="overflow-x-auto rounded-lg border border-gray-700 bg-gray-800/30">
+              <table className="w-full text-left text-xs">
+                <thead>
+                  <tr className="border-b border-gray-700">
+                    <th className="px-4 py-2.5 font-semibold text-gray-400">Display Name</th>
+                    <th className="px-4 py-2.5 font-semibold text-gray-400">Value (exact)</th>
+                    <th className="px-4 py-2.5 font-semibold text-gray-400">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {AZURE_ROLES.map((r) => (
+                    <tr key={r.value} className="border-b border-gray-700/50 hover:bg-gray-700/20">
+                      <td className="px-4 py-2.5 text-gray-200">{r.label}</td>
+                      <td className="px-4 py-2.5">
+                        <code className="rounded bg-gray-800 px-1.5 py-0.5 text-indigo-300 font-mono">
+                          {r.value}
+                        </code>
+                      </td>
+                      <td className="px-4 py-2.5 text-gray-400">{r.desc}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <p className="mt-2 text-xs text-gray-500">
+              After creating roles, assign them to users or groups in Azure AD → Enterprise Applications → Users and groups.
+            </p>
+          </div>
+
+          {/* ── Step 3: IdP configuration ───────────────────────── */}
+          <div>
+            <div className="mb-3 flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">3</span>
+              <h3 className="text-sm font-semibold text-white">Enter Azure tenant details</h3>
+            </div>
+            <div className="space-y-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
+              {/* Tenant ID shortcut */}
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">
+                  Tenant ID <span className="text-gray-500">(auto-fills the fields below)</span>
+                </label>
+                <input
+                  type="text"
+                  value={tenantId}
+                  onChange={(e) => handleTenantChange(e.target.value)}
+                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Found in Azure AD → Overview → Tenant ID
+                </p>
+              </div>
+
+              {/* IdP Entity ID */}
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">
+                  IdP Entity ID <span className="text-red-400">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={form.idp_entity_id ?? ""}
+                  onChange={(e) => setForm({ ...form, idp_entity_id: e.target.value })}
+                  placeholder="https://sts.windows.net/{tenant-id}/"
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
+                />
+              </div>
+
+              {/* IdP SSO URL */}
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">
+                  SSO URL (Login URL) <span className="text-red-400">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={form.idp_sso_url ?? ""}
+                  onChange={(e) => setForm({ ...form, idp_sso_url: e.target.value })}
+                  placeholder="https://login.microsoftonline.com/{tenant-id}/saml2"
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
+                />
+              </div>
+
+              {/* Provider display name */}
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">
+                  Display name <span className="text-gray-500">(shown on login page)</span>
+                </label>
+                <input
+                  type="text"
+                  value={form.provider_name ?? ""}
+                  onChange={(e) => setForm({ ...form, provider_name: e.target.value })}
+                  placeholder="Azure AD / Entra ID"
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* ── Step 4: X.509 Certificate ───────────────────────── */}
+          <div>
+            <div className="mb-3 flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">4</span>
+              <h3 className="text-sm font-semibold text-white">Paste IdP certificate</h3>
+            </div>
+            <p className="mb-3 text-xs text-gray-400">
+              In Azure AD → Enterprise App → Single sign-on → SAML Signing Certificate, download the{" "}
+              <strong className="text-gray-200">Base64 certificate</strong> and paste its contents below.
+            </p>
+            <textarea
+              value={form.idp_certificate ?? ""}
+              onChange={(e) => setForm({ ...form, idp_certificate: e.target.value })}
+              placeholder={"-----BEGIN CERTIFICATE-----\nMIIC...base64...\n-----END CERTIFICATE-----"}
+              rows={6}
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 placeholder-gray-500 focus:border-indigo-500 focus:outline-none font-mono"
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Include the header and footer lines, or paste just the base64 block — both are accepted.
+            </p>
+          </div>
+
+          {/* ── Step 5: Attribute mapping ────────────────────────── */}
+          <div>
+            <div className="mb-3 flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">5</span>
+              <h3 className="text-sm font-semibold text-white">Attribute mapping</h3>
+              <span className="text-xs text-gray-500">(pre-filled with Azure AD defaults)</span>
+            </div>
+            <div className="space-y-3 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">Email attribute</label>
+                <input
+                  type="text"
+                  value={form.attr_email ?? ""}
+                  onChange={(e) => setForm({ ...form, attr_email: e.target.value })}
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">Username attribute</label>
+                <input
+                  type="text"
+                  value={form.attr_username ?? ""}
+                  onChange={(e) => setForm({ ...form, attr_username: e.target.value })}
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block text-xs font-medium text-gray-300">Role attribute</label>
+                <input
+                  type="text"
+                  value={form.attr_role ?? ""}
+                  onChange={(e) => setForm({ ...form, attr_role: e.target.value })}
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-300 focus:border-indigo-500 focus:outline-none font-mono"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="mb-1 block text-xs font-medium text-gray-300">Default role</label>
+                  <select
+                    value={form.default_role ?? "viewer"}
+                    onChange={(e) => setForm({ ...form, default_role: e.target.value })}
+                    className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-indigo-500 focus:outline-none"
+                  >
+                    {AZURE_ROLES.map((r) => (
+                      <option key={r.value} value={r.value}>{r.label}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex items-end gap-3 pb-0.5">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={form.auto_provision ?? true}
+                      onChange={(e) => setForm({ ...form, auto_provision: e.target.checked })}
+                      className="h-4 w-4 rounded accent-indigo-500"
+                    />
+                    <span className="text-sm text-gray-300">Auto-provision new users</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* ── Enable toggle + Save ─────────────────────────────── */}
+          <div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border border-gray-700 bg-gray-800/30 p-4">
+            <label className="flex items-center gap-3 cursor-pointer">
+              <div
+                onClick={() => setForm((f) => ({ ...f, is_enabled: !f.is_enabled }))}
+                className={`relative h-6 w-11 rounded-full transition-colors ${
+                  form.is_enabled ? "bg-indigo-600" : "bg-gray-600"
+                }`}
+              >
+                <span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
+                  form.is_enabled ? "translate-x-5" : "translate-x-0.5"
+                }`} />
+              </div>
+              <span className="text-sm font-medium text-gray-200">
+                {form.is_enabled ? "SSO enabled — Azure AD is the primary login" : "SSO disabled — local login only"}
+              </span>
+            </label>
+
+            <div className="flex items-center gap-3">
+              {saveSuccess && (
+                <span className="flex items-center gap-1.5 text-sm text-green-400">
+                  <CheckCircle className="h-4 w-4" /> Saved
+                </span>
+              )}
+              {saveMutation.isError && (
+                <span className="text-sm text-red-400">
+                  {(saveMutation.error as Error)?.message ?? "Save failed"}
+                </span>
+              )}
+              <button
+                type="submit"
+                disabled={saveMutation.isPending || !isConfigured}
+                className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
+                title={!isConfigured ? "Fill in IdP Entity ID, SSO URL, and Certificate first" : undefined}
+              >
+                {saveMutation.isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Building2 className="h-4 w-4" />
+                )}
+                {saveMutation.isPending ? "Saving…" : "Save configuration"}
+              </button>
+            </div>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}
+
 /* ── Template Detail / Edit Modal ────────────────────────────────── */
 
 function TemplateDetailModal({