From 6791a6735bf296897b04d0d68971885c748f8a1c Mon Sep 17 00:00:00 2001
From: Jackson Roberts <jrobe3221@gmail.com>
Date: Sun, 22 Feb 2026 19:12:13 -0600
Subject: [PATCH] Setup unifi wlans

---
 src/app.html                                  |   21 +-
 src/components/CreateCredentialModal.svelte   | 1186 +++-
 .../CreateCredentialTypeModal.svelte          | 1299 ++++
 src/components/CreateRoleModal.svelte         |  316 +-
 src/components/EditUserModal.svelte           |  724 ++
 src/components/LinkUnifiSiteModal.svelte      |  999 +++
 src/components/NewUnifiSiteModal.svelte       |  303 +
 src/lib/index.ts                              |    2 +
 src/lib/optima-api/modules/companies.ts       |    8 +-
 src/lib/optima-api/modules/credentialTypes.ts |    3 +-
 src/lib/optima-api/modules/credentials.ts     |   89 +-
 src/lib/optima-api/modules/unifi.ts           |  383 +
 src/lib/optima-api/modules/user.ts            |    4 +-
 src/lib/optima-api/modules/users.ts           |  126 +
 .../admin/credential-types/+page.server.ts    |  184 +
 .../admin/credential-types/+page.svelte       |  756 +-
 src/routes/admin/roles/+page.svelte           |  471 +-
 src/routes/admin/users/+page.server.ts        |  143 +
 src/routes/admin/users/+page.svelte           |  582 +-
 src/routes/companies/+page.server.ts          |   19 +-
 src/routes/companies/+page.svelte             |  475 +-
 src/routes/companies/[id]/+page.server.ts     |   34 +-
 src/routes/companies/[id]/+page.svelte        |  911 +--
 src/routes/companies/[id]/+page.svelte.bak    | 6134 +++++++++++++++++
 .../[id]/components/ActivityTab.svelte        |    5 +
 .../[id]/components/CompanySidebar.svelte     |  260 +
 .../[id]/components/ConfigurationsTab.svelte  |  376 +
 .../[id]/components/ContactsTab.svelte        |  211 +
 .../[id]/components/CredentialsTab.svelte     | 1544 +++++
 .../[id]/components/OverviewTab.svelte        |   87 +
 .../companies/[id]/components/UniFiTab.svelte | 3017 ++++++++
 .../companies/[id]/secure-value/+server.ts    |   32 +
 src/routes/companies/[id]/types.ts            |  187 +
 src/styles/admin/credential-types.css         |  591 ++
 src/styles/admin/roles.css                    |  481 ++
 src/styles/admin/users.css                    |  575 ++
 src/styles/app.css                            |    8 +-
 src/styles/companies/companydetail.css        | 3552 +++++++++-
 38 files changed, 24435 insertions(+), 1663 deletions(-)
 create mode 100644 src/components/CreateCredentialTypeModal.svelte
 create mode 100644 src/components/EditUserModal.svelte
 create mode 100644 src/components/LinkUnifiSiteModal.svelte
 create mode 100644 src/components/NewUnifiSiteModal.svelte
 create mode 100644 src/lib/optima-api/modules/unifi.ts
 create mode 100644 src/lib/optima-api/modules/users.ts
 create mode 100644 src/routes/admin/credential-types/+page.server.ts
 create mode 100644 src/routes/admin/users/+page.server.ts
 create mode 100644 src/routes/companies/[id]/+page.svelte.bak
 create mode 100644 src/routes/companies/[id]/components/ActivityTab.svelte
 create mode 100644 src/routes/companies/[id]/components/CompanySidebar.svelte
 create mode 100644 src/routes/companies/[id]/components/ConfigurationsTab.svelte
 create mode 100644 src/routes/companies/[id]/components/ContactsTab.svelte
 create mode 100644 src/routes/companies/[id]/components/CredentialsTab.svelte
 create mode 100644 src/routes/companies/[id]/components/OverviewTab.svelte
 create mode 100644 src/routes/companies/[id]/components/UniFiTab.svelte
 create mode 100644 src/routes/companies/[id]/secure-value/+server.ts
 create mode 100644 src/routes/companies/[id]/types.ts
 create mode 100644 src/styles/admin/credential-types.css
 create mode 100644 src/styles/admin/roles.css
 create mode 100644 src/styles/admin/users.css
diff --git a/src/app.html b/src/app.html
index 77a5ff5..7a71a4a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,15 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/src/components/CreateCredentialModal.svelte b/src/components/CreateCredentialModal.svelte
index e8966ac..e0ede9c 100644
--- a/src/components/CreateCredentialModal.svelte
+++ b/src/components/CreateCredentialModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { credential } from "$lib/credentials";
+  import { credential } from "$lib/optima-api/modules/credentials";
   import type {
     CredentialType,
     CredentialTypeField,
-  } from "$lib/credentialTypes";
+  } from "$lib/optima-api/modules/credentialTypes";
 
   export let isOpen = false;
   export let companyId: string;
@@ -12,6 +12,7 @@
   export let onSuccess: () => void = () => {};
 
   let credentialName = "";
+  let credentialNotes = "";
   let selectedTypeId = "";
   let fieldValues: Record<string, string> = {};
   let isSubmitting = false;
@@ -20,18 +21,60 @@
 
   $: selectedType = credentialTypes.find((ct) => ct.id === selectedTypeId);
   $: if (selectedType && selectedType.fields) {
-    // Initialize field values when type changes
     fieldValues = {};
+    subCredentials = {};
     selectedType.fields.forEach((field: CredentialTypeField) => {
-      fieldValues[field.id] = "";
+      if (field.valueType === "multi_credential") {
+        subCredentials[field.id] = [];
+      } else {
+        fieldValues[field.id] = "";
+      }
     });
   }
 
+  // Sub-credentials state: keyed by multi_credential field ID
+  let subCredentials: Record<
+    string,
+    Array<{ name: string; fields: Record<string, string> }>
+  > = {};
+
+  function addSubCredentialEntry(
+    fieldId: string,
+    subFields: CredentialTypeField[],
+  ) {
+    const entry: { name: string; fields: Record<string, string> } = {
+      name: "",
+      fields: {},
+    };
+    subFields.forEach((sf) => {
+      entry.fields[sf.id] = "";
+    });
+    subCredentials[fieldId] = [...(subCredentials[fieldId] ?? []), entry];
+    subCredentials = subCredentials;
+  }
+
+  function removeSubCredentialEntry(fieldId: string, index: number) {
+    subCredentials[fieldId] = subCredentials[fieldId].filter(
+      (_, i) => i !== index,
+    );
+    subCredentials = subCredentials;
+  }
+
+  $: isValid =
+    credentialName.trim().length > 0 &&
+    selectedTypeId.length > 0 &&
+    (!selectedType ||
+      selectedType.fields.every(
+        (f: CredentialTypeField) =>
+          f.valueType === "multi_credential" ||
+          !f.required ||
+          (fieldValues[f.id] && fieldValues[f.id].trim()),
+      ));
+
   async function loadCredentialTypes() {
     if (credentialTypes.length > 0) return;
     isLoadingTypes = true;
     try {
-      // This assumes credentialType.fetchMany returns data with a data property
       const response = await fetch(
         `${import.meta.env.VITE_API_URL || "http://localhost:3000"}/v1/credential-type`,
         {
@@ -55,44 +98,62 @@
   }
 
   async function handleSubmit() {
-    if (!credentialName || !selectedTypeId || !selectedType) {
-      submitError = "Please fill in all required fields";
-      return;
-    }
-
-    // Validate that all required fields are filled
-    const allFieldsFilled = selectedType.fields.every(
-      (field: CredentialTypeField) =>
-        !field.required ||
-        (fieldValues[field.id] && fieldValues[field.id].trim()),
-    );
-
-    if (!allFieldsFilled) {
-      submitError = "Please fill in all required fields";
-      return;
-    }
+    if (!isValid || !selectedType) return;
 
     isSubmitting = true;
     submitError = "";
 
     try {
-      const fields = selectedType.fields.map((field: CredentialTypeField) => ({
-        fieldId: field.id,
-        value: fieldValues[field.id] || "",
-      }));
+      const fields = selectedType.fields
+        .filter(
+          (field: CredentialTypeField) =>
+            field.valueType !== "multi_credential",
+        )
+        .map((field: CredentialTypeField) => ({
+          fieldId: field.id,
+          value: fieldValues[field.id] || "",
+        }));
 
-      await credential.create(accessToken, {
+      // Build subCredentials payload for multi_credential fields
+      const subCredsPayload: Record<
+        string,
+        Array<{
+          name: string;
+          fields: Array<{ fieldId: string; value: string }>;
+        }>
+      > = {};
+      for (const [fieldId, entries] of Object.entries(subCredentials)) {
+        if (entries.length > 0) {
+          subCredsPayload[fieldId] = entries.map((entry) => ({
+            name: entry.name,
+            fields: Object.entries(entry.fields).map(([fid, val]) => ({
+              fieldId: fid,
+              value: val,
+            })),
+          }));
+        }
+      }
+
+      const createPayload: Record<string, unknown> = {
         name: credentialName,
+        notes: credentialNotes || undefined,
         typeId: selectedTypeId,
         companyId,
         fields,
-      });
+      };
+      if (Object.keys(subCredsPayload).length > 0) {
+        createPayload.subCredentials = subCredsPayload;
+      }
 
-      // Reset form
-      credentialName = "";
-      selectedTypeId = "";
-      fieldValues = {};
-      isOpen = false;
+      await credential.create(
+        accessToken,
+        createPayload as unknown as Omit<
+          import("$lib/optima-api/modules/credentials").Credential,
+          "id" | "createdAt" | "updatedAt"
+        >,
+      );
+
+      reset();
       onSuccess();
     } catch (err) {
       submitError =
@@ -103,95 +164,384 @@
     }
   }
 
-  function handleCancel() {
-    isOpen = false;
+  function reset() {
     credentialName = "";
+    credentialNotes = "";
     selectedTypeId = "";
     fieldValues = {};
+    subCredentials = {};
+    isSubmitting = false;
     submitError = "";
   }
 
-  function handleModalClick(e: Event) {
-    if ((e.target as HTMLElement).classList.contains("modal-backdrop")) {
-      handleCancel();
-    }
+  function handleClose() {
+    reset();
+    isOpen = false;
+  }
+
+  function handleBackdropClick() {
+    handleClose();
+  }
+
+  function handleBackdropKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") handleClose();
   }
 
-  // Load types when modal opens
   $: if (isOpen) {
     loadCredentialTypes();
   }
 </script>
 
 {#if isOpen}
-  <div class="modal-backdrop" on:click={handleModalClick}>
-    <div class="modal">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="modal-backdrop"
+    on:click={handleBackdropClick}
+    on:keydown={handleBackdropKeydown}
+  >
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+      class="modal"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Create Credential"
+      tabindex="-1"
+      on:click|stopPropagation
+    >
       <div class="modal-header">
-        <h2>Create Credential</h2>
+        <div class="modal-title-group">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+          <h2>Create Credential</h2>
+        </div>
         <button
-          class="close-button"
-          on:click={handleCancel}
+          class="close-btn"
+          on:click={handleClose}
           type="button"
           aria-label="Close modal"
         >
-          ✕
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
         </button>
       </div>
 
       <div class="modal-body">
         {#if submitError}
-          <div class="error-message">{submitError}</div>
+          <div class="error-banner">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            {submitError}
+          </div>
         {/if}
 
-        <div class="form-group">
-          <label for="credential-name">Credential Name *</label>
-          <input
-            id="credential-name"
-            type="text"
-            bind:value={credentialName}
-            placeholder="e.g., Production AWS Credentials"
-            disabled={isSubmitting}
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="credential-type">Credential Type *</label>
-          {#if isLoadingTypes}
-            <p class="loading-text">Loading credential types...</p>
-          {:else}
-            <select
-              id="credential-type"
-              bind:value={selectedTypeId}
-              disabled={isSubmitting || isLoadingTypes}
-            >
-              <option value="">Select a credential type</option>
-              {#each credentialTypes as type (type.id)}
-                <option value={type.id}>{type.name}</option>
-              {/each}
-            </select>
-          {/if}
-        </div>
-
-        {#if selectedType && selectedType.fields}
-          <div class="fields-section">
-            <h3>Credential Fields</h3>
-            {#each selectedType.fields as field (field.id)}
-              <div class="form-group">
-                <label for="field-{field.id}">
-                  {field.name}
-                  {#if field.required}
-                    <span class="required">*</span>
-                  {/if}
-                </label>
-                <input
-                  id="field-{field.id}"
-                  type={field.valueType === "password" ? "password" : "text"}
-                  bind:value={fieldValues[field.id]}
-                  placeholder={field.name}
-                  disabled={isSubmitting}
-                />
+        <div class="form-row">
+          <div class="form-group">
+            <label for="credential-name">
+              Name <span class="req">*</span>
+            </label>
+            <input
+              id="credential-name"
+              type="text"
+              bind:value={credentialName}
+              placeholder="e.g. Production AWS Credentials"
+              disabled={isSubmitting}
+            />
+          </div>
+          <div class="form-group">
+            <label for="credential-type">
+              Credential Type <span class="req">*</span>
+            </label>
+            {#if isLoadingTypes}
+              <div class="loading-wrap">
+                <svg
+                  viewBox="0 0 24 24"
+                  width="14"
+                  height="14"
+                  class="spin-icon"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    fill="none"
+                    opacity="0.25"
+                  />
+                  <path
+                    d="M12 2a10 10 0 0 1 10 10"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    fill="none"
+                    stroke-linecap="round"
+                  />
+                </svg>
+                <span>Loading types…</span>
               </div>
-            {/each}
+            {:else}
+              <select
+                id="credential-type"
+                bind:value={selectedTypeId}
+                disabled={isSubmitting}
+              >
+                <option value="">Select a type</option>
+                {#each credentialTypes as type (type.id)}
+                  <option value={type.id}>{type.name}</option>
+                {/each}
+              </select>
+            {/if}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="credential-notes">Notes</label>
+          <textarea
+            id="credential-notes"
+            bind:value={credentialNotes}
+            placeholder="Optional notes about this credential"
+            disabled={isSubmitting}
+            rows="2"
+            class="notes-textarea"
+          ></textarea>
+        </div>
+
+        {#if selectedType && selectedType.fields && selectedType.fields.length > 0}
+          <div class="fields-section">
+            <div class="fields-section-header">
+              <span class="fields-label">Credential Fields</span>
+              <span class="fields-badge">
+                {selectedType.fields.length} field{selectedType.fields
+                  .length === 1
+                  ? ""
+                  : "s"}
+              </span>
+            </div>
+            <div class="fields-list">
+              {#each selectedType.fields as field (field.id)}
+                <div class="field-card">
+                  <div class="field-card-header">
+                    <span class="field-name-label">{field.name}</span>
+                    <div class="field-header-badges">
+                      {#if field.valueType === "multi_credential"}
+                        <span class="field-badge field-badge-multi">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="10"
+                            height="10"
+                          >
+                            <rect x="2" y="3" width="20" height="6" rx="1" />
+                            <rect x="2" y="15" width="20" height="6" rx="1" />
+                            <path d="M12 9v6" />
+                          </svg>
+                          Multi
+                        </span>
+                      {/if}
+                      {#if field.required}
+                        <span class="field-badge field-badge-required"
+                          >Required</span
+                        >
+                      {/if}
+                      {#if field.secure}
+                        <span class="field-badge field-badge-secure">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="10"
+                            height="10"
+                          >
+                            <rect
+                              x="3"
+                              y="11"
+                              width="18"
+                              height="11"
+                              rx="2"
+                              ry="2"
+                            />
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                          </svg>
+                          Secure
+                        </span>
+                      {/if}
+                    </div>
+                  </div>
+                  <div class="field-card-body">
+                    {#if field.valueType === "multi_credential" && field.subFields}
+                      <!-- Multi-credential entries -->
+                      <div class="multi-cred-section">
+                        {#if (subCredentials[field.id] ?? []).length === 0}
+                          <p class="multi-cred-empty">
+                            No entries yet. Add an entry to define
+                            sub-credentials for this field.
+                          </p>
+                        {:else}
+                          {#each subCredentials[field.id] as entry, entryIdx}
+                            <div class="multi-cred-entry">
+                              <div class="multi-cred-entry-header">
+                                <span class="multi-cred-entry-num"
+                                  >#{entryIdx + 1}</span
+                                >
+                                <button
+                                  type="button"
+                                  class="multi-cred-entry-remove"
+                                  on:click={() =>
+                                    removeSubCredentialEntry(
+                                      field.id,
+                                      entryIdx,
+                                    )}
+                                  disabled={isSubmitting}
+                                  aria-label="Remove entry"
+                                >
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="13"
+                                    height="13"
+                                  >
+                                    <line x1="18" y1="6" x2="6" y2="18" /><line
+                                      x1="6"
+                                      y1="6"
+                                      x2="18"
+                                      y2="18"
+                                    />
+                                  </svg>
+                                </button>
+                              </div>
+                              <div class="multi-cred-entry-body">
+                                <div class="multi-cred-entry-field">
+                                  <label
+                                    for="sub-cred-name-{field.id}-{entryIdx}"
+                                    >Entry Name <span class="req">*</span
+                                    ></label
+                                  >
+                                  <input
+                                    id="sub-cred-name-{field.id}-{entryIdx}"
+                                    type="text"
+                                    bind:value={entry.name}
+                                    placeholder="e.g. Tunnel 1"
+                                    disabled={isSubmitting}
+                                  />
+                                </div>
+                                {#each field.subFields as subField (subField.id)}
+                                  <div class="multi-cred-entry-field">
+                                    <label
+                                      for="sub-cred-{field.id}-{entryIdx}-{subField.id}"
+                                    >
+                                      {subField.name}
+                                      {#if subField.required}<span class="req"
+                                          >*</span
+                                        >{/if}
+                                      {#if subField.secure}
+                                        <svg
+                                          class="sub-cred-lock"
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="10"
+                                          height="10"
+                                        >
+                                          <rect
+                                            x="3"
+                                            y="11"
+                                            width="18"
+                                            height="11"
+                                            rx="2"
+                                            ry="2"
+                                          />
+                                          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                                        </svg>
+                                      {/if}
+                                    </label>
+                                    <input
+                                      id="sub-cred-{field.id}-{entryIdx}-{subField.id}"
+                                      type="text"
+                                      bind:value={entry.fields[subField.id]}
+                                      placeholder="Enter {subField.name.toLowerCase()}"
+                                      disabled={isSubmitting}
+                                    />
+                                  </div>
+                                {/each}
+                              </div>
+                            </div>
+                          {/each}
+                        {/if}
+                        <button
+                          type="button"
+                          class="multi-cred-add-btn"
+                          on:click={() =>
+                            addSubCredentialEntry(
+                              field.id,
+                              field.subFields ?? [],
+                            )}
+                          disabled={isSubmitting}
+                        >
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="12"
+                            height="12"
+                          >
+                            <line x1="12" y1="5" x2="12" y2="19" /><line
+                              x1="5"
+                              y1="12"
+                              x2="19"
+                              y2="12"
+                            />
+                          </svg>
+                          Add Entry
+                        </button>
+                      </div>
+                    {:else}
+                      <input
+                        id="field-{field.id}"
+                        type="text"
+                        bind:value={fieldValues[field.id]}
+                        placeholder="Enter {field.name.toLowerCase()}"
+                        disabled={isSubmitting}
+                      />
+                    {/if}
+                  </div>
+                </div>
+              {/each}
+            </div>
           </div>
         {/if}
       </div>
@@ -199,19 +549,19 @@
       <div class="modal-footer">
         <button
           type="button"
-          class="button-secondary"
-          on:click={handleCancel}
+          class="btn-cancel"
+          on:click={handleClose}
           disabled={isSubmitting}
         >
           Cancel
         </button>
         <button
           type="button"
-          class="button-primary"
+          class="btn-submit"
           on:click={handleSubmit}
-          disabled={isSubmitting || isLoadingTypes}
+          disabled={!isValid || isSubmitting}
         >
-          {isSubmitting ? "Creating..." : "Create Credential"}
+          {isSubmitting ? "Creating…" : "Create Credential"}
         </button>
       </div>
     </div>
@@ -219,179 +569,593 @@
 {/if}
 
 <style>
+  /* ── Backdrop ── */
   .modal-backdrop {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
+    animation: backdropIn 0.12s ease;
   }
 
+  /* ── Modal shell ── */
   .modal {
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-    width: 90%;
-    max-width: 500px;
-    max-height: 90vh;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: 14px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
+    width: 92%;
+    max-width: 540px;
+    max-height: 85vh;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    animation: modalIn 0.15s ease;
   }
 
+  /* ── Header ── */
   .modal-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 1.5rem;
-    border-bottom: 1px solid #e5e7eb;
+    justify-content: space-between;
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
   }
 
-  .modal-header h2 {
+  .modal-title-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-primary);
+  }
+
+  .modal-title-group h2 {
     margin: 0;
-    font-size: 1.25rem;
+    font-size: 16px;
+    font-weight: 600;
   }
 
-  .close-button {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: #6b7280;
-    padding: 0;
-    width: 2rem;
-    height: 2rem;
+  .modal-title-group svg {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .close-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
-    transition: background-color 0.2s;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 7px;
+    cursor: pointer;
+    color: var(--text-muted);
+    transition:
+      background 0.12s,
+      border-color 0.12s,
+      color 0.12s;
   }
 
-  .close-button:hover {
-    background-color: #f3f4f6;
+  .close-btn:hover {
+    background: var(--card-hover-bg);
+    border-color: var(--border-subtle);
+    color: var(--text-primary);
   }
 
+  /* ── Body ── */
   .modal-body {
-    padding: 1.5rem;
+    padding: 18px 22px;
     overflow-y: auto;
     flex: 1;
   }
 
-  .modal-footer {
+  /* ── Error banner ── */
+  .error-banner {
     display: flex;
-    gap: 1rem;
-    justify-content: flex-end;
-    padding: 1.5rem;
-    border-top: 1px solid #e5e7eb;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    margin-bottom: 16px;
+    background: rgba(220, 38, 38, 0.08);
+    border: 1px solid rgba(220, 38, 38, 0.2);
+    border-radius: 8px;
+    font-size: 13px;
+    color: #dc2626;
+  }
+
+  /* ── Form layout ── */
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+    margin-bottom: 14px;
   }
 
   .form-group {
-    margin-bottom: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 14px;
   }
 
-  .form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: #374151;
+  .form-row .form-group {
+    margin-bottom: 0;
   }
 
-  .required {
-    color: #ef4444;
+  label {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--text-secondary);
   }
 
-  input,
+  .req {
+    color: #dc2626;
+  }
+
+  input[type="text"],
   select {
     width: 100%;
-    padding: 0.625rem;
-    border: 1px solid #d1d5db;
-    border-radius: 4px;
-    font-size: 1rem;
+    padding: 7px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-inset);
+    font-size: 13px;
+    color: var(--text-primary);
     box-sizing: border-box;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
   }
 
-  input:focus,
+  input[type="text"]:focus,
   select:focus {
     outline: none;
-    border-color: #0066cc;
+    border-color: var(--input-focus-border);
     box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
   }
 
+  input[type="text"]::placeholder {
+    color: var(--text-muted);
+  }
+
+  .notes-textarea {
+    width: 100%;
+    padding: 7px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-inset);
+    font-size: 13px;
+    color: var(--text-primary);
+    box-sizing: border-box;
+    resize: vertical;
+    font-family: inherit;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  .notes-textarea:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  }
+
+  .notes-textarea::placeholder {
+    color: var(--text-muted);
+  }
+
+  .notes-textarea:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
   input:disabled,
   select:disabled {
-    background-color: #f3f4f6;
-    color: #9ca3af;
-    cursor: not-allowed;
-  }
-
-  .fields-section {
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid #e5e7eb;
-  }
-
-  .fields-section h3 {
-    margin: 0 0 1rem 0;
-    font-size: 1rem;
-    color: #374151;
-  }
-
-  .button-primary,
-  .button-secondary {
-    padding: 0.625rem 1rem;
-    border: none;
-    border-radius: 4px;
-    font-size: 0.95rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-
-  .button-primary {
-    background-color: #0066cc;
-    color: white;
-  }
-
-  .button-primary:hover:not(:disabled) {
-    background-color: #0052a3;
-  }
-
-  .button-primary:disabled {
-    background-color: #9ca3af;
-    cursor: not-allowed;
-  }
-
-  .button-secondary {
-    background-color: #e5e7eb;
-    color: #374151;
-  }
-
-  .button-secondary:hover:not(:disabled) {
-    background-color: #d1d5db;
-  }
-
-  .button-secondary:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .error-message {
-    padding: 0.75rem;
-    margin-bottom: 1rem;
-    background-color: #fee2e2;
-    color: #991b1b;
-    border-radius: 4px;
-    border: 1px solid #fecaca;
+  /* ── Loading indicator ── */
+  .loading-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-inset);
+    font-size: 13px;
+    color: var(--text-muted);
   }
 
-  .loading-text {
-    color: #6b7280;
-    font-style: italic;
+  .spin-icon {
+    animation: spin 0.8s linear infinite;
+    color: var(--text-muted);
+  }
+
+  /* ── Fields section ── */
+  .fields-section {
+    margin-top: 4px;
+  }
+
+  .fields-section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  .fields-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .fields-badge {
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 8px;
+    background: var(--status-neutral-bg);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
+  }
+
+  .fields-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .field-card {
+    border: 1px solid var(--border-subtle);
+    border-radius: 9px;
+    background: var(--bg-inset);
+    overflow: hidden;
+  }
+
+  .field-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .field-name-label {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .field-header-badges {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .field-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 7px;
+    border-radius: 6px;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .field-badge-required {
+    background: rgba(220, 38, 38, 0.08);
+    color: #dc2626;
+    border: 1px solid rgba(220, 38, 38, 0.15);
+  }
+
+  .field-badge-secure {
+    background: rgba(59, 130, 246, 0.08);
+    color: #3b82f6;
+    border: 1px solid rgba(59, 130, 246, 0.15);
+  }
+
+  .field-card-body {
+    padding: 10px 12px;
+  }
+
+  .field-card-body input {
     margin: 0;
   }
+
+  /* ── Multi-credential entries ── */
+  .multi-cred-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .multi-cred-empty {
+    margin: 0;
+    font-size: 12px;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  .multi-cred-entry {
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-surface);
+    overflow: hidden;
+  }
+
+  .multi-cred-entry-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 10px;
+    background: var(--bg-inset);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .multi-cred-entry-num {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+  }
+
+  .multi-cred-entry-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    cursor: pointer;
+    color: var(--text-muted);
+    transition:
+      background 0.1s,
+      color 0.1s;
+  }
+
+  .multi-cred-entry-remove:hover:not(:disabled) {
+    background: rgba(220, 38, 38, 0.08);
+    color: #dc2626;
+  }
+
+  .multi-cred-entry-remove:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .multi-cred-entry-body {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .multi-cred-entry-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .multi-cred-entry-field label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .sub-cred-lock {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .multi-cred-add-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 14px;
+    background: none;
+    border: 1px dashed var(--border-subtle);
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition:
+      background 0.12s,
+      border-color 0.12s,
+      color 0.12s;
+    align-self: flex-start;
+  }
+
+  .multi-cred-add-btn:hover:not(:disabled) {
+    background: var(--card-hover-bg);
+    border-color: var(--accent-color, #0066cc);
+    color: var(--text-primary);
+  }
+
+  .multi-cred-add-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .field-badge-multi {
+    background: rgba(139, 92, 246, 0.08);
+    color: #8b5cf6;
+    border: 1px solid rgba(139, 92, 246, 0.15);
+  }
+
+  /* ── Footer ── */
+  .modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 14px 22px;
+    border-top: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+  }
+
+  .btn-cancel {
+    padding: 7px 16px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--bg-inset);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    transition:
+      background 0.15s,
+      border-color 0.15s;
+  }
+
+  .btn-cancel:hover:not(:disabled) {
+    background: var(--card-hover-bg);
+    border-color: var(--border-default);
+    color: var(--text-primary);
+  }
+
+  .btn-cancel:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .btn-submit {
+    padding: 7px 18px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--accent-color, #0066cc);
+    border: 1px solid transparent;
+    color: #fff;
+    transition: filter 0.15s;
+  }
+
+  .btn-submit:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .btn-submit:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* ── Animations ── */
+  @keyframes backdropIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes modalIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* ── Mobile fixes ── */
+  @media (max-width: 768px) {
+    .modal-backdrop {
+      align-items: flex-end;
+    }
+
+    .modal {
+      width: 100%;
+      max-width: 100%;
+      max-height: 92vh;
+      border-radius: 14px 14px 0 0;
+      transform: none;
+      animation: modalSheetIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+    }
+
+    @keyframes modalSheetIn {
+      from {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .modal-body {
+      padding: 14px 16px;
+    }
+
+    .modal-header {
+      padding: 14px 16px 12px;
+    }
+
+    .modal-footer {
+      padding: 12px 16px;
+    }
+
+    /* Prevent iOS zoom on focus — inputs/selects must be >= 16px */
+    input[type="text"],
+    select {
+      font-size: 16px;
+      padding: 10px 12px;
+      border-radius: 8px;
+    }
+
+    select {
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 12px center;
+      padding-right: 32px;
+    }
+
+    /* Stack name + type vertically on mobile */
+    .form-row {
+      grid-template-columns: 1fr;
+      gap: 4px;
+    }
+
+    label {
+      font-size: 13px;
+    }
+
+    .field-card-body input {
+      font-size: 16px;
+      padding: 10px 12px;
+    }
+
+    .field-name-label {
+      font-size: 13px;
+    }
+
+    .btn-cancel,
+    .btn-submit {
+      padding: 10px 18px;
+      font-size: 14px;
+    }
+  }
 </style>
diff --git a/src/components/CreateCredentialTypeModal.svelte b/src/components/CreateCredentialTypeModal.svelte
new file mode 100644
index 0000000..a09bc8b
--- /dev/null
+++ b/src/components/CreateCredentialTypeModal.svelte
@@ -0,0 +1,1299 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import type {
+    CredentialType,
+    CredentialTypeField,
+  } from "$lib/optima-api/modules/credentialTypes";
+
+  export let isOpen = false;
+  export let typeToEdit: CredentialType | null = null;
+  export let onClose: () => void = () => {};
+  export let onSuccess: () => void = () => {};
+  export let valueTypes: string[] = [];
+
+  $: isEditMode = typeToEdit !== null;
+
+  $: if (isOpen && typeToEdit) {
+    name = typeToEdit.name;
+    permissionScope = typeToEdit.permissionScope;
+    icon = typeToEdit.icon ?? "";
+    fields = typeToEdit.fields.map((f) => ({
+      ...f,
+      subFields: f.subFields?.map((sf) => ({ ...sf })),
+    }));
+  }
+
+  let name = "";
+  let permissionScope = "";
+  let icon = "";
+  let fields: Array<{
+    id?: string;
+    name: string;
+    required: boolean;
+    secure: boolean;
+    valueType: string;
+    subFields?: Array<{
+      id?: string;
+      name: string;
+      required: boolean;
+      secure: boolean;
+      valueType: string;
+    }>;
+  }> = [];
+  let isSubmitting = false;
+  let submitError = "";
+  let manualIdFields = new Set<number>();
+
+  function toSnakeCase(str: string): string {
+    return str
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "_")
+      .replace(/^_|_$/g, "");
+  }
+
+  function handleFieldNameInput(index: number) {
+    if (manualIdFields.has(index)) return;
+    const field = fields[index];
+    field.id = toSnakeCase(field.name);
+    fields = fields;
+  }
+
+  function handleFieldIdInput(index: number) {
+    manualIdFields.add(index);
+  }
+
+  $: isValid =
+    name.trim().length > 0 &&
+    permissionScope.trim().length > 0 &&
+    fields.every((f) => (f.id ?? "").trim().length > 0);
+
+  function formatValueTypeLabel(vt: string): string {
+    return vt
+      .split("_")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ");
+  }
+
+  $: valueTypeOptions = (
+    valueTypes.length > 0 ? valueTypes : ["plain_text", "password"]
+  ).map((vt) => ({ value: vt, label: formatValueTypeLabel(vt) }));
+
+  $: subFieldValueTypeOptions = valueTypeOptions.filter(
+    (opt) => opt.value !== "multi_credential",
+  );
+
+  let manualIdSubFields = new Map<number, Set<number>>();
+
+  function handleValueTypeChange(index: number) {
+    const field = fields[index];
+    if (field.valueType === "multi_credential") {
+      field.secure = false;
+      if (!field.subFields) field.subFields = [];
+    } else {
+      field.subFields = undefined;
+      manualIdSubFields.delete(index);
+    }
+    fields = fields;
+  }
+
+  function addSubField(parentIndex: number) {
+    const field = fields[parentIndex];
+    if (!field.subFields) field.subFields = [];
+    field.subFields = [
+      ...field.subFields,
+      {
+        id: "",
+        name: "",
+        required: false,
+        secure: false,
+        valueType: "plain_text",
+      },
+    ];
+    fields = fields;
+  }
+
+  function removeSubField(parentIndex: number, subIndex: number) {
+    const field = fields[parentIndex];
+    if (!field.subFields) return;
+    field.subFields = field.subFields.filter((_, i) => i !== subIndex);
+    fields = fields;
+    const parentSet = manualIdSubFields.get(parentIndex);
+    if (parentSet) {
+      const updated = new Set<number>();
+      for (const i of parentSet) {
+        if (i < subIndex) updated.add(i);
+        else if (i > subIndex) updated.add(i - 1);
+      }
+      manualIdSubFields.set(parentIndex, updated);
+    }
+  }
+
+  function handleSubFieldNameInput(parentIndex: number, subIndex: number) {
+    const parentSet = manualIdSubFields.get(parentIndex);
+    if (parentSet?.has(subIndex)) return;
+    const subField = fields[parentIndex].subFields![subIndex];
+    subField.id = toSnakeCase(subField.name);
+    fields = fields;
+  }
+
+  function handleSubFieldIdInput(parentIndex: number, subIndex: number) {
+    if (!manualIdSubFields.has(parentIndex)) {
+      manualIdSubFields.set(parentIndex, new Set());
+    }
+    manualIdSubFields.get(parentIndex)!.add(subIndex);
+  }
+
+  function moveSubField(
+    parentIndex: number,
+    subIndex: number,
+    direction: "up" | "down",
+  ) {
+    const subs = fields[parentIndex].subFields;
+    if (!subs) return;
+    const target = direction === "up" ? subIndex - 1 : subIndex + 1;
+    if (target < 0 || target >= subs.length) return;
+    const newSubs = [...subs];
+    [newSubs[subIndex], newSubs[target]] = [newSubs[target], newSubs[subIndex]];
+    fields[parentIndex].subFields = newSubs;
+    fields = fields;
+    const parentSet = manualIdSubFields.get(parentIndex);
+    if (parentSet) {
+      const hadIndex = parentSet.has(subIndex);
+      const hadTarget = parentSet.has(target);
+      if (hadIndex) parentSet.add(target);
+      else parentSet.delete(target);
+      if (hadTarget) parentSet.add(subIndex);
+      else parentSet.delete(subIndex);
+    }
+  }
+
+  function addField() {
+    fields = [
+      ...fields,
+      {
+        id: "",
+        name: "",
+        required: false,
+        secure: false,
+        valueType: "plain_text",
+      },
+    ];
+  }
+
+  function removeField(index: number) {
+    fields = fields.filter((_, i) => i !== index);
+    const updated = new Set<number>();
+    for (const i of manualIdFields) {
+      if (i < index) updated.add(i);
+      else if (i > index) updated.add(i - 1);
+    }
+    manualIdFields = updated;
+  }
+
+  function moveField(index: number, direction: "up" | "down") {
+    const newFields = [...fields];
+    const target = direction === "up" ? index - 1 : index + 1;
+    if (target < 0 || target >= newFields.length) return;
+    [newFields[index], newFields[target]] = [
+      newFields[target],
+      newFields[index],
+    ];
+    fields = newFields;
+    const hadIndex = manualIdFields.has(index);
+    const hadTarget = manualIdFields.has(target);
+    if (hadIndex) manualIdFields.add(target);
+    else manualIdFields.delete(target);
+    if (hadTarget) manualIdFields.add(index);
+    else manualIdFields.delete(index);
+    manualIdFields = manualIdFields;
+  }
+
+  function reset() {
+    name = "";
+    permissionScope = "";
+    icon = "";
+    fields = [];
+    manualIdFields = new Set();
+    manualIdSubFields = new Map();
+    isSubmitting = false;
+    submitError = "";
+  }
+
+  function handleClose() {
+    reset();
+    onClose();
+  }
+
+  function handleBackdropClick() {
+    handleClose();
+  }
+
+  function handleBackdropKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") handleClose();
+  }
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="modal-backdrop"
+    on:click={handleBackdropClick}
+    on:keydown={handleBackdropKeydown}
+  >
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+      class="modal"
+      role="dialog"
+      aria-modal="true"
+      aria-label={isEditMode
+        ? "Edit Credential Type"
+        : "Create Credential Type"}
+      tabindex="-1"
+      on:click|stopPropagation
+    >
+      <div class="modal-header">
+        <div class="modal-title-group">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+          <h2>
+            {isEditMode ? "Edit Credential Type" : "Create Credential Type"}
+          </h2>
+        </div>
+        <button
+          class="close-btn"
+          on:click={handleClose}
+          type="button"
+          aria-label="Close modal"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      <form
+        method="POST"
+        action={isEditMode
+          ? "?/updateCredentialType"
+          : "?/createCredentialType"}
+        use:enhance={({ formData }) => {
+          formData.set("fields", JSON.stringify(fields));
+          isSubmitting = true;
+          submitError = "";
+          return async ({ result, update }) => {
+            isSubmitting = false;
+            if (result.type === "success") {
+              reset();
+              await update({ reset: false });
+              onSuccess();
+              return;
+            } else if (result.type === "failure") {
+              submitError = String(
+                (result.data as Record<string, unknown>)?.message ??
+                  (isEditMode
+                    ? "Failed to update credential type."
+                    : "Failed to create credential type."),
+              );
+            } else if (result.type === "error") {
+              submitError =
+                result.error?.message ?? "An unexpected error occurred.";
+            }
+            await update({ reset: false });
+          };
+        }}
+      >
+        {#if isEditMode && typeToEdit}
+          <input type="hidden" name="id" value={typeToEdit.id} />
+        {/if}
+
+        <div class="modal-body">
+          {#if submitError}
+            <div class="error-banner">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="14"
+                height="14"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+              </svg>
+              {submitError}
+            </div>
+          {/if}
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="ct-name">Name <span class="req">*</span></label>
+              <input
+                id="ct-name"
+                name="name"
+                type="text"
+                placeholder="e.g. AWS Credentials"
+                bind:value={name}
+                required
+              />
+            </div>
+            <div class="form-group">
+              <label for="ct-scope">
+                Permission Scope <span class="req">*</span>
+              </label>
+              <input
+                id="ct-scope"
+                name="permissionScope"
+                type="text"
+                placeholder="e.g. aws"
+                bind:value={permissionScope}
+                required
+              />
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="ct-icon"
+              >Icon <span class="label-hint">Optional</span></label
+            >
+            <input
+              id="ct-icon"
+              name="icon"
+              type="text"
+              placeholder="e.g. cloud, key, database"
+              bind:value={icon}
+            />
+          </div>
+
+          <!-- Fields section -->
+          <div class="fields-section">
+            <div class="fields-section-header">
+              <span class="fields-label">Fields</span>
+              {#if fields.length > 0}
+                <span class="selected-badge"
+                  >{fields.length} field{fields.length === 1 ? "" : "s"}</span
+                >
+              {/if}
+            </div>
+
+            {#if fields.length === 0}
+              <p class="fields-empty">
+                No fields defined yet. Fields define the data a credential of
+                this type will store.
+              </p>
+            {:else}
+              <div class="fields-list">
+                {#each fields as field, index}
+                  <div class="field-card">
+                    <div class="field-card-header">
+                      <span class="field-number">#{index + 1}</span>
+                      <div class="field-card-actions">
+                        {#if index > 0}
+                          <button
+                            type="button"
+                            class="field-move-btn"
+                            aria-label="Move up"
+                            on:click={() => moveField(index, "up")}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="12"
+                              height="12"
+                            >
+                              <path d="M18 15l-6-6-6 6" />
+                            </svg>
+                          </button>
+                        {/if}
+                        {#if index < fields.length - 1}
+                          <button
+                            type="button"
+                            class="field-move-btn"
+                            aria-label="Move down"
+                            on:click={() => moveField(index, "down")}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="12"
+                              height="12"
+                            >
+                              <path d="M6 9l6 6 6-6" />
+                            </svg>
+                          </button>
+                        {/if}
+                        <button
+                          type="button"
+                          class="field-remove-btn"
+                          aria-label="Remove field"
+                          on:click={() => removeField(index)}
+                        >
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                          >
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="field-card-body">
+                      <div class="field-row">
+                        <div class="form-group field-name-group">
+                          <label for="field-name-{index}">Name</label>
+                          <input
+                            id="field-name-{index}"
+                            type="text"
+                            placeholder="e.g. Access Key ID"
+                            bind:value={field.name}
+                            on:input={() => handleFieldNameInput(index)}
+                          />
+                        </div>
+                        <div class="form-group field-type-group">
+                          <label for="field-type-{index}">Type</label>
+                          <select
+                            id="field-type-{index}"
+                            bind:value={field.valueType}
+                            on:change={() => handleValueTypeChange(index)}
+                          >
+                            {#each valueTypeOptions as opt}
+                              <option value={opt.value}>{opt.label}</option>
+                            {/each}
+                          </select>
+                        </div>
+                      </div>
+                      <div class="field-id-row">
+                        <div class="form-group field-id-group">
+                          <label for="field-id-{index}"
+                            >ID <span class="req">*</span></label
+                          >
+                          <input
+                            id="field-id-{index}"
+                            type="text"
+                            placeholder="auto-generated from name"
+                            bind:value={field.id}
+                            on:input={() => handleFieldIdInput(index)}
+                            class="field-id-input"
+                          />
+                        </div>
+                      </div>
+                      <div class="field-toggles">
+                        <label class="toggle-label">
+                          <input
+                            type="checkbox"
+                            bind:checked={field.required}
+                          />
+                          <span class="toggle-text">Required</span>
+                        </label>
+                        <label
+                          class="toggle-label"
+                          class:toggle-disabled={field.valueType ===
+                            "multi_credential"}
+                        >
+                          <input
+                            type="checkbox"
+                            bind:checked={field.secure}
+                            disabled={field.valueType === "multi_credential"}
+                          />
+                          <span class="toggle-text">Secure</span>
+                        </label>
+                      </div>
+
+                      {#if field.valueType === "multi_credential"}
+                        <div class="sub-fields-section">
+                          <div class="sub-fields-header">
+                            <span class="sub-fields-label">
+                              <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                width="12"
+                                height="12"
+                              >
+                                <path
+                                  d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4-4v-2"
+                                />
+                                <path d="M9 7l-4 4 4 4" />
+                              </svg>
+                              Sub-Fields
+                            </span>
+                            {#if field.subFields && field.subFields.length > 0}
+                              <span class="sub-fields-count"
+                                >{field.subFields.length}</span
+                              >
+                            {/if}
+                          </div>
+
+                          {#if !field.subFields || field.subFields.length === 0}
+                            <p class="sub-fields-empty">
+                              No sub-fields defined. Sub-fields define the
+                              structure of each entry in this multi-credential.
+                            </p>
+                          {:else}
+                            <div class="sub-fields-list">
+                              {#each field.subFields as subField, subIndex}
+                                <div class="sub-field-card">
+                                  <div class="sub-field-card-header">
+                                    <span class="field-number"
+                                      >#{subIndex + 1}</span
+                                    >
+                                    <div class="field-card-actions">
+                                      {#if subIndex > 0}
+                                        <button
+                                          type="button"
+                                          class="field-move-btn"
+                                          aria-label="Move up"
+                                          on:click={() =>
+                                            moveSubField(index, subIndex, "up")}
+                                        >
+                                          <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="12"
+                                            height="12"
+                                            ><path d="M18 15l-6-6-6 6" /></svg
+                                          >
+                                        </button>
+                                      {/if}
+                                      {#if subIndex < (field.subFields?.length ?? 0) - 1}
+                                        <button
+                                          type="button"
+                                          class="field-move-btn"
+                                          aria-label="Move down"
+                                          on:click={() =>
+                                            moveSubField(
+                                              index,
+                                              subIndex,
+                                              "down",
+                                            )}
+                                        >
+                                          <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="12"
+                                            height="12"
+                                            ><path d="M6 9l6 6 6-6" /></svg
+                                          >
+                                        </button>
+                                      {/if}
+                                      <button
+                                        type="button"
+                                        class="field-remove-btn"
+                                        aria-label="Remove sub-field"
+                                        on:click={() =>
+                                          removeSubField(index, subIndex)}
+                                      >
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="13"
+                                          height="13"
+                                        >
+                                          <line
+                                            x1="18"
+                                            y1="6"
+                                            x2="6"
+                                            y2="18"
+                                          /><line
+                                            x1="6"
+                                            y1="6"
+                                            x2="18"
+                                            y2="18"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                  <div class="sub-field-card-body">
+                                    <div class="field-row">
+                                      <div class="form-group field-name-group">
+                                        <label
+                                          for="sub-field-name-{index}-{subIndex}"
+                                          >Name</label
+                                        >
+                                        <input
+                                          id="sub-field-name-{index}-{subIndex}"
+                                          type="text"
+                                          placeholder="e.g. Server"
+                                          bind:value={subField.name}
+                                          on:input={() =>
+                                            handleSubFieldNameInput(
+                                              index,
+                                              subIndex,
+                                            )}
+                                        />
+                                      </div>
+                                      <div class="form-group field-type-group">
+                                        <label
+                                          for="sub-field-type-{index}-{subIndex}"
+                                          >Type</label
+                                        >
+                                        <select
+                                          id="sub-field-type-{index}-{subIndex}"
+                                          bind:value={subField.valueType}
+                                        >
+                                          {#each subFieldValueTypeOptions as opt}
+                                            <option value={opt.value}
+                                              >{opt.label}</option
+                                            >
+                                          {/each}
+                                        </select>
+                                      </div>
+                                    </div>
+                                    <div class="field-id-row">
+                                      <div class="form-group field-id-group">
+                                        <label
+                                          for="sub-field-id-{index}-{subIndex}"
+                                          >ID <span class="req">*</span></label
+                                        >
+                                        <input
+                                          id="sub-field-id-{index}-{subIndex}"
+                                          type="text"
+                                          placeholder="auto-generated from name"
+                                          bind:value={subField.id}
+                                          on:input={() =>
+                                            handleSubFieldIdInput(
+                                              index,
+                                              subIndex,
+                                            )}
+                                          class="field-id-input"
+                                        />
+                                      </div>
+                                    </div>
+                                    <div class="field-toggles">
+                                      <label class="toggle-label">
+                                        <input
+                                          type="checkbox"
+                                          bind:checked={subField.required}
+                                        />
+                                        <span class="toggle-text">Required</span
+                                        >
+                                      </label>
+                                      <label class="toggle-label">
+                                        <input
+                                          type="checkbox"
+                                          bind:checked={subField.secure}
+                                        />
+                                        <span class="toggle-text">Secure</span>
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              {/each}
+                            </div>
+                          {/if}
+
+                          <button
+                            type="button"
+                            class="add-sub-field-btn"
+                            on:click={() => addSubField(index)}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="12"
+                              height="12"
+                            >
+                              <line x1="12" y1="5" x2="12" y2="19" /><line
+                                x1="5"
+                                y1="12"
+                                x2="19"
+                                y2="12"
+                              />
+                            </svg>
+                            Add Sub-Field
+                          </button>
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+
+            <button type="button" class="add-field-btn" on:click={addField}>
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="13"
+                height="13"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Add Field
+            </button>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="btn-cancel"
+            on:click={handleClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="btn-submit"
+            disabled={!isValid || isSubmitting}
+          >
+            {#if isSubmitting}
+              {isEditMode ? "Saving…" : "Creating…"}
+            {:else}
+              {isEditMode ? "Save Changes" : "Create Credential Type"}
+            {/if}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: backdropIn 0.12s ease;
+  }
+
+  .modal {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: 14px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
+    width: 92%;
+    max-width: 580px;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    animation: modalIn 0.15s ease;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .modal-title-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-primary);
+  }
+
+  .modal-title-group h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .modal-title-group svg {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 7px;
+    cursor: pointer;
+    color: var(--text-muted);
+    transition:
+      background 0.12s,
+      border-color 0.12s,
+      color 0.12s;
+  }
+
+  .close-btn:hover {
+    background: var(--card-hover-bg);
+    border-color: var(--border-subtle);
+    color: var(--text-primary);
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .modal-body {
+    padding: 18px 22px;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .error-banner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    margin-bottom: 16px;
+    background: rgba(220, 38, 38, 0.08);
+    border: 1px solid rgba(220, 38, 38, 0.2);
+    border-radius: 8px;
+    font-size: 13px;
+    color: #dc2626;
+  }
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 14px;
+  }
+
+  .form-row .form-group {
+    margin-bottom: 0;
+  }
+
+  label {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+
+  .req {
+    color: #dc2626;
+  }
+
+  .label-hint {
+    font-weight: 400;
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  input[type="text"],
+  select {
+    padding: 7px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-inset);
+    font-size: 13px;
+    color: var(--text-primary);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  input[type="text"]:focus,
+  select:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  }
+
+  input[type="text"]::placeholder {
+    color: var(--text-muted);
+  }
+
+  /* Fields section */
+  .fields-section {
+    margin-top: 4px;
+  }
+
+  .fields-section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  .fields-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .selected-badge {
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 8px;
+    background: var(--status-neutral-bg);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
+  }
+
+  .fields-empty {
+    margin: 0 0 12px;
+    font-size: 13px;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  .fields-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 12px;
+  }
+
+  .field-card {
+    border: 1px solid var(--border-subtle);
+    border-radius: 9px;
+    background: var(--bg-inset);
+    overflow: hidden;
+  }
+
+  .field-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 10px;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .field-number {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+  }
+
+  .field-card-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .field-move-btn,
+  .field-remove-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    cursor: pointer;
+    color: var(--text-muted);
+    transition:
+      background 0.1s,
+      color 0.1s;
+  }
+
+  .field-move-btn:hover {
+    background: var(--card-hover-bg);
+    color: var(--text-primary);
+  }
+
+  .field-remove-btn:hover {
+    background: rgba(220, 38, 38, 0.08);
+    color: #dc2626;
+  }
+
+  .field-card-body {
+    padding: 10px;
+  }
+
+  .field-row {
+    display: grid;
+    grid-template-columns: 1fr 140px;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+
+  .field-name-group,
+  .field-type-group,
+  .field-id-group {
+    margin-bottom: 0;
+  }
+
+  .field-id-row {
+    margin-bottom: 8px;
+  }
+
+  .field-id-input {
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+    font-size: 12px;
+  }
+
+  .field-toggles {
+    display: flex;
+    gap: 16px;
+  }
+
+  .toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-weight: 400;
+  }
+
+  .toggle-label input[type="checkbox"] {
+    accent-color: var(--accent-color, #0066cc);
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+  }
+
+  .toggle-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+
+  .add-field-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    background: var(--bg-inset);
+    border: 1px dashed var(--border-subtle);
+    border-radius: 7px;
+    font-size: 12.5px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition:
+      background 0.12s,
+      border-color 0.12s,
+      color 0.12s;
+  }
+
+  .add-field-btn:hover {
+    background: var(--card-hover-bg);
+    border-color: var(--accent-color, #0066cc);
+    color: var(--text-primary);
+  }
+
+  /* Sub-fields section */
+  .sub-fields-section {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--border-subtle);
+  }
+
+  .sub-fields-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+  }
+
+  .sub-fields-label {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+
+  .sub-fields-count {
+    font-size: 10px;
+    font-weight: 500;
+    padding: 1px 6px;
+    border-radius: 8px;
+    background: var(--status-neutral-bg);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
+  }
+
+  .sub-fields-empty {
+    margin: 0 0 8px;
+    font-size: 12px;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  .sub-fields-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .sub-field-card {
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-surface);
+    overflow: hidden;
+  }
+
+  .sub-field-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    background: var(--bg-inset);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .sub-field-card-body {
+    padding: 8px;
+  }
+
+  .add-sub-field-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 12px;
+    background: none;
+    border: 1px dashed var(--border-subtle);
+    border-radius: 6px;
+    font-size: 11.5px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition:
+      background 0.12s,
+      border-color 0.12s,
+      color 0.12s;
+  }
+
+  .add-sub-field-btn:hover {
+    background: var(--card-hover-bg);
+    border-color: var(--accent-color, #0066cc);
+    color: var(--text-primary);
+  }
+
+  .toggle-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Footer */
+  .modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 14px 22px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .btn-cancel {
+    padding: 7px 16px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--bg-inset);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    transition:
+      background 0.15s,
+      border-color 0.15s;
+  }
+
+  .btn-cancel:hover:not(:disabled) {
+    background: var(--card-hover-bg);
+    border-color: var(--border-default);
+    color: var(--text-primary);
+  }
+
+  .btn-cancel:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .btn-submit {
+    padding: 7px 18px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--accent-color, #0066cc);
+    border: 1px solid transparent;
+    color: #fff;
+    transition: filter 0.15s;
+  }
+
+  .btn-submit:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .btn-submit:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  @keyframes backdropIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes modalIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+</style>
diff --git a/src/components/CreateRoleModal.svelte b/src/components/CreateRoleModal.svelte
index 32d28d8..7802c4f 100644
--- a/src/components/CreateRoleModal.svelte
+++ b/src/components/CreateRoleModal.svelte
@@ -21,6 +21,14 @@
     monikerEdited = true;
     selectedPermissions = new Set(roleToEdit.permissions);
 
+    // Identify permissions not in the categorized list → show as custom
+    const catalogued = new Set(
+      Object.values(permissionNodes).flatMap((cat) =>
+        (cat as PermissionCategory).permissions.map((p) => p.node),
+      ),
+    );
+    customNodes = roleToEdit.permissions.filter((p) => !catalogued.has(p));
+
     // Auto-expand categories that contain selected permissions
     const sel = new Set(roleToEdit.permissions);
     const expanded = new Set<string>();
@@ -39,10 +47,12 @@
   let moniker = "";
   let monikerEdited = false;
   let selectedPermissions = new Set<string>();
-  let permissionSearch = "";
   let expandedCategories = new Set<string>();
   let isSubmitting = false;
   let submitError = "";
+  let customPermNode = "";
+  let customPermError = "";
+  let customNodes: string[] = [];
 
   $: if (!monikerEdited) {
     moniker = title
@@ -51,27 +61,10 @@
       .replace(/[^a-z0-9-]/g, "");
   }
 
-  $: filteredEntries = (() => {
-    const entries = Object.entries(permissionNodes) as [
-      string,
-      PermissionCategory,
-    ][];
-    if (!permissionSearch.trim()) return entries;
-    const q = permissionSearch.toLowerCase();
-    return entries
-      .map(([key, cat]): [string, PermissionCategory] => [
-        key,
-        {
-          ...cat,
-          permissions: cat.permissions.filter(
-            (p: PermissionNode) =>
-              p.node.toLowerCase().includes(q) ||
-              p.description.toLowerCase().includes(q),
-          ),
-        },
-      ])
-      .filter(([, cat]) => cat.permissions.length > 0);
-  })();
+  $: permissionEntries = Object.entries(permissionNodes ?? {}) as [
+    string,
+    PermissionCategory,
+  ][];
 
   $: isValid = title.trim().length > 0 && moniker.trim().length > 0;
   $: selectedCount = selectedPermissions.size;
@@ -97,15 +90,52 @@
     selectedPermissions = next;
   }
 
+  function addCustomPermission() {
+    const node = customPermNode.trim();
+    customPermError = "";
+    if (!node) return;
+    // Validate permission node format per PERMISSIONS.md:
+    // - dot-separated tokens of lowercase alphanumeric + underscores
+    // - special tokens: * (wildcard), ? (single-char wildcard)
+    // - inclusive list [a,b,c] or exclusive list <a,b,c>
+    // - standalone * for full access
+    if (
+      !/^(?:\*|(?:(?:[a-z0-9_]+|\*|\?|\[[a-z0-9_]+(?:,[a-z0-9_]+)*\]|<[a-z0-9_]+(?:,[a-z0-9_]+)*>)(?:\.(?:[a-z0-9_]+|\*|\?|\[[a-z0-9_]+(?:,[a-z0-9_]+)*\]|<[a-z0-9_]+(?:,[a-z0-9_]+)*>))*))$/.test(
+        node,
+      )
+    ) {
+      customPermError =
+        "Use dot-separated tokens (e.g. resource.action). Supports: a-z, 0-9, underscores, * ? wildcards, [a,b] or <a,b> lists.";
+      return;
+    }
+    if (selectedPermissions.has(node)) {
+      customPermError = "This permission is already selected.";
+      return;
+    }
+    // Add to custom list if not from the categorized set
+    const catalogued = Object.values(permissionNodes).flatMap((cat) =>
+      (cat as PermissionCategory).permissions.map((p) => p.node),
+    );
+    if (!catalogued.includes(node)) {
+      customNodes = [...customNodes, node];
+    }
+    const next = new Set(selectedPermissions);
+    next.add(node);
+    selectedPermissions = next;
+    customPermNode = "";
+  }
+
   function reset() {
     title = "";
     moniker = "";
     monikerEdited = false;
     selectedPermissions = new Set();
-    permissionSearch = "";
     expandedCategories = new Set();
     isSubmitting = false;
     submitError = "";
+    customPermNode = "";
+    customPermError = "";
+    customNodes = [];
   }
 
   function handleClose() {
@@ -113,9 +143,8 @@
     onClose();
   }
 
-  function handleBackdropClick(e: MouseEvent) {
-    if ((e.target as HTMLElement).classList.contains("modal-backdrop"))
-      handleClose();
+  function handleBackdropClick() {
+    handleClose();
   }
 
   function handleBackdropKeydown(e: KeyboardEvent) {
@@ -130,12 +159,15 @@
     on:click={handleBackdropClick}
     on:keydown={handleBackdropKeydown}
   >
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
       class="modal"
       role="dialog"
       aria-modal="true"
       aria-label={isEditMode ? "Edit Role" : "Create Role"}
       tabindex="-1"
+      on:click|stopPropagation
     >
       <div class="modal-header">
         <div class="modal-title-group">
@@ -174,7 +206,11 @@
       <form
         method="POST"
         action={isEditMode ? "?/updateRole" : "?/createRole"}
-        use:enhance={() => {
+        use:enhance={({ formData }) => {
+          // Append permissions at submit time instead of via reactive hidden inputs
+          for (const node of selectedPermissions) {
+            formData.append("permissions", node);
+          }
           isSubmitting = true;
           submitError = "";
           return async ({ result, update }) => {
@@ -197,9 +233,6 @@
           };
         }}
       >
-        {#each [...selectedPermissions] as node (node)}
-          <input type="hidden" name="permissions" value={node} />
-        {/each}
         {#if isEditMode && roleToEdit}
           <input type="hidden" name="id" value={roleToEdit.id} />
         {/if}
@@ -261,64 +294,19 @@
               {/if}
             </div>
 
-            <div class="search-wrap">
-              <svg
-                class="search-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                width="13"
-                height="13"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
-              </svg>
-              <input
-                type="text"
-                class="search-input"
-                placeholder="Search permissions…"
-                bind:value={permissionSearch}
-              />
-              {#if permissionSearch}
-                <button
-                  type="button"
-                  class="search-clear"
-                  on:click={() => (permissionSearch = "")}
-                  aria-label="Clear search"
-                >
-                  <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2.5"
-                    width="11"
-                    height="11"
-                  >
-                    <line x1="18" y1="6" x2="6" y2="18" />
-                    <line x1="6" y1="6" x2="18" y2="18" />
-                  </svg>
-                </button>
-              {/if}
-            </div>
-
             <div class="perm-list">
               {#if Object.keys(permissionNodes).length === 0}
                 <p class="perm-empty">No permission data available.</p>
-              {:else if filteredEntries.length === 0}
-                <p class="perm-empty">No permissions match your search.</p>
               {:else}
-                {#each filteredEntries as [catKey, category] (catKey)}
-                  {@const catPerms = category.permissions}
+                {#each permissionEntries as [catKey, category] (catKey)}
+                  {@const catPerms = category.permissions ?? []}
                   {@const allSel =
                     catPerms.length > 0 &&
                     catPerms.every((p) => selectedPermissions.has(p.node))}
                   {@const someSel =
                     !allSel &&
                     catPerms.some((p) => selectedPermissions.has(p.node))}
-                  {@const isExpanded =
-                    permissionSearch.trim().length > 0 ||
-                    expandedCategories.has(catKey)}
+                  {@const isExpanded = expandedCategories.has(catKey)}
                   <div class="cat-group">
                     <div class="cat-header">
                       <button
@@ -419,7 +407,96 @@
                   </div>
                 {/each}
               {/if}
+
+              <!-- Custom permission nodes -->
+              {#if customNodes.length > 0}
+                <div class="cat-group">
+                  <div class="cat-header">
+                    <div class="cat-toggle custom-cat-label">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        width="11"
+                        height="11"
+                      >
+                        <line x1="12" y1="5" x2="12" y2="19" />
+                        <line x1="5" y1="12" x2="19" y2="12" />
+                      </svg>
+                      <span class="cat-name">Custom</span>
+                      <span class="cat-count">{customNodes.length}</span>
+                    </div>
+                  </div>
+                  <div class="cat-perms">
+                    {#each customNodes as node (node)}
+                      {@const sel = selectedPermissions.has(node)}
+                      <label class="perm-row" class:perm-sel={sel}>
+                        <input
+                          type="checkbox"
+                          class="sr-only"
+                          checked={sel}
+                          on:change={() => togglePermission(node)}
+                        />
+                        <div class="cb" class:cb-checked={sel}>
+                          {#if sel}
+                            <svg
+                              viewBox="0 0 10 10"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="8"
+                              height="8"
+                            >
+                              <polyline points="1.5 5 4 8 8.5 2" />
+                            </svg>
+                          {/if}
+                        </div>
+                        <div class="perm-text">
+                          <code class="perm-node">{node}</code>
+                          <span class="perm-desc">Custom permission</span>
+                        </div>
+                      </label>
+                    {/each}
+                  </div>
+                </div>
+              {/if}
             </div>
+
+            <!-- Custom permission input -->
+            <div class="custom-perm-wrap">
+              <input
+                type="text"
+                class="custom-perm-input"
+                placeholder="Add custom node… (e.g. my.custom.node)"
+                bind:value={customPermNode}
+                on:keydown={(e) =>
+                  e.key === "Enter" &&
+                  (e.preventDefault(), addCustomPermission())}
+              />
+              <button
+                type="button"
+                class="custom-perm-btn"
+                on:click={addCustomPermission}
+                disabled={!customPermNode.trim()}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="13"
+                  height="13"
+                >
+                  <line x1="12" y1="5" x2="12" y2="19" />
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+                Add
+              </button>
+            </div>
+            {#if customPermError}
+              <p class="custom-perm-error">{customPermError}</p>
+            {/if}
           </div>
         </div>
 
@@ -659,58 +736,81 @@
     color: #fff;
   }
 
-  /* ── Search ── */
-  .search-wrap {
-    position: relative;
+  /* ── Custom permission input ── */
+  .custom-perm-wrap {
     display: flex;
-    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
   }
 
-  .search-icon {
-    position: absolute;
-    left: 9px;
-    color: var(--text-muted);
-    pointer-events: none;
-  }
-
-  .search-input {
-    width: 100%;
-    padding: 7px 10px 7px 29px;
-    background: var(--bg-inset);
+  .custom-perm-input {
+    flex: 1;
+    padding: 7px 10px;
     border: 1px solid var(--border-subtle);
     border-radius: 7px;
-    font-size: 13px;
+    background: var(--bg-inset);
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+    font-size: 12px;
     color: var(--text-primary);
     outline: none;
     box-sizing: border-box;
-    transition: border-color 0.15s;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
   }
 
-  .search-input::placeholder {
+  .custom-perm-input::placeholder {
     color: var(--text-muted);
+    font-family: inherit;
   }
 
-  .search-input:focus {
+  .custom-perm-input:focus {
     border-color: var(--accent-color, #0066cc);
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
   }
 
-  .search-clear {
-    position: absolute;
-    right: 8px;
-    background: none;
+  .custom-perm-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 7px 14px;
+    background: var(--accent-color, #0066cc);
+    color: #fff;
     border: none;
-    padding: 3px;
+    border-radius: 7px;
+    font-size: 12px;
+    font-weight: 500;
     cursor: pointer;
-    color: var(--text-muted);
-    border-radius: 4px;
+    white-space: nowrap;
+    transition: filter 0.15s;
+  }
+
+  .custom-perm-btn:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .custom-perm-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .custom-perm-error {
+    margin: 4px 0 0;
+    font-size: 11.5px;
+    color: #dc2626;
+  }
+
+  .custom-cat-label {
+    cursor: default;
     display: flex;
     align-items: center;
-    justify-content: center;
-    transition: color 0.1s;
+    gap: 6px;
+    padding: 7px 10px;
   }
 
-  .search-clear:hover {
-    color: var(--text-primary);
+  .custom-cat-label svg {
+    color: var(--text-muted);
+    flex-shrink: 0;
   }
 
   /* ── Permission list ── */
diff --git a/src/components/EditUserModal.svelte b/src/components/EditUserModal.svelte
new file mode 100644
index 0000000..fa4f33e
--- /dev/null
+++ b/src/components/EditUserModal.svelte
@@ -0,0 +1,724 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import type { SubmitFunction } from "@sveltejs/kit";
+  import type { User } from "$lib/optima-api/modules/users";
+  import type { Role } from "$lib/optima-api/modules/roles";
+  import type { PermissionsCategorized } from "$lib/optima-api/modules/permissions";
+
+  type UserWithRoles = User & { roleDetails: Role[] };
+
+  export let user: UserWithRoles;
+  export let allRoles: Role[] = [];
+  export let permissionNodes: PermissionsCategorized = {};
+  export let canEditRoles = false;
+  export let canEditPermissions = false;
+  export let onClose: () => void = () => {};
+  export let onSuccess: () => void = () => {};
+
+  let editName = user.name;
+  let editImage = user.image ?? "";
+  let editError = "";
+  let isEditing = false;
+
+  // Role editing
+  let editSelectedRoles: string[] = user.roleDetails.map((r) => r.id);
+
+  // Permission editing
+  let editSelectedPermissions: string[] = [...(user.permissions ?? [])];
+  let permSearchQuery = "";
+  let customPermNode = "";
+  let customPermError = "";
+
+  // Track custom-added nodes so they appear in the list
+  let customNodes: string[] = [];
+
+  $: allPermissionNodes = [
+    ...Object.values(permissionNodes ?? {}).flatMap((cat) =>
+      cat.permissions.map((p) => p.node),
+    ),
+    ...customNodes.filter(
+      (n) =>
+        !Object.values(permissionNodes ?? {})
+          .flatMap((cat) => cat.permissions.map((p) => p.node))
+          .includes(n),
+    ),
+  ];
+
+  $: filteredPermNodes = permSearchQuery.trim()
+    ? allPermissionNodes.filter((n) =>
+        n.toLowerCase().includes(permSearchQuery.toLowerCase()),
+      )
+    : allPermissionNodes;
+
+  function toggleEditRole(id: string) {
+    if (editSelectedRoles.includes(id)) {
+      editSelectedRoles = editSelectedRoles.filter((r) => r !== id);
+    } else {
+      editSelectedRoles = [...editSelectedRoles, id];
+    }
+  }
+
+  function toggleEditPermission(node: string) {
+    if (editSelectedPermissions.includes(node)) {
+      editSelectedPermissions = editSelectedPermissions.filter(
+        (p) => p !== node,
+      );
+    } else {
+      editSelectedPermissions = [...editSelectedPermissions, node];
+    }
+  }
+
+  function addCustomPermission() {
+    const node = customPermNode.trim();
+    customPermError = "";
+    if (!node) return;
+    // Validate permission node format per PERMISSIONS.md:
+    // - dot-separated tokens of lowercase alphanumeric + underscores
+    // - special tokens: * (wildcard), ? (single-char wildcard)
+    // - inclusive list [a,b,c] or exclusive list <a,b,c>
+    // - standalone * for full access
+    if (
+      !/^(?:\*|(?:(?:[a-z0-9_]+|\*|\?|\[[a-z0-9_]+(?:,[a-z0-9_]+)*\]|<[a-z0-9_]+(?:,[a-z0-9_]+)*>)(?:\.(?:[a-z0-9_]+|\*|\?|\[[a-z0-9_]+(?:,[a-z0-9_]+)*\]|<[a-z0-9_]+(?:,[a-z0-9_]+)*>))*))$/.test(
+        node,
+      )
+    ) {
+      customPermError =
+        "Use dot-separated tokens (e.g. resource.action). Supports: a-z, 0-9, underscores, * ? wildcards, [a,b] or <a,b> lists.";
+      return;
+    }
+    if (editSelectedPermissions.includes(node)) {
+      customPermError = "This permission is already selected.";
+      return;
+    }
+    if (!allPermissionNodes.includes(node)) {
+      customNodes = [...customNodes, node];
+    }
+    editSelectedPermissions = [...editSelectedPermissions, node];
+    customPermNode = "";
+  }
+
+  const handleEditEnhance: SubmitFunction = () => {
+    isEditing = true;
+    editError = "";
+    return async ({ result, update }) => {
+      isEditing = false;
+      if (result.type === "success") {
+        onSuccess();
+      } else if (result.type === "failure") {
+        editError =
+          (result.data as { message?: string })?.message ??
+          "Failed to update user.";
+      }
+      await update();
+    };
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="confirm-backdrop"
+  on:click={onClose}
+  on:keydown={(e) => e.key === "Escape" && onClose()}
+>
+  <div
+    class="edit-dialog"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="edit-title"
+    tabindex="-1"
+    on:click|stopPropagation
+    on:keydown|stopPropagation
+  >
+    <h3 id="edit-title" class="edit-dialog-title">Edit User</h3>
+    <p class="edit-dialog-sub">
+      Update information for <strong>{user.name}</strong>
+    </p>
+    {#if editError}
+      <p class="confirm-error">{editError}</p>
+    {/if}
+    <form method="POST" action="?/updateUser" use:enhance={handleEditEnhance}>
+      <input type="hidden" name="id" value={user.id} />
+      {#if canEditRoles}
+        <input
+          type="hidden"
+          name="roles"
+          value={JSON.stringify(editSelectedRoles)}
+        />
+      {/if}
+      {#if canEditPermissions}
+        <input
+          type="hidden"
+          name="permissions"
+          value={JSON.stringify(editSelectedPermissions)}
+        />
+      {/if}
+
+      <div class="edit-field">
+        <label for="edit-name">Name</label>
+        <input
+          id="edit-name"
+          type="text"
+          name="name"
+          bind:value={editName}
+          required
+        />
+      </div>
+      <div class="edit-field">
+        <label for="edit-image">Avatar URL</label>
+        <input
+          id="edit-image"
+          type="text"
+          name="image"
+          bind:value={editImage}
+          placeholder="https://..."
+        />
+      </div>
+
+      <!-- Role assignment (gated by user.roles.other) -->
+      {#if canEditRoles}
+        <div class="edit-section">
+          <div class="edit-section-label">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="13"
+              height="13"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+            Roles
+            <span class="edit-section-count"
+              >{editSelectedRoles.length} selected</span
+            >
+          </div>
+          <div class="edit-role-list">
+            {#each allRoles as role (role.id)}
+              <button
+                type="button"
+                class="edit-role-chip"
+                class:selected={editSelectedRoles.includes(role.id)}
+                on:click={() => toggleEditRole(role.id)}
+              >
+                <span class="edit-role-check">
+                  {#if editSelectedRoles.includes(role.id)}
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2.5"
+                      width="12"
+                      height="12"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  {/if}
+                </span>
+                <span class="edit-role-chip-title">{role.title}</span>
+                <span class="edit-role-chip-moniker">{role.moniker}</span>
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      <!-- Direct permission assignment (gated by user.permissions.other) -->
+      {#if canEditPermissions}
+        <div class="edit-section">
+          <div class="edit-section-label">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="13"
+              height="13"
+            >
+              <path
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
+              />
+              <rect x="9" y="3" width="6" height="4" rx="1" />
+            </svg>
+            Direct Permissions
+            <span class="edit-section-count"
+              >{editSelectedPermissions.length} selected</span
+            >
+          </div>
+          <div class="edit-perm-search-wrap">
+            <input
+              type="text"
+              class="edit-perm-search"
+              placeholder="Search permissions…"
+              bind:value={permSearchQuery}
+            />
+          </div>
+          <div class="edit-custom-perm-wrap">
+            <input
+              type="text"
+              class="edit-custom-perm-input"
+              placeholder="Add custom node… (e.g. my.custom.node)"
+              bind:value={customPermNode}
+              on:keydown={(e) =>
+                e.key === "Enter" &&
+                (e.preventDefault(), addCustomPermission())}
+            />
+            <button
+              type="button"
+              class="edit-custom-perm-btn"
+              on:click={addCustomPermission}
+              disabled={!customPermNode.trim()}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="13"
+                height="13"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Add
+            </button>
+          </div>
+          {#if customPermError}
+            <p class="edit-custom-perm-error">{customPermError}</p>
+          {/if}
+          <div class="edit-perm-list">
+            {#each filteredPermNodes as node}
+              <label class="edit-perm-item">
+                <input
+                  type="checkbox"
+                  checked={editSelectedPermissions.includes(node)}
+                  on:change={() => toggleEditPermission(node)}
+                />
+                <span class="edit-perm-node">{node}</span>
+              </label>
+            {/each}
+            {#if filteredPermNodes.length === 0}
+              <p class="edit-perm-empty">No permissions match your search.</p>
+            {/if}
+          </div>
+        </div>
+      {/if}
+
+      <div class="confirm-actions">
+        <button
+          type="button"
+          class="btn-cancel"
+          on:click={onClose}
+          disabled={isEditing}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          class="btn-save"
+          disabled={isEditing || !editName.trim()}
+        >
+          {isEditing ? "Saving…" : "Save Changes"}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<style>
+  /* ── Backdrop & dialog ── */
+  .confirm-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .edit-dialog {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+    width: 90%;
+    max-width: 520px;
+    max-height: 85vh;
+    overflow-y: auto;
+    padding: 28px 24px 22px;
+    animation: modalIn 0.15s ease;
+  }
+
+  @keyframes modalIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  .edit-dialog-title {
+    margin: 0 0 4px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .edit-dialog-sub {
+    margin: 0 0 18px;
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  .confirm-error {
+    margin: 0 0 12px;
+    font-size: 13px;
+    color: #dc2626;
+  }
+
+  /* ── Form fields ── */
+  .edit-field {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 14px;
+  }
+
+  .edit-field label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .edit-field input {
+    padding: 8px 12px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--bg-inset);
+    font-size: 13px;
+    color: var(--text-primary);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  .edit-field input:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  }
+
+  /* ── Actions ── */
+  .confirm-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .btn-cancel {
+    padding: 7px 16px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--bg-inset);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    transition:
+      background 0.15s,
+      border-color 0.15s;
+  }
+
+  .btn-cancel:hover:not(:disabled) {
+    background: var(--card-hover-bg);
+    border-color: var(--border-default);
+    color: var(--text-primary);
+  }
+
+  .btn-cancel:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .btn-save {
+    padding: 7px 16px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--accent-color, #0066cc);
+    border: 1px solid transparent;
+    color: #fff;
+    transition: filter 0.15s;
+  }
+
+  .btn-save:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .btn-save:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* ── Edit sections (roles & permissions) ── */
+  .edit-section {
+    margin-bottom: 16px;
+    border-top: 1px solid var(--border-subtle);
+    padding-top: 14px;
+  }
+
+  .edit-section-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 10px;
+  }
+
+  .edit-section-label svg {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .edit-section-count {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-muted);
+    text-transform: none;
+    letter-spacing: normal;
+    margin-left: auto;
+  }
+
+  /* ── Role chips ── */
+  .edit-role-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 160px;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
+
+  .edit-role-chip {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    background: var(--bg-inset);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--text-primary);
+    text-align: left;
+    transition:
+      background 0.12s,
+      border-color 0.12s;
+  }
+
+  .edit-role-chip:hover {
+    background: var(--card-hover-bg);
+  }
+
+  .edit-role-chip.selected {
+    background: rgba(0, 102, 204, 0.08);
+    border-color: var(--accent-color, #0066cc);
+  }
+
+  .edit-role-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1.5px solid var(--border-subtle);
+    flex-shrink: 0;
+    color: var(--accent-color, #0066cc);
+    transition: border-color 0.12s;
+  }
+
+  .edit-role-chip.selected .edit-role-check {
+    border-color: var(--accent-color, #0066cc);
+    background: var(--accent-color, #0066cc);
+    color: #fff;
+  }
+
+  .edit-role-chip-title {
+    font-weight: 600;
+    font-size: 13px;
+  }
+
+  .edit-role-chip-moniker {
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-left: auto;
+  }
+
+  /* ── Custom permission input ── */
+  .edit-custom-perm-wrap {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 8px;
+  }
+
+  .edit-custom-perm-input {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: var(--bg-inset);
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+    font-size: 12px;
+    color: var(--text-primary);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  .edit-custom-perm-input::placeholder {
+    color: var(--text-muted);
+    font-family: inherit;
+  }
+
+  .edit-custom-perm-input:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  }
+
+  .edit-custom-perm-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    background: var(--accent-color, #0066cc);
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: filter 0.15s;
+  }
+
+  .edit-custom-perm-btn:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .edit-custom-perm-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .edit-custom-perm-error {
+    margin: 0 0 6px;
+    font-size: 11.5px;
+    color: #dc2626;
+  }
+
+  /* ── Permission list ── */
+  .edit-perm-search-wrap {
+    margin-bottom: 8px;
+  }
+
+  .edit-perm-search {
+    width: 100%;
+    padding: 6px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: var(--bg-inset);
+    font-size: 12.5px;
+    color: var(--text-primary);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  .edit-perm-search::placeholder {
+    color: var(--text-muted);
+  }
+
+  .edit-perm-search:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  }
+
+  .edit-perm-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-height: 180px;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
+
+  .edit-perm-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.1s;
+  }
+
+  .edit-perm-item:hover {
+    background: var(--card-hover-bg);
+  }
+
+  .edit-perm-item input[type="checkbox"] {
+    accent-color: var(--accent-color, #0066cc);
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .edit-perm-node {
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+    font-size: 11.5px;
+    color: var(--text-primary);
+  }
+
+  .edit-perm-empty {
+    margin: 0;
+    padding: 8px;
+    font-size: 12.5px;
+    color: var(--text-muted);
+    text-align: center;
+  }
+
+  /* Scrollbars */
+  .edit-role-list::-webkit-scrollbar,
+  .edit-perm-list::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  .edit-role-list::-webkit-scrollbar-track,
+  .edit-perm-list::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .edit-role-list::-webkit-scrollbar-thumb,
+  .edit-perm-list::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 3px;
+  }
+</style>
diff --git a/src/components/LinkUnifiSiteModal.svelte b/src/components/LinkUnifiSiteModal.svelte
new file mode 100644
index 0000000..80163a2
--- /dev/null
+++ b/src/components/LinkUnifiSiteModal.svelte
@@ -0,0 +1,999 @@
+<script lang="ts">
+  import { unifi, type UnifiSite } from "$lib/optima-api/modules/unifi";
+
+  export let isOpen = false;
+  export let accessToken: string;
+  export let companyId: string;
+  export let linkedSiteIds: string[] = [];
+  export let onSuccess: () => void = () => {};
+
+  type ModalStep = "choose" | "existing" | "new";
+  let step: ModalStep = "choose";
+
+  // Existing site linking
+  let allSites: UnifiSite[] = [];
+  let isLoadingSites = false;
+  let selectedSiteId = "";
+  let isLinking = false;
+  let linkError = "";
+  let siteSearch = "";
+
+  // New site creation
+  let newSiteName = "";
+  let isCreating = false;
+  let createError = "";
+
+  function reset() {
+    step = "choose";
+    allSites = [];
+    isLoadingSites = false;
+    selectedSiteId = "";
+    isLinking = false;
+    linkError = "";
+    siteSearch = "";
+    newSiteName = "";
+    isCreating = false;
+    createError = "";
+  }
+
+  function close() {
+    isOpen = false;
+    reset();
+  }
+
+  async function goToExisting() {
+    step = "existing";
+    linkError = "";
+    isLoadingSites = true;
+    try {
+      const result = await unifi.fetchSites(accessToken);
+      // Filter out sites already linked to this company
+      allSites = (result?.data ?? []).filter(
+        (s: UnifiSite) => !linkedSiteIds.includes(s.id),
+      );
+    } catch (err) {
+      console.error("Failed to fetch UniFi sites:", err);
+      linkError = err instanceof Error ? err.message : "Failed to load sites";
+      allSites = [];
+    } finally {
+      isLoadingSites = false;
+    }
+  }
+
+  function goToNew() {
+    step = "new";
+    createError = "";
+    newSiteName = "";
+  }
+
+  function goBack() {
+    step = "choose";
+    linkError = "";
+    createError = "";
+  }
+
+  async function linkExistingSite() {
+    if (!selectedSiteId || !accessToken) return;
+    isLinking = true;
+    linkError = "";
+    try {
+      await unifi.linkSite(accessToken, selectedSiteId, companyId);
+      close();
+      onSuccess();
+    } catch (err) {
+      linkError = err instanceof Error ? err.message : "Failed to link site";
+      console.error("Failed to link UniFi site:", err);
+    } finally {
+      isLinking = false;
+    }
+  }
+
+  async function createAndLinkSite() {
+    if (!newSiteName.trim() || !accessToken) return;
+    isCreating = true;
+    createError = "";
+    try {
+      const result = await unifi.createSite(accessToken, newSiteName.trim());
+      const newSiteId = result?.data?.id;
+      if (newSiteId && companyId) {
+        await unifi.linkSite(accessToken, newSiteId, companyId);
+      }
+      close();
+      onSuccess();
+    } catch (err) {
+      createError =
+        err instanceof Error ? err.message : "Failed to create site";
+      console.error("Failed to create UniFi site:", err);
+    } finally {
+      isCreating = false;
+    }
+  }
+
+  // Filter sites that are unlinked (no company) or linked to a different company
+  $: availableSites = allSites.filter(
+    (s) => !s.companyId || s.companyId !== companyId,
+  );
+  $: unlinkedSites = availableSites.filter((s) => !s.companyId);
+  $: otherCompanySites = availableSites.filter(
+    (s) => s.companyId && s.companyId !== companyId,
+  );
+
+  // Search-filtered lists
+  $: filteredUnlinked = siteSearch.trim()
+    ? unlinkedSites.filter((s) => {
+        const q = siteSearch.trim().toLowerCase();
+        return (
+          s.name.toLowerCase().includes(q) || s.siteId.toLowerCase().includes(q)
+        );
+      })
+    : unlinkedSites;
+  $: filteredOtherCompany = siteSearch.trim()
+    ? otherCompanySites.filter((s) => {
+        const q = siteSearch.trim().toLowerCase();
+        return (
+          s.name.toLowerCase().includes(q) ||
+          s.siteId.toLowerCase().includes(q) ||
+          (s.company?.name ?? "").toLowerCase().includes(q)
+        );
+      })
+    : otherCompanySites;
+  $: totalFiltered = filteredUnlinked.length + filteredOtherCompany.length;
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="modal-overlay" on:click={close}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="modal-container" on:click|stopPropagation>
+      <div class="modal-header">
+        {#if step !== "choose"}
+          <button
+            class="modal-back"
+            on:click={goBack}
+            type="button"
+            aria-label="Back"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="16"
+              height="16"
+            >
+              <path d="M19 12H5M12 19l-7-7 7-7" />
+            </svg>
+          </button>
+        {/if}
+        <h3 class="modal-title">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+            <path d="M2 17l10 5 10-5" />
+            <path d="M2 12l10 5 10-5" />
+          </svg>
+          {#if step === "choose"}
+            Link UniFi Site
+          {:else if step === "existing"}
+            Link Existing Site
+          {:else}
+            Create New Site
+          {/if}
+        </h3>
+        <button
+          class="modal-close"
+          on:click={close}
+          type="button"
+          aria-label="Close"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="16"
+            height="16"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        {#if step === "choose"}
+          <p class="modal-description">
+            How would you like to add a UniFi site?
+          </p>
+          <div class="choice-grid">
+            <button class="choice-card" on:click={goToNew} type="button">
+              <div class="choice-icon">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  width="28"
+                  height="28"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="16" />
+                  <line x1="8" y1="12" x2="16" y2="12" />
+                </svg>
+              </div>
+              <span class="choice-label">New Site</span>
+              <span class="choice-desc"
+                >Create a new site on the UniFi controller</span
+              >
+            </button>
+            <button class="choice-card" on:click={goToExisting} type="button">
+              <div class="choice-icon">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  width="28"
+                  height="28"
+                >
+                  <path
+                    d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+                  />
+                  <path
+                    d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+                  />
+                </svg>
+              </div>
+              <span class="choice-label">Existing Site</span>
+              <span class="choice-desc"
+                >Link an existing UniFi site to this company</span
+              >
+            </button>
+          </div>
+        {:else if step === "existing"}
+          {#if isLoadingSites}
+            <div class="modal-loading">
+              <svg viewBox="0 0 24 24" width="20" height="20" class="spin-icon">
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  fill="none"
+                  opacity="0.25"
+                />
+                <path
+                  d="M12 2a10 10 0 0 1 10 10"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  fill="none"
+                  stroke-linecap="round"
+                />
+              </svg>
+              <span>Loading sites…</span>
+            </div>
+          {:else if availableSites.length === 0}
+            <div class="modal-empty">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                width="32"
+                height="32"
+              >
+                <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                <path d="M2 17l10 5 10-5" />
+                <path d="M2 12l10 5 10-5" />
+              </svg>
+              <p>No available sites to link</p>
+              <span class="modal-empty-hint"
+                >All sites are already linked to this company, or no sites
+                exist.</span
+              >
+            </div>
+          {:else}
+            <!-- Search input -->
+            <div class="site-search-bar">
+              <svg
+                class="site-search-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="14"
+                height="14"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              <input
+                class="site-search-input"
+                type="text"
+                placeholder="Search sites…"
+                bind:value={siteSearch}
+                disabled={isLinking}
+              />
+              {#if siteSearch}
+                <button
+                  class="site-search-clear"
+                  type="button"
+                  on:click={() => (siteSearch = "")}
+                  aria-label="Clear search"
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    width="12"
+                    height="12"
+                  >
+                    <path d="M18 6L6 18M6 6l12 12" />
+                  </svg>
+                </button>
+              {/if}
+            </div>
+
+            <!-- Scrollable site list -->
+            <div class="site-list">
+              {#if totalFiltered === 0}
+                <div class="site-list-empty">
+                  <p>No sites matching "{siteSearch}"</p>
+                </div>
+              {:else}
+                {#if filteredUnlinked.length > 0}
+                  <div class="site-list-group-label">Unlinked Sites</div>
+                  {#each filteredUnlinked as site (site.id)}
+                    <button
+                      class="site-list-item"
+                      class:selected={selectedSiteId === site.id}
+                      type="button"
+                      on:click={() => (selectedSiteId = site.id)}
+                      disabled={isLinking}
+                    >
+                      <div class="site-list-item-icon">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          width="18"
+                          height="18"
+                        >
+                          <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                          <path d="M2 17l10 5 10-5" />
+                          <path d="M2 12l10 5 10-5" />
+                        </svg>
+                      </div>
+                      <div class="site-list-item-info">
+                        <span class="site-list-item-name">{site.name}</span>
+                        <span class="site-list-item-id">{site.siteId}</span>
+                      </div>
+                      {#if selectedSiteId === site.id}
+                        <svg
+                          class="site-list-item-check"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.5"
+                          width="16"
+                          height="16"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      {/if}
+                    </button>
+                  {/each}
+                {/if}
+                {#if filteredOtherCompany.length > 0}
+                  <div class="site-list-group-label">
+                    Linked to Other Companies
+                  </div>
+                  {#each filteredOtherCompany as site (site.id)}
+                    <button
+                      class="site-list-item"
+                      class:selected={selectedSiteId === site.id}
+                      type="button"
+                      on:click={() => (selectedSiteId = site.id)}
+                      disabled={isLinking}
+                    >
+                      <div class="site-list-item-icon">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          width="18"
+                          height="18"
+                        >
+                          <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                          <path d="M2 17l10 5 10-5" />
+                          <path d="M2 12l10 5 10-5" />
+                        </svg>
+                      </div>
+                      <div class="site-list-item-info">
+                        <span class="site-list-item-name">{site.name}</span>
+                        <span class="site-list-item-id"
+                          >{site.company?.name ?? "Unknown"}</span
+                        >
+                      </div>
+                      {#if selectedSiteId === site.id}
+                        <svg
+                          class="site-list-item-check"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.5"
+                          width="16"
+                          height="16"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      {/if}
+                    </button>
+                  {/each}
+                {/if}
+              {/if}
+            </div>
+
+            {#if linkError}
+              <div class="modal-error">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="14"
+                  height="14"
+                >
+                  <circle cx="12" cy="12" r="10" /><line
+                    x1="12"
+                    y1="8"
+                    x2="12"
+                    y2="12"
+                  /><line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+                {linkError}
+              </div>
+            {/if}
+          {/if}
+        {:else if step === "new"}
+          <div class="modal-field">
+            <label class="modal-label" for="new-unifi-site-name"
+              >Site Name</label
+            >
+            <input
+              id="new-unifi-site-name"
+              class="modal-input"
+              type="text"
+              bind:value={newSiteName}
+              placeholder="e.g. Main Office"
+              disabled={isCreating}
+            />
+          </div>
+          {#if createError}
+            <div class="modal-error">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="14"
+                height="14"
+              >
+                <circle cx="12" cy="12" r="10" /><line
+                  x1="12"
+                  y1="8"
+                  x2="12"
+                  y2="12"
+                /><line x1="12" y1="16" x2="12.01" y2="16" />
+              </svg>
+              {createError}
+            </div>
+          {/if}
+        {/if}
+      </div>
+
+      {#if step !== "choose"}
+        <div class="modal-footer">
+          <button
+            class="modal-btn modal-btn-cancel"
+            on:click={close}
+            type="button"
+            disabled={isLinking || isCreating}
+          >
+            Cancel
+          </button>
+          {#if step === "existing"}
+            <button
+              class="modal-btn modal-btn-primary"
+              on:click={linkExistingSite}
+              type="button"
+              disabled={isLinking || !selectedSiteId}
+            >
+              {isLinking ? "Linking…" : "Link Site"}
+            </button>
+          {:else if step === "new"}
+            <button
+              class="modal-btn modal-btn-primary"
+              on:click={createAndLinkSite}
+              type="button"
+              disabled={isCreating || !newSiteName.trim()}
+            >
+              {isCreating ? "Creating…" : "Create & Link"}
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  .modal-container {
+    width: 480px;
+    max-width: 90vw;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .modal-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+    flex: 1;
+  }
+
+  .modal-back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+    flex-shrink: 0;
+  }
+
+  .modal-back:hover {
+    background: var(--nav-hover-bg);
+    color: var(--text-primary);
+  }
+
+  .modal-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    background: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+    flex-shrink: 0;
+  }
+
+  .modal-close:hover {
+    background: var(--nav-hover-bg);
+    color: var(--text-primary);
+  }
+
+  .modal-body {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .modal-description {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  /* Choice cards */
+  .choice-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+
+  .choice-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 24px 16px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 10px;
+    background: var(--bg-base);
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: center;
+  }
+
+  .choice-card:hover {
+    border-color: var(--input-focus-border);
+    background: color-mix(
+      in srgb,
+      var(--input-focus-border) 5%,
+      var(--bg-base)
+    );
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  .choice-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--input-focus-border) 10%, transparent);
+    color: var(--input-focus-border);
+  }
+
+  .choice-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .choice-desc {
+    font-size: 11px;
+    color: var(--text-muted);
+    line-height: 1.4;
+  }
+
+  /* Form fields */
+  .modal-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .modal-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  .modal-input {
+    padding: 8px 12px;
+    font-size: 13px;
+    border: 1px solid var(--border-default);
+    border-radius: 6px;
+    background: var(--bg-base);
+    color: var(--text-primary);
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .modal-input:focus {
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--input-focus-border) 15%, transparent);
+  }
+
+  .modal-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .modal-error {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--status-error) 10%, transparent);
+    color: var(--status-error);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .modal-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 32px;
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+
+  .modal-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 24px;
+    color: var(--text-secondary);
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .modal-empty p {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .modal-empty-hint {
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .modal-btn {
+    padding: 7px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .modal-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .modal-btn-cancel {
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-default);
+  }
+
+  .modal-btn-cancel:hover:not(:disabled) {
+    background: var(--nav-hover-bg);
+  }
+
+  .modal-btn-primary {
+    background: var(--accent-color, #0066cc);
+    color: #fff;
+    border: none;
+  }
+
+  .modal-btn-primary:hover:not(:disabled) {
+    filter: brightness(1.12);
+  }
+
+  /* Site search bar */
+  .site-search-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    background: var(--bg-base);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    transition: border-color 0.15s;
+  }
+
+  .site-search-bar:focus-within {
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--input-focus-border) 12%, transparent);
+  }
+
+  .site-search-icon {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .site-search-bar:focus-within .site-search-icon {
+    color: var(--input-focus-border);
+  }
+
+  .site-search-input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    font-size: 13px;
+    color: var(--text-primary);
+    outline: none;
+  }
+
+  .site-search-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .site-search-input:disabled {
+    opacity: 0.6;
+  }
+
+  .site-search-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    border-radius: 4px;
+    background: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 0.15s;
+  }
+
+  .site-search-clear:hover {
+    background: var(--nav-hover-bg);
+    color: var(--text-primary);
+  }
+
+  /* Scrollable site list */
+  .site-list {
+    max-height: 280px;
+    overflow-y: auto;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--bg-base);
+  }
+
+  .site-list-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    color: var(--text-muted);
+    font-size: 13px;
+  }
+
+  .site-list-empty p {
+    margin: 0;
+  }
+
+  .site-list-group-label {
+    padding: 8px 12px 4px;
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    position: sticky;
+    top: 0;
+    background: var(--bg-base);
+    z-index: 1;
+  }
+
+  .site-list-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    border-bottom: 1px solid var(--border-subtle);
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.12s;
+    color: var(--text-primary);
+  }
+
+  .site-list-item:last-child {
+    border-bottom: none;
+  }
+
+  .site-list-item:hover:not(:disabled) {
+    background: var(--nav-hover-bg);
+  }
+
+  .site-list-item.selected {
+    background: color-mix(in srgb, var(--input-focus-border) 10%, transparent);
+  }
+
+  .site-list-item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .site-list-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--input-focus-border) 8%, transparent);
+    color: var(--input-focus-border);
+    flex-shrink: 0;
+  }
+
+  .site-list-item.selected .site-list-item-icon {
+    background: color-mix(in srgb, var(--input-focus-border) 15%, transparent);
+  }
+
+  .site-list-item-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .site-list-item-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .site-list-item-id {
+    font-size: 11px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .site-list-item-check {
+    color: var(--input-focus-border);
+    flex-shrink: 0;
+  }
+
+  /* Spinner animation */
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  :global(.spin-icon) {
+    animation: spin 1s linear infinite;
+  }
+</style>
diff --git a/src/components/NewUnifiSiteModal.svelte b/src/components/NewUnifiSiteModal.svelte
new file mode 100644
index 0000000..d2e6b0a
--- /dev/null
+++ b/src/components/NewUnifiSiteModal.svelte
@@ -0,0 +1,303 @@
+<script lang="ts">
+  import { unifi } from "$lib/optima-api/modules/unifi";
+
+  export let isOpen = false;
+  export let accessToken: string;
+  export let companyId: string;
+  export let onSuccess: () => void = () => {};
+
+  let siteName = "";
+  let isSubmitting = false;
+  let submitError = "";
+
+  function reset() {
+    siteName = "";
+    isSubmitting = false;
+    submitError = "";
+  }
+
+  function close() {
+    isOpen = false;
+    reset();
+  }
+
+  async function handleSubmit() {
+    if (!siteName.trim() || !accessToken) return;
+    isSubmitting = true;
+    submitError = "";
+    try {
+      // Create the site on the UniFi controller
+      const result = await unifi.createSite(accessToken, siteName.trim());
+      const newSiteId = result?.data?.id;
+      if (newSiteId && companyId) {
+        // Link it to this company
+        await unifi.linkSite(accessToken, newSiteId, companyId);
+      }
+      close();
+      onSuccess();
+    } catch (err) {
+      submitError =
+        err instanceof Error ? err.message : "Failed to create UniFi site";
+      console.error("Failed to create UniFi site:", err);
+    } finally {
+      isSubmitting = false;
+    }
+  }
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="modal-overlay" on:click={close}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="modal-container" on:click|stopPropagation>
+      <div class="modal-header">
+        <h3 class="modal-title">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+            <path d="M2 17l10 5 10-5" />
+            <path d="M2 12l10 5 10-5" />
+          </svg>
+          New UniFi Site
+        </h3>
+        <button
+          class="modal-close"
+          on:click={close}
+          type="button"
+          aria-label="Close"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="16"
+            height="16"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-field">
+          <label class="modal-label" for="unifi-site-name">Site Name</label>
+          <input
+            id="unifi-site-name"
+            class="modal-input"
+            type="text"
+            bind:value={siteName}
+            placeholder="e.g. Main Office"
+            disabled={isSubmitting}
+          />
+        </div>
+        {#if submitError}
+          <div class="modal-error">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"
+            >
+              <circle cx="12" cy="12" r="10" /><line
+                x1="12"
+                y1="8"
+                x2="12"
+                y2="12"
+              /><line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            {submitError}
+          </div>
+        {/if}
+      </div>
+      <div class="modal-footer">
+        <button
+          class="modal-btn modal-btn-cancel"
+          on:click={close}
+          type="button"
+          disabled={isSubmitting}
+        >
+          Cancel
+        </button>
+        <button
+          class="modal-btn modal-btn-primary"
+          on:click={handleSubmit}
+          type="button"
+          disabled={isSubmitting || !siteName.trim()}
+        >
+          {#if isSubmitting}
+            Creating…
+          {:else}
+            Create Site
+          {/if}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  .modal-container {
+    width: 420px;
+    max-width: 90vw;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .modal-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .modal-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    background: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .modal-close:hover {
+    background: var(--nav-hover-bg);
+    color: var(--text-primary);
+  }
+
+  .modal-body {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .modal-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .modal-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  .modal-input {
+    padding: 8px 12px;
+    font-size: 13px;
+    border: 1px solid var(--border-default);
+    border-radius: 6px;
+    background: var(--bg-base);
+    color: var(--text-primary);
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .modal-input:focus {
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--input-focus-border) 15%, transparent);
+  }
+
+  .modal-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .modal-error {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--status-error) 10%, transparent);
+    color: var(--status-error);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .modal-btn {
+    padding: 7px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .modal-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .modal-btn-cancel {
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-default);
+  }
+
+  .modal-btn-cancel:hover:not(:disabled) {
+    background: var(--nav-hover-bg);
+  }
+
+  .modal-btn-primary {
+    background: var(--accent-color, #0066cc);
+    color: #fff;
+    border: none;
+  }
+
+  .modal-btn-primary:hover:not(:disabled) {
+    filter: brightness(1.12);
+  }
+</style>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0d66291..ff0b6d0 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -11,6 +11,8 @@ export const optima = {
   role: (await import("./optima-api/modules/roles")).role,
   permission: (await import("./optima-api/modules/permissions")).permission,
   user,
+  users: (await import("./optima-api/modules/users")).users,
+  unifi: (await import("./optima-api/modules/unifi")).unifi,
 };
 /**
  * @TODO
diff --git a/src/lib/optima-api/modules/companies.ts b/src/lib/optima-api/modules/companies.ts
index 60604aa..8d6f14a 100644
--- a/src/lib/optima-api/modules/companies.ts
+++ b/src/lib/optima-api/modules/companies.ts
@@ -4,10 +4,16 @@ export const company = {
   async fetch(
     accessToken: string,
     id: string,
-    options?: { includeAddress?: boolean },
+    options?: {
+      includeAddress?: boolean;
+      includePrimaryContact?: boolean;
+      includeAllContacts?: boolean;
+    },
   ) {
     const params: Record<string, string> = {};
     if (options?.includeAddress) params.includeAddress = "true";
+    if (options?.includePrimaryContact) params.includePrimaryContact = "true";
+    if (options?.includeAllContacts) params.includeAllContacts = "true";
 
     const company = await api.get(`/v1/company/companies/${id}`, {
       params,
diff --git a/src/lib/optima-api/modules/credentialTypes.ts b/src/lib/optima-api/modules/credentialTypes.ts
index b43b0cd..69362b8 100644
--- a/src/lib/optima-api/modules/credentialTypes.ts
+++ b/src/lib/optima-api/modules/credentialTypes.ts
@@ -5,7 +5,8 @@ export interface CredentialTypeField {
   name: string;
   required: boolean;
   secure: boolean;
-  valueType: "plain_text" | "password" | "number" | "email" | "url";
+  valueType: string;
+  subFields?: CredentialTypeField[];
 }
 
 export interface CredentialType {
diff --git a/src/lib/optima-api/modules/credentials.ts b/src/lib/optima-api/modules/credentials.ts
index e2a610a..1e8b396 100644
--- a/src/lib/optima-api/modules/credentials.ts
+++ b/src/lib/optima-api/modules/credentials.ts
@@ -2,15 +2,20 @@ import api from "../axios";
 
 export interface CredentialField {
   id: string;
-  fieldId: string;
+  name: string;
+  secure: boolean;
+  required: boolean;
+  valueType: string;
   value: string;
 }
 
 export interface Credential {
   id: string;
   name: string;
+  notes?: string;
   typeId: string;
   companyId: string;
+  subCredentialOfId?: string;
   fields: CredentialField[];
   type?: {
     id: string;
@@ -45,6 +50,7 @@ export const credential = {
         Authorization: `Bearer ${accessToken}`,
       },
     });
+
     return response.data;
   },
 
@@ -62,7 +68,11 @@ export const credential = {
     return response.data;
   },
 
-  async update(accessToken: string, id: string, data: { name: string }) {
+  async update(
+    accessToken: string,
+    id: string,
+    data: { name?: string; notes?: string },
+  ) {
     const response = await api.patch(`/v1/credential/credentials/${id}`, data, {
       headers: {
         Authorization: `Bearer ${accessToken}`,
@@ -96,4 +106,79 @@ export const credential = {
     });
     return response.data;
   },
+
+  async fetchSecureValue(
+    accessToken: string,
+    credentialId: string,
+    fieldId: string,
+  ) {
+    const response = await api.get(
+      `/v1/credential/credentials/${credentialId}/secure-values/${fieldId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+
+    return response.data;
+  },
+
+  async fetchValueTypes(accessToken: string) {
+    const response = await api.get("/v1/credential/valuetypes", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  async fetchSubCredentials(accessToken: string, credentialId: string) {
+    const response = await api.get(
+      `/v1/credential/credentials/${credentialId}/sub-credentials`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+    return response.data;
+  },
+
+  async addSubCredential(
+    accessToken: string,
+    credentialId: string,
+    data: {
+      fieldId: string;
+      name: string;
+      fields: Array<{ fieldId: string; value: string }>;
+    },
+  ) {
+    const response = await api.post(
+      `/v1/credential/credentials/${credentialId}/sub-credentials`,
+      data,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+    return response.data;
+  },
+
+  async removeSubCredential(
+    accessToken: string,
+    credentialId: string,
+    subId: string,
+  ) {
+    const response = await api.delete(
+      `/v1/credential/credentials/${credentialId}/sub-credentials/${subId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+    return response.data;
+  },
 };
diff --git a/src/lib/optima-api/modules/unifi.ts b/src/lib/optima-api/modules/unifi.ts
new file mode 100644
index 0000000..c47bcf2
--- /dev/null
+++ b/src/lib/optima-api/modules/unifi.ts
@@ -0,0 +1,383 @@
+import api from "../axios";
+
+export interface UnifiSite {
+  id: string;
+  name: string;
+  siteId: string;
+  companyId: string | null;
+  company?: {
+    id: string;
+    name: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface UnifiSiteOverview {
+  health: Array<{
+    subsystem: string;
+    status: string;
+    numAdopted?: number;
+    numGateway?: number;
+    [key: string]: unknown;
+  }>;
+  sysInfo: {
+    timezone?: string;
+    hostname?: string;
+    version?: string;
+    [key: string]: unknown;
+  };
+  siteInfo: {
+    description?: string;
+    name?: string;
+    [key: string]: unknown;
+  };
+}
+
+export interface UnifiDevice {
+  id: string;
+  mac: string;
+  model: string;
+  name: string;
+  type: string;
+  state: string | number;
+  ip: string;
+  version: string;
+  uptime: number;
+  radios?: unknown[];
+  uplink?: unknown;
+  [key: string]: unknown;
+}
+
+export interface UnifiWifiNetwork {
+  id: string;
+  name?: string;
+  siteId?: string;
+  enabled?: boolean;
+  security?: string;
+  wpaMode?: string;
+  wpaEnc?: string;
+  wpa3Support?: boolean;
+  wpa3Transition?: boolean;
+  wpa3FastRoaming?: boolean;
+  wpa3Enhanced192?: boolean;
+  passphrase?: string;
+  passphraseAutogenerated?: boolean;
+  hideSSID?: boolean;
+  isGuest?: boolean;
+  band?: string;
+  bands?: string[];
+  networkconfId?: string;
+  usergroupId?: string;
+  apGroupIds?: string[];
+  apGroupMode?: string;
+  pmfMode?: string;
+  groupRekey?: number;
+  dtimMode?: string;
+  dtimNg?: number;
+  dtimNa?: number;
+  dtim6e?: number;
+  l2Isolation?: boolean;
+  fastRoamingEnabled?: boolean;
+  bssTransition?: boolean;
+  uapsdEnabled?: boolean;
+  iappEnabled?: boolean;
+  proxyArp?: boolean;
+  mcastenhanceEnabled?: boolean;
+  macFilterEnabled?: boolean;
+  macFilterPolicy?: string;
+  macFilterList?: string[];
+  radiusDasEnabled?: boolean;
+  radiusMacAuthEnabled?: boolean;
+  radiusMacaclFormat?: string;
+  minrateSettingPreference?: string;
+  minrateNgEnabled?: boolean;
+  minrateNgDataRateKbps?: number;
+  minrateNgAdvertisingRates?: boolean;
+  minrateNaEnabled?: boolean;
+  minrateNaDataRateKbps?: number;
+  minrateNaAdvertisingRates?: boolean;
+  settingPreference?: string;
+  no2ghzOui?: boolean;
+  privatePreSharedKeysEnabled?: boolean;
+  privatePreSharedKeys?: unknown[];
+  saeGroups?: unknown[];
+  saePsk?: unknown[];
+  schedule?: unknown[];
+  scheduleWithDuration?: unknown[];
+  bcFilterList?: unknown[];
+  externalId?: string;
+  [key: string]: unknown;
+}
+
+export interface UnifiNetwork {
+  id: string;
+  name: string;
+  purpose: string;
+  subnet: string;
+  vlanId: number | null;
+  dhcpEnabled: boolean;
+  dhcpStart: string;
+  dhcpStop: string;
+  domainName: string;
+  isNat: boolean;
+  enabled: boolean;
+}
+
+export interface UnifiWlanGroup {
+  id: string;
+  name: string;
+  siteId: string;
+  noDelete: boolean;
+  noEdit: boolean;
+  hidden: boolean;
+}
+
+export interface UnifiApGroup {
+  id: string;
+  name: string;
+  deviceMacs: string[];
+  noDelete: boolean;
+}
+
+export interface UnifiAccessPoint {
+  id: string;
+  mac: string;
+  model: string;
+  type: string;
+  name: string;
+  state: number;
+  adopted: boolean;
+  ip: string;
+  version: string;
+}
+
+export interface UnifiSpeedProfile {
+  id: string;
+  name: string;
+  siteId: string;
+  noDelete: boolean;
+  downloadLimitKbps: number;
+  uploadLimitKbps: number;
+}
+
+export interface UnifiPPSK {
+  key: string;
+  name: string;
+  mac: string | null;
+  vlanId: number | null;
+}
+
+export const unifi = {
+  /** Fetch all UniFi sites */
+  async fetchSites(accessToken: string) {
+    const response = await api.get("/v1/unifi/sites", {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Sync sites from UniFi controller */
+  async syncSites(accessToken: string) {
+    const response = await api.post(
+      "/v1/unifi/sites/sync",
+      {},
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Create a new UniFi site */
+  async createSite(accessToken: string, description: string) {
+    const response = await api.post(
+      "/v1/unifi/sites/create",
+      { description },
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Fetch a single UniFi site */
+  async fetchSite(accessToken: string, id: string) {
+    const response = await api.get(`/v1/unifi/site/${id}`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Fetch UniFi sites linked to a company */
+  async fetchCompanySites(accessToken: string, companyId: string) {
+    const response = await api.get(
+      `/v1/company/companies/${companyId}/unifi/sites`,
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Link a site to a company */
+  async linkSite(accessToken: string, siteId: string, companyId: string) {
+    const response = await api.post(
+      `/v1/unifi/site/${siteId}/link`,
+      { companyId },
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Unlink a site from its company */
+  async unlinkSite(accessToken: string, siteId: string) {
+    const response = await api.post(
+      `/v1/unifi/site/${siteId}/unlink`,
+      {},
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Get site overview (health, sysInfo, siteInfo) */
+  async fetchSiteOverview(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/overview`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Get site devices */
+  async fetchSiteDevices(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/devices`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Get site WiFi networks */
+  async fetchSiteWifi(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/wifi`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Update a WiFi network */
+  async updateWifi(
+    accessToken: string,
+    siteId: string,
+    wlanId: string,
+    data: Record<string, unknown>,
+  ) {
+    const response = await api.patch(
+      `/v1/unifi/site/${siteId}/wifi/${wlanId}`,
+      data,
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Get site networks */
+  async fetchSiteNetworks(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/networks`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Get WLAN groups */
+  async fetchWlanGroups(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/wlan-groups`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Get AP groups (collections of access points for broadcasting) */
+  async fetchApGroups(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/ap-groups`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Get access points */
+  async fetchAccessPoints(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/access-points`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Get speed profiles (user groups) */
+  async fetchSpeedProfiles(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/speed-profiles`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+
+  /** Create a speed profile */
+  async createSpeedProfile(
+    accessToken: string,
+    siteId: string,
+    data: {
+      name: string;
+      downloadLimitKbps?: number;
+      uploadLimitKbps?: number;
+    },
+  ) {
+    const response = await api.post(
+      `/v1/unifi/site/${siteId}/speed-profiles`,
+      data,
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Get private PSKs for a WLAN */
+  async fetchPPSKs(accessToken: string, siteId: string, wlanId: string) {
+    const response = await api.get(
+      `/v1/unifi/site/${siteId}/wifi/${wlanId}/ppsk`,
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Create a private PSK on a WLAN */
+  async createPPSK(
+    accessToken: string,
+    siteId: string,
+    wlanId: string,
+    data: { key: string; name: string; mac?: string; vlanId?: number },
+  ) {
+    const response = await api.post(
+      `/v1/unifi/site/${siteId}/wifi/${wlanId}/ppsk`,
+      data,
+      {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      },
+    );
+    return response.data;
+  },
+
+  /** Get WiFi limits per AP per radio */
+  async fetchWifiLimits(accessToken: string, siteId: string) {
+    const response = await api.get(`/v1/unifi/site/${siteId}/wifi-limits`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    return response.data;
+  },
+};
diff --git a/src/lib/optima-api/modules/user.ts b/src/lib/optima-api/modules/user.ts
index 0b97d08..3a5f29b 100644
--- a/src/lib/optima-api/modules/user.ts
+++ b/src/lib/optima-api/modules/user.ts
@@ -89,8 +89,8 @@ export const user = {
           } catch {}
           reject(new Error("Timed out waiting for auth callback"));
         },
-        2 * 60 * 1000,
-      ); // 2 minutes
+        5 * 60 * 1000,
+      ); // 5 minutes
 
       const handlePayload = (payload: any) => {
         try {
diff --git a/src/lib/optima-api/modules/users.ts b/src/lib/optima-api/modules/users.ts
new file mode 100644
index 0000000..0b718e6
--- /dev/null
+++ b/src/lib/optima-api/modules/users.ts
@@ -0,0 +1,126 @@
+import api from "../axios";
+import type { Role } from "./roles";
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  login: string;
+  image?: string;
+  roles: string[];
+  permissions?: string[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PermissionCheckResult {
+  permission: string;
+  hasPermission: boolean;
+}
+
+export const users = {
+  /**
+   * Fetch all users.
+   * Requires: user.read.other, user.list.other
+   */
+  async fetchAll(accessToken: string): Promise<{ data: User[] }> {
+    const response = await api.get("/v1/user/users", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  /**
+   * Fetch a specific user by their ID.
+   * Requires: user.read.other
+   */
+  async fetch(
+    accessToken: string,
+    identifier: string,
+  ): Promise<{ data: User }> {
+    const response = await api.get(`/v1/user/users/${identifier}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  /**
+   * Update a specific user's information.
+   * Requires: user.write.other
+   * Conditional: user.roles.other (if roles included), user.permissions.other (if permissions included)
+   */
+  async update(
+    accessToken: string,
+    identifier: string,
+    updates: {
+      name?: string;
+      image?: string;
+      roles?: string[];
+      permissions?: string[];
+    },
+  ): Promise<{ data: User }> {
+    const response = await api.patch(`/v1/user/users/${identifier}`, updates, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  /**
+   * Delete a specific user.
+   * Requires: user.delete.other
+   */
+  async delete(
+    accessToken: string,
+    identifier: string,
+  ): Promise<{ data: User }> {
+    const response = await api.delete(`/v1/user/users/${identifier}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  /**
+   * Fetch all roles assigned to a specific user.
+   * Requires: user.read.other, role.read
+   */
+  async fetchRoles(
+    accessToken: string,
+    identifier: string,
+  ): Promise<{ data: Role[] }> {
+    const response = await api.get(`/v1/user/users/${identifier}/roles`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  /**
+   * Check if a specific user has certain permissions.
+   * Requires: user.read.other
+   */
+  async checkPermissions(
+    accessToken: string,
+    identifier: string,
+    permissions: string[],
+  ): Promise<{ data: { results: PermissionCheckResult[] } }> {
+    const response = await api.post(
+      `/v1/user/users/${identifier}/check-permission`,
+      { permissions },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+    return response.data;
+  },
+};
diff --git a/src/routes/admin/credential-types/+page.server.ts b/src/routes/admin/credential-types/+page.server.ts
new file mode 100644
index 0000000..dfea1a5
--- /dev/null
+++ b/src/routes/admin/credential-types/+page.server.ts
@@ -0,0 +1,184 @@
+import { optima } from "$lib";
+import { handleApiError } from "$lib/optima-api/errorHandler";
+import { checkPermissions } from "$lib/permissions";
+import { fail } from "@sveltejs/kit";
+import type { Actions, PageServerLoad } from "./$types";
+import { AxiosError } from "axios";
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const accessToken = locals.session?.accessToken;
+  if (!accessToken) {
+    return { credentialTypes: [], permissions: {}, valueTypes: [] };
+  }
+
+  try {
+    const [typesResult, permissions, valueTypesResult] = await Promise.all([
+      optima.credentialType.fetchMany(accessToken),
+      checkPermissions(accessToken, [
+        "admin.credential-types.view",
+        "admin.credential-types.create",
+        "admin.credential-types.edit",
+        "admin.credential-types.delete",
+      ]),
+      optima.credential.fetchValueTypes(accessToken).catch((err) => {
+        console.error(
+          "Failed to fetch value types:",
+          err?.response?.data ?? err?.message ?? err,
+        );
+        return { data: [] };
+      }),
+    ]);
+
+    const credentialTypes = typesResult?.data ?? [];
+    const valueTypes: string[] = valueTypesResult?.data ?? [];
+
+    return {
+      credentialTypes,
+      permissions,
+      valueTypes,
+    };
+  } catch (err) {
+    handleApiError(err);
+  }
+};
+
+export const actions: Actions = {
+  createCredentialType: async ({ locals, request }) => {
+    const accessToken = locals.session?.accessToken;
+    if (!accessToken) {
+      return fail(401, { message: "Not authenticated." });
+    }
+
+    const formData = await request.formData();
+    const name = (formData.get("name") as string)?.trim();
+    const permissionScope = (formData.get("permissionScope") as string)?.trim();
+    const icon = (formData.get("icon") as string)?.trim() || undefined;
+    const fieldsJson = (formData.get("fields") as string)?.trim();
+
+    if (!name || !permissionScope) {
+      return fail(400, { message: "Name and permission scope are required." });
+    }
+
+    let fields: Array<
+      import("$lib/optima-api/modules/credentialTypes").CredentialTypeField
+    > = [];
+    if (fieldsJson) {
+      try {
+        fields = JSON.parse(fieldsJson);
+      } catch {
+        return fail(400, { message: "Invalid fields data." });
+      }
+    }
+
+    try {
+      await optima.credentialType.create(accessToken, {
+        name,
+        permissionScope,
+        icon,
+        fields,
+      });
+      return {};
+    } catch (err: unknown) {
+      console.log(
+        "Error creating credential type:",
+        (err as AxiosError<{ error?: string }>)?.response?.data?.error,
+      );
+
+      const data = (err as AxiosError)?.response?.data as
+        | Record<string, unknown>
+        | undefined;
+      const message =
+        (data?.message as string) ??
+        (err instanceof Error
+          ? err.message
+          : "Failed to create credential type.");
+      const status = (data?.status as number) ?? 500;
+      return fail(status, { message });
+    }
+  },
+
+  updateCredentialType: async ({ locals, request }) => {
+    const accessToken = locals.session?.accessToken;
+    if (!accessToken) {
+      return fail(401, { message: "Not authenticated." });
+    }
+
+    const formData = await request.formData();
+    const id = (formData.get("id") as string)?.trim();
+    const name = (formData.get("name") as string)?.trim();
+    const permissionScope = (formData.get("permissionScope") as string)?.trim();
+    const icon = (formData.get("icon") as string)?.trim() || undefined;
+    const fieldsJson = (formData.get("fields") as string)?.trim();
+
+    if (!id || !name || !permissionScope) {
+      return fail(400, { message: "Required fields are missing." });
+    }
+
+    let fields:
+      | Array<
+          Omit<
+            import("$lib/optima-api/modules/credentialTypes").CredentialTypeField,
+            "id"
+          >
+        >
+      | undefined;
+    if (fieldsJson) {
+      try {
+        fields = JSON.parse(fieldsJson);
+      } catch {
+        return fail(400, { message: "Invalid fields data." });
+      }
+    }
+
+    try {
+      await optima.credentialType.update(accessToken, id, {
+        name,
+        permissionScope,
+        icon,
+        fields: fields as any,
+      });
+      return {};
+    } catch (err: unknown) {
+      const data = (err as AxiosError)?.response?.data as
+        | Record<string, unknown>
+        | undefined;
+      const message =
+        (data?.message as string) ??
+        (err instanceof Error
+          ? err.message
+          : "Failed to update credential type.");
+      const status = (data?.status as number) ?? 500;
+      return fail(status, { message });
+    }
+  },
+
+  deleteCredentialType: async ({ locals, request }) => {
+    const accessToken = locals.session?.accessToken;
+    if (!accessToken) {
+      return fail(401, { message: "Not authenticated." });
+    }
+
+    const formData = await request.formData();
+    const id = (formData.get("id") as string)?.trim();
+
+    if (!id) {
+      return fail(400, { message: "Credential type ID is required." });
+    }
+
+    try {
+      await optima.credentialType.delete(accessToken, id);
+      return {};
+    } catch (err: unknown) {
+      const data = (err as AxiosError)?.response?.data as
+        | Record<string, unknown>
+        | undefined;
+      const message =
+        (data?.message as string) ??
+        (err instanceof Error
+          ? err.message
+          : "Failed to delete credential type.");
+      const status = (data?.status as number) ?? 500;
+      return fail(status, { message });
+    }
+  },
+};
diff --git a/src/routes/admin/credential-types/+page.svelte b/src/routes/admin/credential-types/+page.svelte
index 8406c8d..ba9fac3 100644
--- a/src/routes/admin/credential-types/+page.svelte
+++ b/src/routes/admin/credential-types/+page.svelte
@@ -1,11 +1,141 @@
 <script lang="ts">
+  import { enhance } from "$app/forms";
+  import type { SubmitFunction } from "@sveltejs/kit";
   import type { PermissionMap } from "$lib/permissions";
+  import type {
+    CredentialType,
+    CredentialTypeField,
+  } from "$lib/optima-api/modules/credentialTypes";
+  import CreateCredentialTypeModal from "../../../components/CreateCredentialTypeModal.svelte";
+  import "../../../styles/admin/credential-types.css";
 
-  export let data: { permissions: PermissionMap };
+  export let data: {
+    permissions: PermissionMap;
+    credentialTypes: CredentialType[];
+    valueTypes: string[];
+  };
 
   $: hasAccess = data.permissions["admin.credential-types.view"] === true;
+  $: canCreate = data.permissions["admin.credential-types.create"] === true;
+  $: canEdit = data.permissions["admin.credential-types.edit"] === true;
+  $: canDelete = data.permissions["admin.credential-types.delete"] === true;
+  $: credentialTypes = data.credentialTypes;
+  $: valueTypes = data.valueTypes ?? [];
+
+  // Search / filter
+  let searchQuery = "";
+  $: filteredTypes = credentialTypes.filter((ct) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      ct.name.toLowerCase().includes(q) ||
+      ct.permissionScope.toLowerCase().includes(q)
+    );
+  });
+
+  // Create / edit modal state
+  let isCreateModalOpen = false;
+  let typeToEdit: CredentialType | null = null;
+
+  function openEdit(ct: CredentialType) {
+    typeToEdit = ct;
+    isCreateModalOpen = true;
+    openMenuId = null;
+  }
+
+  // Three-dot menu
+  let openMenuId: string | null = null;
+
+  function toggleMenu(id: string) {
+    openMenuId = openMenuId === id ? null : id;
+  }
+
+  /** Position the dropdown using fixed coordinates so it escapes overflow:hidden parents */
+  function positionMenu(node: HTMLElement) {
+    const btn = node.parentElement?.querySelector(
+      ".menu-btn",
+    ) as HTMLElement | null;
+    if (!btn) return;
+
+    function update() {
+      const rect = btn!.getBoundingClientRect();
+      node.style.top = `${rect.bottom + 4}px`;
+      node.style.left = `${rect.right - node.offsetWidth}px`;
+    }
+
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+
+    return {
+      destroy() {
+        window.removeEventListener("scroll", update, true);
+        window.removeEventListener("resize", update);
+      },
+    };
+  }
+
+  // Delete confirmation
+  let typeToDelete: CredentialType | null = null;
+  let isDeleting = false;
+  let deleteError = "";
+
+  function openDeleteConfirm(ct: CredentialType) {
+    typeToDelete = ct;
+    openMenuId = null;
+  }
+
+  function cancelDelete() {
+    typeToDelete = null;
+    deleteError = "";
+  }
+
+  const handleDeleteEnhance: SubmitFunction = () => {
+    isDeleting = true;
+    deleteError = "";
+    return async ({ result, update }) => {
+      isDeleting = false;
+      if (result.type === "success") {
+        typeToDelete = null;
+      } else if (result.type === "failure") {
+        deleteError =
+          (result.data as { message?: string })?.message ??
+          "Failed to delete credential type.";
+      }
+      await update();
+    };
+  };
+
+  // Expanded row state
+  let expandedTypeId: string | null = null;
+
+  function toggleType(id: string) {
+    expandedTypeId = expandedTypeId === id ? null : id;
+  }
+
+  function formatDate(dateStr?: string): string {
+    if (!dateStr) return "";
+    try {
+      return new Date(dateStr).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+    } catch {
+      return "";
+    }
+  }
+
+  function valueTypeLabel(vt: string): string {
+    return vt
+      .split("_")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ");
+  }
 </script>
 
+<svelte:window on:click={() => (openMenuId = null)} />
+
 {#if !hasAccess}
   <div class="admin-denied">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -18,16 +148,632 @@
       administrator to request access.
     </p>
   </div>
-{:else}
+{:else if credentialTypes.length === 0}
+  <CreateCredentialTypeModal
+    isOpen={isCreateModalOpen}
+    {typeToEdit}
+    {valueTypes}
+    onClose={() => {
+      isCreateModalOpen = false;
+      typeToEdit = null;
+    }}
+    onSuccess={() => {
+      isCreateModalOpen = false;
+      typeToEdit = null;
+    }}
+  />
   <div class="admin-tab-empty">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
       <path d="M7 11V7a5 5 0 0 1 10 0v4" />
     </svg>
-    <h3>Credential Type Management</h3>
+    <h3>No Credential Types Found</h3>
     <p>
-      Credential type definitions and configuration will be wired up here.
-      Connect an API module to populate this view.
+      There are no credential types configured yet. Create your first credential
+      type to get started.
     </p>
+    {#if canCreate}
+      <button
+        type="button"
+        class="create-ct-btn"
+        on:click={() => (isCreateModalOpen = true)}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          width="14"
+          height="14"
+        >
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+        Create Credential Type
+      </button>
+    {/if}
   </div>
+{:else}
+  <CreateCredentialTypeModal
+    isOpen={isCreateModalOpen}
+    {typeToEdit}
+    {valueTypes}
+    onClose={() => {
+      isCreateModalOpen = false;
+      typeToEdit = null;
+    }}
+    onSuccess={() => {
+      isCreateModalOpen = false;
+      typeToEdit = null;
+    }}
+  />
+
+  {#if typeToDelete}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="confirm-backdrop"
+      on:click={cancelDelete}
+      on:keydown={(e) => e.key === "Escape" && cancelDelete()}
+    >
+      <div
+        class="confirm-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-title"
+        tabindex="-1"
+        on:click|stopPropagation
+        on:keydown|stopPropagation
+      >
+        <div class="confirm-icon-wrap">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.75"
+            width="22"
+            height="22"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+          </svg>
+        </div>
+        <h3 id="confirm-title" class="confirm-title">Delete Credential Type</h3>
+        <p class="confirm-body">
+          Are you sure you want to delete
+          <strong>{typeToDelete.name}</strong>?
+          {#if typeToDelete.credentialCount > 0}
+            This type has <strong>{typeToDelete.credentialCount}</strong>
+            credential{typeToDelete.credentialCount === 1 ? "" : "s"} associated
+            with it.
+          {/if}
+          This action cannot be undone.
+        </p>
+        {#if deleteError}
+          <p class="confirm-error">{deleteError}</p>
+        {/if}
+        <div class="confirm-actions">
+          <button
+            type="button"
+            class="btn-cancel"
+            on:click={cancelDelete}
+            disabled={isDeleting}
+          >
+            Cancel
+          </button>
+          <form
+            method="POST"
+            action="?/deleteCredentialType"
+            use:enhance={handleDeleteEnhance}
+          >
+            <input type="hidden" name="id" value={typeToDelete.id} />
+            <button
+              type="submit"
+              class="btn-delete-confirm"
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting…" : "Delete"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <div class="admin-table-header">
+    <h3>
+      Credential Types
+      <span class="result-count"
+        >{filteredTypes.length} type{filteredTypes.length === 1
+          ? ""
+          : "s"}{#if searchQuery.trim()}&nbsp;(filtered){/if}</span
+      >
+    </h3>
+    <div style="display:flex;align-items:center;gap:10px;">
+      <div class="ct-search-wrap">
+        <svg
+          class="ct-search-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          width="14"
+          height="14"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <input
+          type="text"
+          class="ct-search-input"
+          placeholder="Search types…"
+          bind:value={searchQuery}
+        />
+      </div>
+      {#if canCreate}
+        <button
+          type="button"
+          class="create-ct-btn"
+          on:click={() => (isCreateModalOpen = true)}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="14"
+            height="14"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Create Type
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  <div class="admin-table-wrap">
+    <table class="admin-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Permission Scope</th>
+          <th>Fields</th>
+          <th>Credentials</th>
+          <th>Created</th>
+          <th>Updated</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each filteredTypes as ct (ct.id)}
+          <tr
+            class="ct-row"
+            class:expanded={expandedTypeId === ct.id}
+            on:click={() => toggleType(ct.id)}
+          >
+            <td>
+              <div class="ct-name-cell">
+                <svg
+                  class="ct-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+                <span class="ct-name">{ct.name}</span>
+              </div>
+            </td>
+            <td>
+              <span class="ct-scope">{ct.permissionScope}</span>
+            </td>
+            <td>
+              <span class="ct-field-count">
+                {ct.fields.length} field{ct.fields.length === 1 ? "" : "s"}
+              </span>
+            </td>
+            <td>
+              <span class="ct-cred-count">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="13"
+                  height="13"
+                >
+                  <path
+                    d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"
+                  />
+                  <line x1="8" y1="12" x2="16" y2="12" />
+                </svg>
+                {ct.credentialCount} credential{ct.credentialCount === 1
+                  ? ""
+                  : "s"}
+              </span>
+            </td>
+            <td>{formatDate(ct.createdAt)}</td>
+            <td>{formatDate(ct.updatedAt)}</td>
+            <td class="row-end-cell">
+              <div class="row-end-content">
+                {#if canEdit || canDelete}
+                  <div class="menu-wrap">
+                    <button
+                      type="button"
+                      class="menu-btn"
+                      aria-label="Credential type actions"
+                      on:click|stopPropagation={() => toggleMenu(ct.id)}
+                    >
+                      <svg
+                        viewBox="0 0 16 16"
+                        fill="currentColor"
+                        width="14"
+                        height="14"
+                      >
+                        <circle cx="8" cy="2.5" r="1.5" />
+                        <circle cx="8" cy="8" r="1.5" />
+                        <circle cx="8" cy="13.5" r="1.5" />
+                      </svg>
+                    </button>
+                    {#if openMenuId === ct.id}
+                      <div class="ct-menu" use:positionMenu>
+                        {#if canEdit}
+                          <button
+                            type="button"
+                            class="ct-menu-item"
+                            on:click|stopPropagation={() => openEdit(ct)}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="13"
+                              height="13"
+                            >
+                              <path
+                                d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"
+                              />
+                              <path
+                                d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
+                              />
+                            </svg>
+                            Edit
+                          </button>
+                        {/if}
+                        {#if canEdit && canDelete}
+                          <div class="ct-menu-sep"></div>
+                        {/if}
+                        {#if canDelete}
+                          <button
+                            type="button"
+                            class="ct-menu-item ct-menu-item-danger"
+                            on:click|stopPropagation={() =>
+                              openDeleteConfirm(ct)}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="13"
+                              height="13"
+                            >
+                              <polyline points="3 6 5 6 21 6" />
+                              <path
+                                d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                              />
+                              <path d="M10 11v6M14 11v6" />
+                              <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+                            </svg>
+                            Delete
+                          </button>
+                        {/if}
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+                <svg
+                  class="row-chevron"
+                  class:open={expandedTypeId === ct.id}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="16"
+                  height="16"
+                >
+                  <path d="M6 9l6 6 6-6" />
+                </svg>
+              </div>
+            </td>
+          </tr>
+
+          {#if expandedTypeId === ct.id}
+            <tr class="ct-detail-row">
+              <td colspan="7">
+                <div class="ct-detail-content">
+                  <div class="ct-detail-grid">
+                    <!-- Info section -->
+                    <div class="ct-detail-section">
+                      <h4 class="ct-detail-heading">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="14"
+                          height="14"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <line x1="12" y1="16" x2="12" y2="12" />
+                          <line x1="12" y1="8" x2="12.01" y2="8" />
+                        </svg>
+                        Details
+                      </h4>
+                      <div class="ct-detail-fields">
+                        <div class="ct-detail-field">
+                          <span class="detail-label">ID</span>
+                          <span class="detail-value detail-mono">{ct.id}</span>
+                        </div>
+                        <div class="ct-detail-field">
+                          <span class="detail-label">Permission Scope</span>
+                          <span class="detail-value detail-mono"
+                            >{ct.permissionScope}</span
+                          >
+                        </div>
+                        {#if ct.icon}
+                          <div class="ct-detail-field">
+                            <span class="detail-label">Icon</span>
+                            <span class="detail-value">{ct.icon}</span>
+                          </div>
+                        {/if}
+                        <div class="ct-detail-field">
+                          <span class="detail-label">Credentials</span>
+                          <span class="detail-value"
+                            >{ct.credentialCount} credential{ct.credentialCount ===
+                            1
+                              ? ""
+                              : "s"}</span
+                          >
+                        </div>
+                        <div class="ct-detail-field">
+                          <span class="detail-label">Created</span>
+                          <span class="detail-value"
+                            >{formatDate(ct.createdAt)}</span
+                          >
+                        </div>
+                        <div class="ct-detail-field">
+                          <span class="detail-label">Updated</span>
+                          <span class="detail-value"
+                            >{formatDate(ct.updatedAt)}</span
+                          >
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Fields section -->
+                    <div class="ct-detail-section">
+                      <h4 class="ct-detail-heading">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="14"
+                          height="14"
+                        >
+                          <path
+                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
+                          />
+                          <rect x="9" y="3" width="6" height="4" rx="1" />
+                        </svg>
+                        Fields
+                        <span class="detail-count">{ct.fields.length}</span>
+                      </h4>
+                      {#if ct.fields.length === 0}
+                        <p class="ct-detail-empty">No fields defined</p>
+                      {:else}
+                        <div class="ct-field-list">
+                          {#each ct.fields as field (field.id)}
+                            <div class="ct-field-card">
+                              <div class="ct-field-icon">
+                                {#if field.valueType === "multi_credential"}
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="14"
+                                    height="14"
+                                  >
+                                    <rect
+                                      x="2"
+                                      y="3"
+                                      width="20"
+                                      height="6"
+                                      rx="1"
+                                    />
+                                    <rect
+                                      x="2"
+                                      y="15"
+                                      width="20"
+                                      height="6"
+                                      rx="1"
+                                    />
+                                    <path d="M12 9v6" />
+                                  </svg>
+                                {:else if field.secure}
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="14"
+                                    height="14"
+                                  >
+                                    <rect
+                                      x="3"
+                                      y="11"
+                                      width="18"
+                                      height="11"
+                                      rx="2"
+                                      ry="2"
+                                    />
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                                  </svg>
+                                {:else}
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="14"
+                                    height="14"
+                                  >
+                                    <polyline points="4 7 4 4 20 4 20 7" />
+                                    <line x1="9" y1="20" x2="15" y2="20" />
+                                    <line x1="12" y1="4" x2="12" y2="20" />
+                                  </svg>
+                                {/if}
+                              </div>
+                              <div class="ct-field-info">
+                                <span class="ct-field-name">{field.name}</span>
+                                <div class="ct-field-meta">
+                                  <span>{valueTypeLabel(field.valueType)}</span>
+                                  {#if field.required}
+                                    <span class="ct-field-badge required"
+                                      >Required</span
+                                    >
+                                  {/if}
+                                  {#if field.secure}
+                                    <span class="ct-field-badge secure"
+                                      >Secure</span
+                                    >
+                                  {/if}
+                                </div>
+                              </div>
+                            </div>
+                            {#if field.valueType === "multi_credential" && field.subFields && field.subFields.length > 0}
+                              <div class="ct-subfield-group">
+                                <div class="ct-subfield-connector"></div>
+                                <div class="ct-subfield-list">
+                                  {#each field.subFields as subField (subField.id)}
+                                    <div class="ct-field-card ct-subfield-card">
+                                      <div
+                                        class="ct-field-icon ct-subfield-icon"
+                                      >
+                                        {#if subField.secure}
+                                          <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="12"
+                                            height="12"
+                                          >
+                                            <rect
+                                              x="3"
+                                              y="11"
+                                              width="18"
+                                              height="11"
+                                              rx="2"
+                                              ry="2"
+                                            />
+                                            <path
+                                              d="M7 11V7a5 5 0 0 1 10 0v4"
+                                            />
+                                          </svg>
+                                        {:else}
+                                          <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="12"
+                                            height="12"
+                                          >
+                                            <polyline
+                                              points="4 7 4 4 20 4 20 7"
+                                            />
+                                            <line
+                                              x1="9"
+                                              y1="20"
+                                              x2="15"
+                                              y2="20"
+                                            />
+                                            <line
+                                              x1="12"
+                                              y1="4"
+                                              x2="12"
+                                              y2="20"
+                                            />
+                                          </svg>
+                                        {/if}
+                                      </div>
+                                      <div class="ct-field-info">
+                                        <span class="ct-field-name"
+                                          >{subField.name}</span
+                                        >
+                                        <div class="ct-field-meta">
+                                          <span
+                                            >{valueTypeLabel(
+                                              subField.valueType,
+                                            )}</span
+                                          >
+                                          {#if subField.required}
+                                            <span
+                                              class="ct-field-badge required"
+                                              >Required</span
+                                            >
+                                          {/if}
+                                          {#if subField.secure}
+                                            <span class="ct-field-badge secure"
+                                              >Secure</span
+                                            >
+                                          {/if}
+                                        </div>
+                                      </div>
+                                    </div>
+                                  {/each}
+                                </div>
+                              </div>
+                            {/if}
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          {/if}
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  {#if filteredTypes.length === 0 && searchQuery.trim()}
+    <div class="admin-tab-empty">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <h3>No Results</h3>
+      <p>
+        No credential types match &ldquo;{searchQuery}&rdquo;. Try a different
+        search.
+      </p>
+    </div>
+  {/if}
 {/if}
diff --git a/src/routes/admin/roles/+page.svelte b/src/routes/admin/roles/+page.svelte
index 73c3ab3..1585484 100644
--- a/src/routes/admin/roles/+page.svelte
+++ b/src/routes/admin/roles/+page.svelte
@@ -5,6 +5,7 @@
   import type { Role } from "$lib/optima-api/modules/roles";
   import type { PermissionsCategorized } from "$lib/optima-api/modules/permissions";
   import CreateRoleModal from "../../../components/CreateRoleModal.svelte";
+  import "../../../styles/admin/roles.css";
 
   interface RoleUser {
     id: string;
@@ -555,473 +556,3 @@
     </table>
   </div>
 {/if}
-
-<style>
-  /* ── Table header layout ── */
-  :global(.admin-table-header) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .create-role-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 14px;
-    background: var(--accent-color, #0066cc);
-    color: #fff;
-    border: none;
-    border-radius: 7px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: filter 0.15s;
-    flex-shrink: 0;
-  }
-
-  .create-role-btn:hover {
-    filter: brightness(1.1);
-  }
-
-  /* ── Role-specific styles ── */
-  .role-row {
-    cursor: pointer;
-  }
-
-  .role-row.expanded {
-    background: var(--card-hover-bg);
-  }
-
-  .role-title-cell {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .role-icon {
-    width: 18px;
-    height: 18px;
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .role-title {
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .role-moniker {
-    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
-    font-size: 12px;
-    color: var(--text-secondary);
-    background: var(--bg-inset);
-    padding: 2px 8px;
-    border-radius: 4px;
-  }
-
-  .role-perm-count {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-secondary);
-  }
-
-  .role-user-count {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-secondary);
-  }
-
-  .role-user-count svg {
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .row-chevron {
-    transition: transform 0.2s ease;
-    color: var(--text-muted);
-  }
-
-  .row-chevron.open {
-    transform: rotate(180deg);
-  }
-
-  /* Expanded detail row */
-  .role-detail-row td {
-    padding: 0 !important;
-    border-bottom: 1px solid var(--border-subtle);
-  }
-
-  .role-detail-content {
-    padding: 16px 24px 20px;
-    background: var(--bg-inset);
-    animation: roleDetailFadeIn 0.15s ease;
-  }
-
-  @keyframes roleDetailFadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .role-detail-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-  }
-
-  .role-detail-section {
-    margin-bottom: 0;
-  }
-
-  .detail-count {
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--text-muted);
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    padding: 1px 6px;
-    border-radius: 8px;
-    margin-left: 2px;
-  }
-
-  .user-list {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .user-card {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 10px;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    border-radius: 7px;
-  }
-
-  .user-avatar {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: var(--accent-color, #0066cc);
-    color: #fff;
-    font-size: 10.5px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    letter-spacing: 0.02em;
-  }
-
-  .user-info {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    min-width: 0;
-  }
-
-  .user-name {
-    font-size: 12.5px;
-    font-weight: 600;
-    color: var(--text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-login {
-    font-size: 11px;
-    color: var(--text-muted);
-    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .role-detail-heading {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .role-detail-empty {
-    margin: 0;
-    font-size: 13px;
-    color: var(--text-muted);
-  }
-
-  /* Permission tags */
-  .permission-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .permission-tag {
-    display: inline-block;
-    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 3px 8px;
-    border-radius: 5px;
-    background: var(--status-neutral-bg);
-    color: var(--text-secondary);
-    border: 1px solid var(--border-subtle);
-  }
-
-  /* ── Row end cell (actions + chevron) ── */
-  .row-end-cell {
-    width: 1%;
-    white-space: nowrap;
-  }
-
-  .row-end-content {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 6px;
-  }
-
-  /* ── System badge ── */
-  .system-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 2px 8px;
-    border-radius: 5px;
-    background: var(--bg-inset);
-    color: var(--text-muted);
-    border: 1px solid var(--border-subtle);
-    white-space: nowrap;
-  }
-
-  /* ── Three-dot menu ── */
-  .menu-wrap {
-    position: relative;
-  }
-
-  .menu-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    padding: 0;
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 6px;
-    cursor: pointer;
-    color: var(--text-muted);
-    transition:
-      background 0.12s,
-      border-color 0.12s,
-      color 0.12s;
-  }
-
-  .menu-btn:hover {
-    background: var(--card-hover-bg);
-    border-color: var(--border-subtle);
-    color: var(--text-primary);
-  }
-
-  .role-menu {
-    position: fixed;
-    z-index: 200;
-    min-width: 130px;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-    padding: 4px;
-    animation: menuIn 0.1s ease;
-  }
-
-  @keyframes menuIn {
-    from {
-      opacity: 0;
-      transform: translateY(-4px) scale(0.97);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  .role-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 10px;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    font-size: 13px;
-    font-weight: 400;
-    color: var(--text-primary);
-    cursor: pointer;
-    text-align: left;
-    transition: background 0.1s;
-  }
-
-  .role-menu-item:hover {
-    background: var(--card-hover-bg);
-  }
-
-  .role-menu-item svg {
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .role-menu-item-danger {
-    color: #dc2626;
-  }
-
-  .role-menu-item-danger svg {
-    color: #dc2626;
-  }
-
-  .role-menu-item-danger:hover {
-    background: rgba(220, 38, 38, 0.08);
-  }
-
-  .role-menu-sep {
-    height: 1px;
-    background: var(--border-subtle);
-    margin: 3px 4px;
-  }
-
-  /* ── Delete confirmation overlay ── */
-  .confirm-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.45);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-
-  .confirm-dialog {
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    border-radius: 12px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
-    width: 90%;
-    max-width: 380px;
-    padding: 28px 24px 22px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    animation: modalIn 0.15s ease;
-  }
-
-  .confirm-icon-wrap {
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    background: rgba(220, 38, 38, 0.1);
-    border: 1px solid rgba(220, 38, 38, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #dc2626;
-    margin-bottom: 14px;
-  }
-
-  .confirm-title {
-    margin: 0 0 8px;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .confirm-body {
-    margin: 0 0 16px;
-    font-size: 13.5px;
-    color: var(--text-secondary);
-    line-height: 1.5;
-  }
-
-  .confirm-error {
-    margin: 0 0 12px;
-    font-size: 13px;
-    color: #dc2626;
-  }
-
-  .confirm-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    justify-content: center;
-  }
-
-  .confirm-actions form {
-    display: contents;
-  }
-
-  .btn-cancel {
-    padding: 7px 16px;
-    border-radius: 7px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    background: var(--bg-inset);
-    border: 1px solid var(--border-subtle);
-    color: var(--text-secondary);
-    transition:
-      background 0.15s,
-      border-color 0.15s;
-  }
-
-  .btn-cancel:hover:not(:disabled) {
-    background: var(--card-hover-bg);
-    border-color: var(--border-default);
-    color: var(--text-primary);
-  }
-
-  .btn-cancel:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  .btn-delete-confirm {
-    padding: 7px 16px;
-    border-radius: 7px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    background: #dc2626;
-    border: 1px solid transparent;
-    color: #fff;
-    transition: filter 0.15s;
-  }
-
-  .btn-delete-confirm:hover:not(:disabled) {
-    filter: brightness(1.1);
-  }
-
-  .btn-delete-confirm:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-</style>
diff --git a/src/routes/admin/users/+page.server.ts b/src/routes/admin/users/+page.server.ts
new file mode 100644
index 0000000..b0b9a43
--- /dev/null
+++ b/src/routes/admin/users/+page.server.ts
@@ -0,0 +1,143 @@
+import { optima } from "$lib";
+import { handleApiError } from "$lib/optima-api/errorHandler";
+import { checkPermissions } from "$lib/permissions";
+import { fail } from "@sveltejs/kit";
+import type { Actions, PageServerLoad } from "./$types";
+import { AxiosError } from "axios";
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const accessToken = locals.session?.accessToken;
+  if (!accessToken) {
+    return { users: [], roles: [], permissions: {} };
+  }
+
+  try {
+    const [usersResult, rolesResult, permissions, permNodesResult] =
+      await Promise.all([
+        optima.users.fetchAll(accessToken),
+        optima.role.fetchMany(accessToken),
+        checkPermissions(accessToken, [
+          "admin.users.view",
+          "admin.users.edit",
+          "admin.users.delete",
+          "user.roles.other",
+          "user.permissions.other",
+        ]),
+        optima.permission
+          .fetchCategorized(accessToken)
+          .catch(() => ({ data: {} })),
+      ]);
+
+    const allUsers = usersResult?.data ?? [];
+    const allRoles = rolesResult?.data ?? [];
+
+    // Fetch roles for each user in parallel
+    const usersWithRoles = await Promise.all(
+      allUsers.map(async (user) => {
+        try {
+          const rolesResult = await optima.users.fetchRoles(
+            accessToken,
+            user.id,
+          );
+          return { ...user, roleDetails: rolesResult?.data ?? [] };
+        } catch {
+          return { ...user, roleDetails: [] };
+        }
+      }),
+    );
+
+    return {
+      users: usersWithRoles,
+      roles: allRoles,
+      permissions,
+      permissionNodes: permNodesResult?.data ?? {},
+    };
+  } catch (err) {
+    handleApiError(err);
+  }
+};
+
+export const actions: Actions = {
+  updateUser: async ({ locals, request }) => {
+    const accessToken = locals.session?.accessToken;
+    if (!accessToken) {
+      return fail(401, { message: "Not authenticated." });
+    }
+
+    const formData = await request.formData();
+    const id = (formData.get("id") as string)?.trim();
+    const name = (formData.get("name") as string)?.trim();
+    const image = (formData.get("image") as string)?.trim() || undefined;
+    const rolesJson = (formData.get("roles") as string)?.trim();
+    const permissionsJson = (formData.get("permissions") as string)?.trim();
+
+    if (!id || !name) {
+      return fail(400, { message: "User ID and name are required." });
+    }
+
+    const updates: {
+      name: string;
+      image?: string;
+      roles?: string[];
+      permissions?: string[];
+    } = { name, image };
+
+    if (rolesJson) {
+      try {
+        updates.roles = JSON.parse(rolesJson);
+      } catch {
+        return fail(400, { message: "Invalid roles data." });
+      }
+    }
+
+    if (permissionsJson) {
+      try {
+        updates.permissions = JSON.parse(permissionsJson);
+      } catch {
+        return fail(400, { message: "Invalid permissions data." });
+      }
+    }
+
+    try {
+      await optima.users.update(accessToken, id, updates);
+      return {};
+    } catch (err: unknown) {
+      const data = (err as AxiosError)?.response?.data as
+        | Record<string, unknown>
+        | undefined;
+      const message =
+        (data?.message as string) ??
+        (err instanceof Error ? err.message : "Failed to update user.");
+      const status = (data?.status as number) ?? 500;
+      return fail(status, { message });
+    }
+  },
+
+  deleteUser: async ({ locals, request }) => {
+    const accessToken = locals.session?.accessToken;
+    if (!accessToken) {
+      return fail(401, { message: "Not authenticated." });
+    }
+
+    const formData = await request.formData();
+    const id = (formData.get("id") as string)?.trim();
+
+    if (!id) {
+      return fail(400, { message: "User ID is required." });
+    }
+
+    try {
+      await optima.users.delete(accessToken, id);
+      return {};
+    } catch (err: unknown) {
+      const data = (err as AxiosError)?.response?.data as
+        | Record<string, unknown>
+        | undefined;
+      const message =
+        (data?.message as string) ??
+        (err instanceof Error ? err.message : "Failed to delete user.");
+      const status = (data?.status as number) ?? 500;
+      return fail(status, { message });
+    }
+  },
+};
diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte
index 52bea7d..a86b1b3 100644
--- a/src/routes/admin/users/+page.svelte
+++ b/src/routes/admin/users/+page.svelte
@@ -1,11 +1,148 @@
 <script lang="ts">
+  import { enhance } from "$app/forms";
+  import type { SubmitFunction } from "@sveltejs/kit";
   import type { PermissionMap } from "$lib/permissions";
+  import type { User } from "$lib/optima-api/modules/users";
+  import type { Role } from "$lib/optima-api/modules/roles";
+  import type { PermissionsCategorized } from "$lib/optima-api/modules/permissions";
+  import EditUserModal from "../../../components/EditUserModal.svelte";
+  import "../../../styles/admin/users.css";
 
-  export let data: { permissions: PermissionMap };
+  type UserWithRoles = User & { roleDetails: Role[] };
+
+  export let data: {
+    permissions: PermissionMap;
+    users: UserWithRoles[];
+    roles: Role[];
+    permissionNodes: PermissionsCategorized;
+  };
 
   $: hasAccess = data.permissions["admin.users.view"] === true;
+  $: canEdit = data.permissions["admin.users.edit"] === true;
+  $: canDelete = data.permissions["admin.users.delete"] === true;
+  $: canEditRoles = data.permissions["user.roles.other"] === true;
+  $: canEditPermissions = data.permissions["user.permissions.other"] === true;
+  $: users = data.users;
+  $: allRoles = data.roles;
+
+  // Search / filter
+  let searchQuery = "";
+  $: filteredUsers = users.filter((u) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      u.name.toLowerCase().includes(q) ||
+      u.email.toLowerCase().includes(q) ||
+      u.login.toLowerCase().includes(q)
+    );
+  });
+
+  // Expanded row state
+  let expandedUserId: string | null = null;
+
+  function toggleUser(id: string) {
+    expandedUserId = expandedUserId === id ? null : id;
+  }
+
+  // Three-dot menu
+  let openMenuId: string | null = null;
+
+  function toggleMenu(id: string) {
+    openMenuId = openMenuId === id ? null : id;
+  }
+
+  function positionMenu(node: HTMLElement) {
+    const btn = node.parentElement?.querySelector(
+      ".menu-btn",
+    ) as HTMLElement | null;
+    if (!btn) return;
+
+    function update() {
+      const rect = btn!.getBoundingClientRect();
+      node.style.top = `${rect.bottom + 4}px`;
+      node.style.left = `${rect.right - node.offsetWidth}px`;
+    }
+
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+
+    return {
+      destroy() {
+        window.removeEventListener("scroll", update, true);
+        window.removeEventListener("resize", update);
+      },
+    };
+  }
+
+  // Edit modal state
+  let editingUser: UserWithRoles | null = null;
+
+  function openEdit(u: UserWithRoles) {
+    editingUser = u;
+    openMenuId = null;
+  }
+
+  function cancelEdit() {
+    editingUser = null;
+  }
+
+  // Delete confirmation
+  let userToDelete: UserWithRoles | null = null;
+  let isDeleting = false;
+  let deleteError = "";
+
+  function openDeleteConfirm(u: UserWithRoles) {
+    userToDelete = u;
+    openMenuId = null;
+  }
+
+  function cancelDelete() {
+    userToDelete = null;
+    deleteError = "";
+  }
+
+  const handleDeleteEnhance: SubmitFunction = () => {
+    isDeleting = true;
+    deleteError = "";
+    return async ({ result, update }) => {
+      isDeleting = false;
+      if (result.type === "success") {
+        userToDelete = null;
+      } else if (result.type === "failure") {
+        deleteError =
+          (result.data as { message?: string })?.message ??
+          "Failed to delete user.";
+      }
+      await update();
+    };
+  };
+
+  function initials(name: string): string {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase();
+  }
+
+  function formatDate(dateStr?: string): string {
+    if (!dateStr) return "";
+    try {
+      return new Date(dateStr).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+    } catch {
+      return "";
+    }
+  }
 </script>
 
+<svelte:window on:click={() => (openMenuId = null)} />
+
 {#if !hasAccess}
   <div class="admin-denied">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -18,7 +155,7 @@
       request access.
     </p>
   </div>
-{:else}
+{:else if users.length === 0}
   <div class="admin-tab-empty">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
@@ -26,10 +163,441 @@
       <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
       <path d="M16 3.13a4 4 0 0 1 0 7.75" />
     </svg>
-    <h3>User Management</h3>
-    <p>
-      User listing and editing will be wired up here. Connect an API module to
-      populate this view.
-    </p>
+    <h3>No Users Found</h3>
+    <p>There are no users in the system yet.</p>
   </div>
+{:else}
+  <!-- Edit user modal -->
+  {#if editingUser}
+    <EditUserModal
+      user={editingUser}
+      {allRoles}
+      permissionNodes={data.permissionNodes}
+      {canEditRoles}
+      {canEditPermissions}
+      onClose={cancelEdit}
+      onSuccess={cancelEdit}
+    />
+  {/if}
+
+  <!-- Delete confirmation modal -->
+  {#if userToDelete}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="confirm-backdrop"
+      on:click={cancelDelete}
+      on:keydown={(e) => e.key === "Escape" && cancelDelete()}
+    >
+      <div
+        class="confirm-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-title"
+        tabindex="-1"
+        on:click|stopPropagation
+        on:keydown|stopPropagation
+      >
+        <div class="confirm-icon-wrap">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.75"
+            width="22"
+            height="22"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+          </svg>
+        </div>
+        <h3 id="confirm-title" class="confirm-title">Delete User</h3>
+        <p class="confirm-body">
+          Are you sure you want to delete
+          <strong>{userToDelete.name}</strong>? This action cannot be undone.
+        </p>
+        {#if deleteError}
+          <p class="confirm-error">{deleteError}</p>
+        {/if}
+        <div class="confirm-actions">
+          <button
+            type="button"
+            class="btn-cancel"
+            on:click={cancelDelete}
+            disabled={isDeleting}
+          >
+            Cancel
+          </button>
+          <form
+            method="POST"
+            action="?/deleteUser"
+            use:enhance={handleDeleteEnhance}
+          >
+            <input type="hidden" name="id" value={userToDelete.id} />
+            <button
+              type="submit"
+              class="btn-delete-confirm"
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting…" : "Delete User"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <div class="admin-table-header">
+    <h3>
+      Users
+      <span class="result-count"
+        >{filteredUsers.length} user{filteredUsers.length === 1
+          ? ""
+          : "s"}{#if searchQuery.trim()}
+          &nbsp;(filtered){/if}</span
+      >
+    </h3>
+    <div class="user-search-wrap">
+      <svg
+        class="user-search-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        width="14"
+        height="14"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <input
+        type="text"
+        class="user-search-input"
+        placeholder="Search users…"
+        bind:value={searchQuery}
+      />
+    </div>
+  </div>
+
+  <div class="admin-table-wrap">
+    <table class="admin-table">
+      <thead>
+        <tr>
+          <th>User</th>
+          <th>Email</th>
+          <th>Login</th>
+          <th>Roles</th>
+          <th>Created</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each filteredUsers as user (user.id)}
+          <tr
+            class="user-row"
+            class:expanded={expandedUserId === user.id}
+            on:click={() => toggleUser(user.id)}
+          >
+            <td>
+              <div class="user-name-cell">
+                {#if user.image}
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    class="user-table-avatar"
+                  />
+                {:else}
+                  <div class="user-table-avatar user-table-avatar-initials">
+                    {initials(user.name)}
+                  </div>
+                {/if}
+                <span class="user-table-name">{user.name}</span>
+              </div>
+            </td>
+            <td>
+              <span class="user-email">{user.email}</span>
+            </td>
+            <td>
+              <span class="user-login-mono">{user.login}</span>
+            </td>
+            <td>
+              <span class="user-role-count">
+                {user.roleDetails.length} role{user.roleDetails.length === 1
+                  ? ""
+                  : "s"}
+              </span>
+            </td>
+            <td>{formatDate(user.createdAt)}</td>
+            <td class="row-end-cell">
+              <div class="row-end-content">
+                {#if canEdit || canDelete}
+                  <div class="menu-wrap">
+                    <button
+                      type="button"
+                      class="menu-btn"
+                      aria-label="User actions"
+                      on:click|stopPropagation={() => toggleMenu(user.id)}
+                    >
+                      <svg
+                        viewBox="0 0 16 16"
+                        fill="currentColor"
+                        width="14"
+                        height="14"
+                      >
+                        <circle cx="8" cy="2.5" r="1.5" />
+                        <circle cx="8" cy="8" r="1.5" />
+                        <circle cx="8" cy="13.5" r="1.5" />
+                      </svg>
+                    </button>
+                    {#if openMenuId === user.id}
+                      <div class="user-menu" use:positionMenu>
+                        {#if canEdit}
+                          <button
+                            type="button"
+                            class="user-menu-item"
+                            on:click|stopPropagation={() => openEdit(user)}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="13"
+                              height="13"
+                            >
+                              <path
+                                d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"
+                              />
+                              <path
+                                d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
+                              />
+                            </svg>
+                            Edit
+                          </button>
+                        {/if}
+                        {#if canEdit && canDelete}
+                          <div class="user-menu-sep"></div>
+                        {/if}
+                        {#if canDelete}
+                          <button
+                            type="button"
+                            class="user-menu-item user-menu-item-danger"
+                            on:click|stopPropagation={() =>
+                              openDeleteConfirm(user)}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="13"
+                              height="13"
+                            >
+                              <polyline points="3 6 5 6 21 6" />
+                              <path
+                                d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                              />
+                              <path d="M10 11v6M14 11v6" />
+                              <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+                            </svg>
+                            Delete
+                          </button>
+                        {/if}
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+                <svg
+                  class="row-chevron"
+                  class:open={expandedUserId === user.id}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="16"
+                  height="16"
+                >
+                  <path d="M6 9l6 6 6-6" />
+                </svg>
+              </div>
+            </td>
+          </tr>
+
+          {#if expandedUserId === user.id}
+            <tr class="user-detail-row">
+              <td colspan="6">
+                <div class="user-detail-content">
+                  <div class="user-detail-grid">
+                    <!-- User info section -->
+                    <div class="user-detail-section">
+                      <h4 class="user-detail-heading">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="14"
+                          height="14"
+                        >
+                          <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                          <circle cx="12" cy="7" r="4" />
+                        </svg>
+                        Details
+                      </h4>
+                      <div class="user-detail-fields">
+                        <div class="user-detail-field">
+                          <span class="detail-label">ID</span>
+                          <span class="detail-value detail-mono">{user.id}</span
+                          >
+                        </div>
+                        <div class="user-detail-field">
+                          <span class="detail-label">Email</span>
+                          <span class="detail-value">{user.email}</span>
+                        </div>
+                        <div class="user-detail-field">
+                          <span class="detail-label">Login</span>
+                          <span class="detail-value detail-mono"
+                            >{user.login}</span
+                          >
+                        </div>
+                        <div class="user-detail-field">
+                          <span class="detail-label">Created</span>
+                          <span class="detail-value"
+                            >{formatDate(user.createdAt)}</span
+                          >
+                        </div>
+                        <div class="user-detail-field">
+                          <span class="detail-label">Updated</span>
+                          <span class="detail-value"
+                            >{formatDate(user.updatedAt)}</span
+                          >
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Roles section -->
+                    <div class="user-detail-section">
+                      <h4 class="user-detail-heading">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="14"
+                          height="14"
+                        >
+                          <path
+                            d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+                          />
+                        </svg>
+                        Roles
+                        <span class="detail-count"
+                          >{user.roleDetails.length}</span
+                        >
+                      </h4>
+                      {#if user.roleDetails.length === 0}
+                        <p class="user-detail-empty">No roles assigned</p>
+                      {:else}
+                        <div class="user-role-list">
+                          {#each user.roleDetails as role (role.id)}
+                            <div class="user-role-card">
+                              <div class="user-role-card-header">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="14"
+                                  height="14"
+                                >
+                                  <path
+                                    d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+                                  />
+                                </svg>
+                                <span class="user-role-title">{role.title}</span
+                                >
+                                <span class="user-role-moniker"
+                                  >{role.moniker}</span
+                                >
+                              </div>
+                              {#if role.permissions.length > 0}
+                                <div class="permission-tags">
+                                  {#each role.permissions.slice(0, 8) as perm}
+                                    <span class="permission-tag">{perm}</span>
+                                  {/each}
+                                  {#if role.permissions.length > 8}
+                                    <span
+                                      class="permission-tag permission-tag-more"
+                                      >+{role.permissions.length - 8} more</span
+                                    >
+                                  {/if}
+                                </div>
+                              {/if}
+                            </div>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+
+                    <!-- Additional Permissions section -->
+                    <div class="user-detail-section">
+                      <h4 class="user-detail-heading">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="14"
+                          height="14"
+                        >
+                          <path d="M9 12l2 2 4-4" />
+                          <path
+                            d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
+                          />
+                        </svg>
+                        Additional Permissions
+                        {#if user.permissions?.length}
+                          <span class="detail-count"
+                            >{user.permissions.length}</span
+                          >
+                        {/if}
+                      </h4>
+                      {#if !user.permissions?.length}
+                        <p class="user-detail-empty">
+                          No additional permissions assigned
+                        </p>
+                      {:else}
+                        <div class="permission-tags">
+                          {#each user.permissions as perm}
+                            <span class="permission-tag">{perm}</span>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          {/if}
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  {#if filteredUsers.length === 0 && searchQuery.trim()}
+    <div class="admin-tab-empty">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <h3>No Results</h3>
+      <p>No users match &ldquo;{searchQuery}&rdquo;. Try a different search.</p>
+    </div>
+  {/if}
 {/if}
diff --git a/src/routes/companies/+page.server.ts b/src/routes/companies/+page.server.ts
index 5655ca0..e06aed4 100644
--- a/src/routes/companies/+page.server.ts
+++ b/src/routes/companies/+page.server.ts
@@ -1,5 +1,6 @@
 import { optima } from "$lib";
 import { handleApiError } from "$lib/optima-api/errorHandler";
+import { checkPermissions } from "$lib/permissions";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ locals, url }) => {
@@ -11,6 +12,7 @@ export const load: PageServerLoad = async ({ locals, url }) => {
       currentPage: 1,
       totalRecords: 0,
       search: "",
+      permissions: {},
     };
   }
 
@@ -18,7 +20,21 @@ export const load: PageServerLoad = async ({ locals, url }) => {
   const search = url.searchParams.get("search") || "";
 
   try {
-    const result = await optima.company.fetchMany(accessToken, page, search);
+    const [result, permissions] = await Promise.all([
+      optima.company.fetchMany(accessToken, page, search).catch((err) => {
+        console.error(
+          "Failed to fetch companies:",
+          err?.response?.data ?? err?.message ?? err,
+        );
+        return {
+          data: [],
+          meta: {
+            pagination: { totalPages: 1, currentPage: 1, totalRecords: 0 },
+          },
+        };
+      }),
+      checkPermissions(accessToken, ["companies.view"]),
+    ]);
 
     return {
       companies: result?.data ?? [],
@@ -27,6 +43,7 @@ export const load: PageServerLoad = async ({ locals, url }) => {
       totalRecords:
         result?.meta?.pagination?.totalRecords ?? result?.data?.length ?? 0,
       search,
+      permissions,
     };
   } catch (err) {
     handleApiError(err);
diff --git a/src/routes/companies/+page.svelte b/src/routes/companies/+page.svelte
index acfa5bf..316f52c 100644
--- a/src/routes/companies/+page.svelte
+++ b/src/routes/companies/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { afterNavigate } from "$app/navigation";
+  import type { PermissionMap } from "$lib/permissions";
   import NoResultsMonkey from "../../components/NoResultsMonkey.svelte";
   import "../../styles/companies/companylist.css";
 
   export let data: {
+    permissions: PermissionMap;
     companies: Array<{
       id: string;
       name: string;
@@ -21,6 +23,8 @@
     search: string;
   };
 
+  $: hasAccess = data.permissions["companies.view"] === true;
+
   let searchInput = data.search;
   let debounceTimer: ReturnType<typeof setTimeout>;
   let isSearching = false;
@@ -134,229 +138,284 @@
   <title>Companies — Project Optima</title>
 </svelte:head>
 
-<div class="companies-page">
-  <div class="companies-pane">
-    <!-- Pane header -->
-    <div class="pane-header">
-      <div class="pane-header-left">
-        <h2 class="page-title">Companies</h2>
-        {#if totalRecords > 0}
-          <span class="result-count"
-            >{totalRecords} record{totalRecords === 1 ? "" : "s"}</span
-          >
-        {/if}
-      </div>
-      <div class="search-bar">
-        <svg
-          class="search-icon"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="M21 21l-4.35-4.35" />
-        </svg>
-        <input
-          type="text"
-          placeholder="Search companies…"
-          bind:this={searchInputEl}
-          bind:value={searchInput}
-          on:input={handleSearch}
-          on:keydown={handleKeydown}
-        />
-        {#if searchInput}
-          <button
-            class="search-clear"
-            on:click={() => {
-              searchInput = "";
-              handleSearch();
-            }}
-            aria-label="Clear search"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              width="14"
-              height="14"
+{#if !hasAccess}
+  <div class="access-denied">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+    </svg>
+    <h3>Access Denied</h3>
+    <p>
+      You don't have permission to view Companies. Contact your administrator to
+      request access.
+    </p>
+  </div>
+{:else}
+  <div class="companies-page">
+    <div class="companies-pane">
+      <!-- Pane header -->
+      <div class="pane-header">
+        <div class="pane-header-left">
+          <h2 class="page-title">Companies</h2>
+          {#if totalRecords > 0}
+            <span class="result-count"
+              >{totalRecords} record{totalRecords === 1 ? "" : "s"}</span
             >
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Pane body -->
-    <div class="pane-body">
-      {#if isSearching}
-        <div class="search-loading-overlay">
-          <div class="search-spinner"></div>
+          {/if}
         </div>
-      {/if}
-      {#if companies.length === 0}
-        <div class="empty-state">
-          <NoResultsMonkey
-            message={searchInput
-              ? "No companies match your search"
-              : "No companies found"}
+        <div class="search-bar">
+          <svg
+            class="search-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="M21 21l-4.35-4.35" />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search companies…"
+            bind:this={searchInputEl}
+            bind:value={searchInput}
+            on:input={handleSearch}
+            on:keydown={handleKeydown}
           />
-        </div>
-      {:else}
-        <div class="card-grid">
-          {#each companies as company (company.id)}
+          {#if searchInput}
             <button
-              class="company-card"
-              on:click={() => goto(`/companies/${company.id}`)}
-              on:keydown={(e) => {
-                if (e.key === "Enter") goto(`/companies/${company.id}`);
+              class="search-clear"
+              on:click={() => {
+                searchInput = "";
+                handleSearch();
               }}
+              aria-label="Clear search"
             >
-              <!-- Card header: avatar + status -->
-              <div class="card-top">
-                <div class="card-avatar">
-                  <span class="avatar-initials"
-                    >{companyInitials(company.name)}</span
-                  >
-                </div>
-                <span
-                  class="status-dot {statusClass(company.status)}"
-                  title={company.status || "Unknown"}
-                ></span>
-              </div>
-
-              <!-- Card body -->
-              <div class="card-body">
-                <h3 class="card-name">{company.name}</h3>
-                {#if company.contactEmail}
-                  <span class="card-email">{company.contactEmail}</span>
-                {/if}
-              </div>
-
-              <!-- Card meta -->
-              <div class="card-meta">
-                {#if company.type}
-                  <div class="meta-item">
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      class="meta-icon"
-                    >
-                      <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
-                      <path d="M16 3h-8l-2 4h12z" />
-                    </svg>
-                    <span>{company.type}</span>
-                  </div>
-                {/if}
-                {#if company.identifier || company.id}
-                  <div class="meta-item">
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      class="meta-icon"
-                    >
-                      <path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18" />
-                    </svg>
-                    <span class="mono"
-                      >{company.identifier || company.id?.slice(0, 8)}</span
-                    >
-                  </div>
-                {/if}
-              </div>
-
-              <!-- Card footer -->
-              <div class="card-footer">
-                {#if company.status}
-                  <span class="status-label {statusClass(company.status)}"
-                    >{company.status}</span
-                  >
-                {/if}
-                {#if formatDate(company.createdAt)}
-                  <span class="card-date">{formatDate(company.createdAt)}</span>
-                {/if}
-              </div>
-
-              <!-- Hover arrow -->
               <svg
-                class="card-arrow"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
+                width="14"
+                height="14"
               >
-                <path d="M5 12h14M12 5l7 7-7 7" />
+                <path d="M18 6L6 18M6 6l12 12" />
               </svg>
             </button>
-          {/each}
+          {/if}
+        </div>
+      </div>
+
+      <!-- Pane body -->
+      <div class="pane-body">
+        {#if isSearching}
+          <div class="search-loading-overlay">
+            <div class="search-spinner"></div>
+          </div>
+        {/if}
+        {#if companies.length === 0}
+          <div class="empty-state">
+            <NoResultsMonkey
+              message={searchInput
+                ? "No companies match your search"
+                : "No companies found"}
+            />
+          </div>
+        {:else}
+          <div class="card-grid">
+            {#each companies as company (company.id)}
+              <button
+                class="company-card"
+                on:click={() => goto(`/companies/${company.id}`)}
+                on:keydown={(e) => {
+                  if (e.key === "Enter") goto(`/companies/${company.id}`);
+                }}
+              >
+                <!-- Card header: avatar + status -->
+                <div class="card-top">
+                  <div class="card-avatar">
+                    <span class="avatar-initials"
+                      >{companyInitials(company.name)}</span
+                    >
+                  </div>
+                  <span
+                    class="status-dot {statusClass(company.status)}"
+                    title={company.status || "Unknown"}
+                  ></span>
+                </div>
+
+                <!-- Card body -->
+                <div class="card-body">
+                  <h3 class="card-name">{company.name}</h3>
+                  {#if company.contactEmail}
+                    <span class="card-email">{company.contactEmail}</span>
+                  {/if}
+                </div>
+
+                <!-- Card meta -->
+                <div class="card-meta">
+                  {#if company.type}
+                    <div class="meta-item">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        class="meta-icon"
+                      >
+                        <rect
+                          x="2"
+                          y="7"
+                          width="20"
+                          height="14"
+                          rx="2"
+                          ry="2"
+                        />
+                        <path d="M16 3h-8l-2 4h12z" />
+                      </svg>
+                      <span>{company.type}</span>
+                    </div>
+                  {/if}
+                  {#if company.identifier || company.id}
+                    <div class="meta-item">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        class="meta-icon"
+                      >
+                        <path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18" />
+                      </svg>
+                      <span class="mono"
+                        >{company.identifier || company.id?.slice(0, 8)}</span
+                      >
+                    </div>
+                  {/if}
+                </div>
+
+                <!-- Card footer -->
+                <div class="card-footer">
+                  {#if company.status}
+                    <span class="status-label {statusClass(company.status)}"
+                      >{company.status}</span
+                    >
+                  {/if}
+                  {#if formatDate(company.createdAt)}
+                    <span class="card-date"
+                      >{formatDate(company.createdAt)}</span
+                    >
+                  {/if}
+                </div>
+
+                <!-- Hover arrow -->
+                <svg
+                  class="card-arrow"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <!-- Pane footer / Pagination -->
+      {#if totalPages > 1}
+        <div class="pane-footer">
+          <span class="page-info">
+            Page {currentPage} of {totalPages}
+          </span>
+          <nav class="pagination" aria-label="Pagination">
+            <button
+              class="page-btn"
+              disabled={currentPage <= 1}
+              on:click={() => navigateToPage(currentPage - 1)}
+              aria-label="Previous page"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="16"
+                height="16"
+              >
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+
+            {#each pageNumbers as p}
+              {#if p === "..."}
+                <span class="page-ellipsis">…</span>
+              {:else}
+                <button
+                  class="page-btn"
+                  class:active={p === currentPage}
+                  on:click={() => navigateToPage(p)}
+                  aria-current={p === currentPage ? "page" : undefined}
+                >
+                  {p}
+                </button>
+              {/if}
+            {/each}
+
+            <button
+              class="page-btn"
+              disabled={currentPage >= totalPages}
+              on:click={() => navigateToPage(currentPage + 1)}
+              aria-label="Next page"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="16"
+                height="16"
+              >
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </button>
+          </nav>
         </div>
       {/if}
     </div>
-
-    <!-- Pane footer / Pagination -->
-    {#if totalPages > 1}
-      <div class="pane-footer">
-        <span class="page-info">
-          Page {currentPage} of {totalPages}
-        </span>
-        <nav class="pagination" aria-label="Pagination">
-          <button
-            class="page-btn"
-            disabled={currentPage <= 1}
-            on:click={() => navigateToPage(currentPage - 1)}
-            aria-label="Previous page"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              width="16"
-              height="16"
-            >
-              <path d="M15 18l-6-6 6-6" />
-            </svg>
-          </button>
-
-          {#each pageNumbers as p}
-            {#if p === "..."}
-              <span class="page-ellipsis">…</span>
-            {:else}
-              <button
-                class="page-btn"
-                class:active={p === currentPage}
-                on:click={() => navigateToPage(p)}
-                aria-current={p === currentPage ? "page" : undefined}
-              >
-                {p}
-              </button>
-            {/if}
-          {/each}
-
-          <button
-            class="page-btn"
-            disabled={currentPage >= totalPages}
-            on:click={() => navigateToPage(currentPage + 1)}
-            aria-label="Next page"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              width="16"
-              height="16"
-            >
-              <path d="M9 18l6-6-6-6" />
-            </svg>
-          </button>
-        </nav>
-      </div>
-    {/if}
   </div>
-</div>
+{/if}
+
+<style>
+  .access-denied {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+  }
+
+  .access-denied svg {
+    width: 40px;
+    height: 40px;
+    color: var(--status-inactive-color);
+  }
+
+  .access-denied h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .access-denied p {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: 13px;
+    text-align: center;
+    max-width: 360px;
+  }
+</style>
diff --git a/src/routes/companies/[id]/+page.server.ts b/src/routes/companies/[id]/+page.server.ts
index 57c1e28..5b830c5 100644
--- a/src/routes/companies/[id]/+page.server.ts
+++ b/src/routes/companies/[id]/+page.server.ts
@@ -9,6 +9,10 @@ export const load: PageServerLoad = async ({ locals, params }) => {
     return {
       company: null,
       configurations: [],
+      credentials: [],
+      credentialTypes: [],
+      unifiSites: [],
+      accessToken: null,
       permissions: {} as PermissionMap,
     };
   }
@@ -16,19 +20,45 @@ export const load: PageServerLoad = async ({ locals, params }) => {
   try {
     // Run permission checks in parallel with other data fetches.
     // Add any new permissions the company page needs to this array.
-    const [permissions, configsResult] = await Promise.all([
-      checkPermissions(accessToken, ["company.fetch.address"]),
+    const [
+      permissions,
+      configsResult,
+      credentialsResult,
+      credentialTypesResult,
+      unifiSitesResult,
+    ] = await Promise.all([
+      checkPermissions(accessToken, [
+        "company.fetch.address",
+        "company.fetch.contacts",
+        "credential.secure_values.read",
+        "unifi.site.wifi",
+        "unifi.site.wifi.read.name",
+        "unifi.site.wifi.update",
+      ]),
       optima.company.fetchConfigurations(accessToken, params.id),
+      optima.credential
+        .fetchByCompany(accessToken, params.id)
+        .catch(() => ({ data: [] })),
+      optima.credentialType.fetchMany(accessToken).catch(() => ({ data: [] })),
+      optima.unifi
+        .fetchCompanySites(accessToken, params.id)
+        .catch(() => ({ data: [] })),
     ]);
 
     // Fetch company with or without address based on permission
     const companyResult = await optima.company.fetch(accessToken, params.id, {
       includeAddress: permissions["company.fetch.address"] === true,
+      includePrimaryContact: true,
+      includeAllContacts: permissions["company.fetch.contacts"] === true,
     });
 
     return {
       company: companyResult?.data ?? null,
       configurations: configsResult?.data ?? [],
+      credentials: credentialsResult?.data ?? [],
+      credentialTypes: credentialTypesResult?.data ?? [],
+      unifiSites: unifiSitesResult?.data ?? [],
+      accessToken,
       permissions,
     };
   } catch (err) {
diff --git a/src/routes/companies/[id]/+page.svelte b/src/routes/companies/[id]/+page.svelte
index a750aa6..172c555 100644
--- a/src/routes/companies/[id]/+page.svelte
+++ b/src/routes/companies/[id]/+page.svelte
@@ -1,168 +1,65 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import "../../../styles/companies/companydetail.css";
+  import { onMount } from "svelte";
+  import type { PageData } from "./types";
 
-  import type { PermissionMap } from "$lib/permissions";
+  // Tab components
+  import CompanySidebar from "./components/CompanySidebar.svelte";
+  import OverviewTab from "./components/OverviewTab.svelte";
+  import CredentialsTab from "./components/CredentialsTab.svelte";
+  import ConfigurationsTab from "./components/ConfigurationsTab.svelte";
+  import ContactsTab from "./components/ContactsTab.svelte";
+  import UniFiTab from "./components/UniFiTab.svelte";
+  import ActivityTab from "./components/ActivityTab.svelte";
 
-  export let data: {
-    company: {
-      id: string;
-      name: string;
-      status?: string;
-      type?: string;
-      createdAt?: string;
-      updatedAt?: string;
-      identifier?: string;
-      contactEmail?: string;
-      contactPhone?: string;
-      address?: string;
-      city?: string;
-      state?: string;
-      zip?: string;
-      country?: string;
-      cw_Data?: {
-        address?: {
-          line1?: string;
-          line2?: string | null;
-          city?: string;
-          state?: string;
-          zip?: string;
-          country?: string;
-        };
-        [key: string]: unknown;
-      };
-      [key: string]: unknown;
-    } | null;
-    configurations: Array<{
-      id: string | number;
-      name: string;
-      active?: boolean;
-      serialNumber?: string;
-      status?: {
-        id: number;
-        name: string;
-      };
-      type?: {
-        id: number;
-        name: string;
-        _info?: { type_href?: string };
-      };
-      notes?: string;
-      questions?: Array<{
-        id: number;
-        question: string;
-        answer?: string;
-        fieldType: string;
-      }> | null;
-      info?: {
-        lastUpdated?: string;
-        updatedBy?: string;
-        dateEntered?: string;
-        enteredBy?: string;
-      };
-      key?: string;
-      value?: string;
-      description?: string;
-      createdAt?: string;
-      updatedAt?: string;
-      [key: string]: unknown;
-    }>;
-    permissions: PermissionMap;
-  };
+  export let data: PageData;
 
   $: company = data.company;
   $: configurations = data.configurations;
+  $: credentials = data.credentials;
+  $: credentialTypes = data.credentialTypes;
+  $: unifiSites = data.unifiSites;
+  $: accessToken = data.accessToken;
   $: permissions = data.permissions;
 
-  const tabs = ["Credentials", "Configurations", "Users", "Activity"] as const;
+  // Mobile detection
+  let isMobile = false;
+  function checkMobile() {
+    isMobile = typeof window !== "undefined" && window.innerWidth <= 768;
+  }
+  onMount(() => {
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  });
+
+  // Create credential modal state (bound to CredentialsTab)
+  let isCreateCredentialOpen = false;
+  // Link UniFi site modal state (bound to UniFiTab)
+  let isLinkUnifiOpen = false;
+
+  // Tab navigation
+  const tabs = [
+    "Overview",
+    "Credentials",
+    "Configurations",
+    "UniFi",
+    "Contacts",
+    "Activity",
+  ] as const;
   type Tab = (typeof tabs)[number];
-  let activeTab: Tab = "Credentials";
+  let activeTab: Tab = "Overview";
 
-  // Configurations split-view state
-  let selectedConfig: (typeof configurations)[number] | null = null;
-  let configFadeKey = 0;
+  // Mobile nav state: null = show vertical nav menu; set = show tab content
+  let mobileActiveTab: Tab | null = null;
 
-  // Track which password fields are revealed (by question id)
-  let revealedPasswords: Record<number, boolean> = {};
-
-  function togglePassword(questionId: number) {
-    revealedPasswords[questionId] = !revealedPasswords[questionId];
-    revealedPasswords = revealedPasswords; // trigger reactivity
+  function selectMobileTab(tab: Tab) {
+    activeTab = tab;
+    mobileActiveTab = tab;
   }
 
-  function selectConfig(config: (typeof configurations)[number]) {
-    if (selectedConfig?.id === config.id) {
-      // Clicking the active config collapses back to full list
-      selectedConfig = null;
-    } else {
-      selectedConfig = config;
-      configFadeKey++; // bump key to trigger fade animation
-      revealedPasswords = {}; // reset password visibility
-    }
-  }
-
-  function companyInitials(name: string): string {
-    return name
-      .split(/\s+/)
-      .slice(0, 2)
-      .map((w) => w[0])
-      .join("")
-      .toUpperCase();
-  }
-
-  function statusClass(status?: string): string {
-    if (!status) return "neutral";
-    const s = status.toLowerCase();
-    if (s === "active") return "active";
-    if (s === "inactive" || s === "disabled") return "inactive";
-    if (s === "pending") return "pending";
-    return "neutral";
-  }
-
-  function configStatusClass(statusName?: string): string {
-    if (!statusName) return "neutral";
-    const s = statusName.toLowerCase();
-    if (s === "active") return "active";
-    if (s === "inactive" || s === "automate inactive") return "inactive";
-    if (s === "reserved") return "reserved";
-    if (s === "provisioning" || s === "pending approval") return "pending";
-    return "neutral";
-  }
-
-  function formatDate(dateStr?: string): string {
-    if (!dateStr) return "";
-    try {
-      return new Date(dateStr).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-      });
-    } catch {
-      return "";
-    }
-  }
-
-  function formatAddress(c: NonNullable<typeof company>): string[] {
-    // Prefer the nested cw_Data.address structure returned when includeAddress=true
-    const addr = c.cw_Data?.address;
-    if (addr) {
-      const lines: string[] = [];
-      if (addr.line1) lines.push(addr.line1);
-      if (addr.line2) lines.push(addr.line2);
-      const cityStateZip = [addr.city, addr.state, addr.zip]
-        .filter(Boolean)
-        .join(", ");
-      if (cityStateZip) lines.push(cityStateZip);
-      if (addr.country) lines.push(addr.country);
-      return lines;
-    }
-    // Fallback to flat fields
-    const lines: string[] = [];
-    if (c.address) lines.push(c.address);
-    const cityStateZip = [c.city, c.state, c.zip].filter(Boolean).join(", ");
-    if (cityStateZip) lines.push(cityStateZip);
-    if (c.country) lines.push(c.country);
-    return lines;
+  function mobileBack() {
+    mobileActiveTab = null;
   }
 </script>
 
@@ -172,192 +69,195 @@
 
 <div class="company-detail-page">
   <!-- Left pane (1/4) — Company overview -->
-  <div class="company-detail-left">
-    <div class="detail-pane-body">
-      <button
-        class="back-btn"
-        on:click={() => goto("/companies")}
-        aria-label="Back to companies"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          width="16"
-          height="16"
+  <CompanySidebar {company} {permissions} {isMobile} {mobileActiveTab} />
+
+  <!-- Mobile vertical nav menu (only visible on mobile when no tab selected) -->
+  {#if isMobile && mobileActiveTab === null}
+    <div class="mobile-nav-menu">
+      {#each tabs as tab}
+        <button
+          class="mobile-nav-item"
+          on:click={() => selectMobileTab(tab)}
+          type="button"
         >
-          <path d="M19 12H5M12 19l-7-7 7-7" />
-        </svg>
-      </button>
-      {#if company}
-        <!-- Avatar + name + status -->
-        <div class="profile-header">
-          <div class="profile-avatar">
-            <span class="profile-initials">{companyInitials(company.name)}</span
-            >
-          </div>
-          <h3 class="profile-name">{company.name}</h3>
-          {#if company.status}
-            <span class="profile-status {statusClass(company.status)}"
-              >{company.status}</span
-            >
-          {/if}
-        </div>
-
-        <!-- Info rows -->
-        <div class="profile-info">
-          {#if company.type}
-            <div class="info-row">
+          <span class="mobile-nav-icon">
+            {#if tab === "Credentials"}
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="info-icon"
+                width="20"
+                height="20"
               >
-                <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
-                <path d="M16 3h-8l-2 4h12z" />
-              </svg>
-              <div class="info-content">
-                <span class="info-label">Type</span>
-                <span class="info-value">{company.type}</span>
-              </div>
-            </div>
-          {/if}
-
-          {#if company.identifier || company.id}
-            <div class="info-row">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="info-icon"
-              >
-                <path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18" />
-              </svg>
-              <div class="info-content">
-                <span class="info-label">Identifier</span>
-                <span class="info-value mono"
-                  >{company.identifier || company.id}</span
-                >
-              </div>
-            </div>
-          {/if}
-
-          {#if company.contactEmail}
-            <div class="info-row">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="info-icon"
-              >
-                <rect x="2" y="4" width="20" height="16" rx="2" />
-                <path d="M22 7l-10 7L2 7" />
-              </svg>
-              <div class="info-content">
-                <span class="info-label">Email</span>
-                <span class="info-value">{company.contactEmail}</span>
-              </div>
-            </div>
-          {/if}
-
-          {#if company.contactPhone}
-            <div class="info-row">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="info-icon"
-              >
-                <path
-                  d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path
+                  d="M7 11V7a5 5 0 0 1 10 0v4"
                 />
               </svg>
-              <div class="info-content">
-                <span class="info-label">Phone</span>
-                <span class="info-value">{company.contactPhone}</span>
-              </div>
-            </div>
-          {/if}
-
-          {#if permissions["company.fetch.address"] && formatAddress(company).length > 0}
-            <div class="info-row">
+            {:else if tab === "Configurations"}
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="info-icon"
+                width="20"
+                height="20"
               >
-                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
-                <circle cx="12" cy="10" r="3" />
+                <circle cx="12" cy="12" r="3" /><path
+                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+                />
               </svg>
-              <div class="info-content">
-                <span class="info-label">Address</span>
-                <span class="info-value address-multiline">
-                  {#each formatAddress(company) as line}
-                    {line}<br />
-                  {/each}
-                </span>
-              </div>
-            </div>
-          {/if}
-
-          {#if formatDate(company.createdAt)}
-            <div class="info-row">
+            {:else if tab === "UniFi"}
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="info-icon"
+                width="20"
+                height="20"
               >
-                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-                <line x1="16" y1="2" x2="16" y2="6" />
-                <line x1="8" y1="2" x2="8" y2="6" />
-                <line x1="3" y1="10" x2="21" y2="10" />
+                <path d="M12 2L2 7l10 5 10-5-10-5z" /><path
+                  d="M2 17l10 5 10-5"
+                /><path d="M2 12l10 5 10-5" />
               </svg>
-              <div class="info-content">
-                <span class="info-label">Created</span>
-                <span class="info-value">{formatDate(company.createdAt)}</span>
-              </div>
-            </div>
-          {/if}
-
-          {#if formatDate(company.updatedAt)}
-            <div class="info-row">
+            {:else if tab === "Contacts"}
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="info-icon"
+                width="20"
+                height="20"
               >
-                <circle cx="12" cy="12" r="10" />
-                <polyline points="12 6 12 12 16 14" />
+                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" /><circle
+                  cx="9"
+                  cy="7"
+                  r="4"
+                /><path d="M23 21v-2a4 4 0 00-3-3.87" /><path
+                  d="M16 3.13a4 4 0 010 7.75"
+                />
               </svg>
-              <div class="info-content">
-                <span class="info-label">Updated</span>
-                <span class="info-value">{formatDate(company.updatedAt)}</span>
-              </div>
-            </div>
+            {:else}
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="20"
+                height="20"
+              >
+                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+              </svg>
+            {/if}
+          </span>
+          <span class="mobile-nav-label">{tab}</span>
+          {#if tab === "Credentials" && credentials.length > 0}
+            <span class="mobile-nav-badge">{credentials.length}</span>
           {/if}
-        </div>
-      {:else}
-        <div class="profile-empty">
-          <p>Company not found.</p>
-        </div>
-      {/if}
+          {#if tab === "Configurations" && configurations.length > 0}
+            <span class="mobile-nav-badge">{configurations.length}</span>
+          {/if}
+          {#if tab === "UniFi" && unifiSites.length > 0}
+            <span class="mobile-nav-badge">{unifiSites.length}</span>
+          {/if}
+          {#if tab === "Contacts" && (company?.cw_Data?.allContacts?.length ?? 0) > 0}
+            <span class="mobile-nav-badge"
+              >{company?.cw_Data?.allContacts?.length}</span
+            >
+          {/if}
+          <svg
+            class="mobile-nav-chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="16"
+            height="16"
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+      {/each}
     </div>
-  </div>
+  {/if}
 
   <!-- Right pane (3/4) -->
-  <div class="company-detail-right">
+  <div
+    class="company-detail-right"
+    class:mobile-hidden={isMobile && mobileActiveTab === null}
+  >
+    <!-- Mobile content header with back button -->
+    {#if isMobile && mobileActiveTab !== null}
+      <div class="mobile-content-header">
+        <button
+          class="mobile-back-btn"
+          on:click={mobileBack}
+          type="button"
+          aria-label="Back to menu"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <h3 class="mobile-content-title">{mobileActiveTab}</h3>
+        {#if mobileActiveTab === "Credentials"}
+          <button
+            type="button"
+            class="create-credential-btn mobile-create-btn"
+            on:click={() => (isCreateCredentialOpen = true)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"
+            >
+              <line x1="12" y1="5" x2="12" y2="19" /><line
+                x1="5"
+                y1="12"
+                x2="19"
+                y2="12"
+              />
+            </svg>
+            New
+          </button>
+        {/if}
+        {#if mobileActiveTab === "UniFi"}
+          <button
+            type="button"
+            class="create-credential-btn mobile-create-btn"
+            on:click={() => (isLinkUnifiOpen = true)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"
+            >
+              <path
+                d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+              />
+              <path
+                d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+              />
+            </svg>
+            Link
+          </button>
+        {/if}
+      </div>
+    {/if}
+
     <div class="tab-bar" role="tablist">
       {#each tabs as tab}
         <button
@@ -368,344 +268,91 @@
           on:click={() => (activeTab = tab)}
         >
           {tab}
+          {#if tab === "Credentials" && credentials.length > 0}
+            <span class="tab-count-badge">{credentials.length}</span>
+          {/if}
           {#if tab === "Configurations" && configurations.length > 0}
             <span class="tab-count-badge">{configurations.length}</span>
           {/if}
+          {#if tab === "UniFi" && unifiSites.length > 0}
+            <span class="tab-count-badge">{unifiSites.length}</span>
+          {/if}
         </button>
       {/each}
+      {#if activeTab === "Credentials"}
+        <div class="tab-bar-spacer"></div>
+        <button
+          type="button"
+          class="create-credential-btn"
+          on:click={() => (isCreateCredentialOpen = true)}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="14"
+            height="14"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Create Credential
+        </button>
+      {/if}
+      {#if activeTab === "UniFi"}
+        <div class="tab-bar-spacer"></div>
+        <button
+          type="button"
+          class="create-credential-btn"
+          on:click={() => (isLinkUnifiOpen = true)}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="14"
+            height="14"
+          >
+            <path
+              d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+            />
+            <path
+              d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+            />
+          </svg>
+          Link Site
+        </button>
+      {/if}
     </div>
     <div class="detail-pane-body">
-      {#if activeTab === "Credentials"}
-        <p class="tab-placeholder">Credentials content</p>
+      {#if activeTab === "Overview"}
+        <OverviewTab {company} {credentials} {configurations} {unifiSites} />
+      {:else if activeTab === "Credentials"}
+        <CredentialsTab
+          companyId={company?.id ?? ""}
+          {credentials}
+          {credentialTypes}
+          {accessToken}
+          {permissions}
+          {isMobile}
+          bind:isCreateCredentialOpen
+        />
       {:else if activeTab === "Configurations"}
-        {#if configurations.length === 0}
-          <div class="tab-empty">
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              class="tab-empty-icon"
-            >
-              <path
-                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-              />
-            </svg>
-            <p>No configurations found</p>
-          </div>
-        {:else}
-          <div class="config-split" class:expanded={selectedConfig !== null}>
-            <!-- Left side: config buttons -->
-            <div class="config-list" class:collapsed={selectedConfig !== null}>
-              {#each configurations as config (config.id)}
-                <button
-                  class="config-item"
-                  class:selected={selectedConfig?.id === config.id}
-                  class:config-inactive={config.status?.name === "Inactive" ||
-                    config.status?.name === "Automate Inactive"}
-                  on:click={() => selectConfig(config)}
-                  type="button"
-                >
-                  <div class="config-item-header">
-                    <div class="config-name-group">
-                      <span
-                        class="config-status-dot dot-{configStatusClass(
-                          config.status?.name,
-                        )}"
-                        title={config.status?.name ?? "Unknown"}
-                      ></span>
-                      <span class="config-name">{config.name}</span>
-                    </div>
-                    <div class="config-header-badges">
-                      {#if config.status?.name && !selectedConfig}
-                        <span
-                          class="config-status-badge status-{configStatusClass(
-                            config.status.name,
-                          )}">{config.status.name}</span
-                        >
-                      {/if}
-                      {#if config.type?.name && !selectedConfig}
-                        <span class="config-type-badge">{config.type.name}</span
-                        >
-                      {/if}
-                    </div>
-                  </div>
-                  {#if !selectedConfig}
-                    {#if config.description}
-                      <p class="config-description">{config.description}</p>
-                    {/if}
-                    {#if config.key}
-                      <div class="config-kv">
-                        <span class="config-key">{config.key}</span>
-                        {#if config.value}
-                          <span class="config-value">{config.value}</span>
-                        {/if}
-                      </div>
-                    {/if}
-                    {#if formatDate(config.updatedAt) || formatDate(config.createdAt) || formatDate(config.info?.lastUpdated) || formatDate(config.info?.dateEntered)}
-                      <span class="config-date">
-                        {#if formatDate(config.updatedAt)}
-                          Updated {formatDate(config.updatedAt)}
-                        {:else if formatDate(config.info?.lastUpdated)}
-                          Updated {formatDate(config.info?.lastUpdated)}
-                        {:else if formatDate(config.createdAt)}
-                          Created {formatDate(config.createdAt)}
-                        {:else if formatDate(config.info?.dateEntered)}
-                          Created {formatDate(config.info?.dateEntered)}
-                        {/if}
-                      </span>
-                    {/if}
-                  {/if}
-                </button>
-              {/each}
-            </div>
-
-            <!-- Right side: config detail panel -->
-            {#if selectedConfig}
-              <div class="config-detail-panel">
-                {#key configFadeKey}
-                  <div class="config-detail-content">
-                    <div class="config-detail-header">
-                      <div class="config-detail-header-left">
-                        <h3 class="config-detail-title">
-                          {selectedConfig.name}
-                        </h3>
-                        <div class="config-detail-meta-badges">
-                          {#if selectedConfig.type?.name}
-                            <span class="config-badge type"
-                              >{selectedConfig.type.name}</span
-                            >
-                          {/if}
-                          {#if selectedConfig.status?.name}
-                            <span
-                              class="config-badge status-{configStatusClass(
-                                selectedConfig.status.name,
-                              )}"
-                            >
-                              {selectedConfig.status.name}
-                            </span>
-                          {/if}
-                        </div>
-                      </div>
-                      <button
-                        class="config-detail-close"
-                        on:click={() => (selectedConfig = null)}
-                        aria-label="Close detail view"
-                        type="button"
-                      >
-                        <svg
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="2"
-                          width="16"
-                          height="16"
-                        >
-                          <path d="M18 6L6 18M6 6l12 12" />
-                        </svg>
-                      </button>
-                    </div>
-
-                    {#if selectedConfig.serialNumber}
-                      <div class="config-serial">
-                        <span class="config-serial-label">Serial #</span>
-                        <span class="config-serial-value"
-                          >{selectedConfig.serialNumber}</span
-                        >
-                      </div>
-                    {/if}
-
-                    <!-- Notes -->
-                    {#if selectedConfig.notes}
-                      <div class="config-notes">
-                        <h4 class="config-section-title">
-                          <svg
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            width="16"
-                            height="16"
-                          >
-                            <path
-                              d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
-                            />
-                            <polyline points="14 2 14 8 20 8" />
-                            <line x1="16" y1="13" x2="8" y2="13" />
-                            <line x1="16" y1="17" x2="8" y2="17" />
-                            <polyline points="10 9 9 9 8 9" />
-                          </svg>
-                          Notes
-                        </h4>
-                        <p class="config-notes-text">{selectedConfig.notes}</p>
-                      </div>
-                    {/if}
-
-                    <!-- Questions / Fields -->
-                    {#if selectedConfig.questions && selectedConfig.questions.length > 0}
-                      <div class="config-questions">
-                        <h4 class="config-section-title">
-                          <svg
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            width="16"
-                            height="16"
-                          >
-                            <path
-                              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
-                            />
-                            <rect x="9" y="3" width="6" height="4" rx="1" />
-                          </svg>
-                          Configuration Details
-                        </h4>
-                        <div class="questions-grid">
-                          {#each selectedConfig.questions as q (q.id)}
-                            <div
-                              class="question-row"
-                              class:has-answer={!!q.answer}
-                            >
-                              <span class="question-label">{q.question}</span>
-                              <div class="question-value-wrap">
-                                {#if q.fieldType === "Password"}
-                                  <span class="question-value password-value">
-                                    {#if revealedPasswords[q.id]}
-                                      {q.answer || "—"}
-                                    {:else}
-                                      {q.answer ? "••••••••" : "—"}
-                                    {/if}
-                                  </span>
-                                  {#if q.answer}
-                                    <button
-                                      class="password-toggle"
-                                      on:click={() => togglePassword(q.id)}
-                                      type="button"
-                                      aria-label={revealedPasswords[q.id]
-                                        ? "Hide password"
-                                        : "Show password"}
-                                    >
-                                      {#if revealedPasswords[q.id]}
-                                        <svg
-                                          viewBox="0 0 24 24"
-                                          fill="none"
-                                          stroke="currentColor"
-                                          stroke-width="2"
-                                          width="14"
-                                          height="14"
-                                        >
-                                          <path
-                                            d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
-                                          />
-                                          <path
-                                            d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
-                                          />
-                                          <path
-                                            d="M14.12 14.12a3 3 0 11-4.24-4.24"
-                                          />
-                                          <line x1="1" y1="1" x2="23" y2="23" />
-                                        </svg>
-                                      {:else}
-                                        <svg
-                                          viewBox="0 0 24 24"
-                                          fill="none"
-                                          stroke="currentColor"
-                                          stroke-width="2"
-                                          width="14"
-                                          height="14"
-                                        >
-                                          <path
-                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-                                          />
-                                          <circle cx="12" cy="12" r="3" />
-                                        </svg>
-                                      {/if}
-                                    </button>
-                                  {/if}
-                                {:else if q.fieldType === "TextArea"}
-                                  <span class="question-value textarea-value"
-                                    >{q.answer || "—"}</span
-                                  >
-                                {:else}
-                                  <span class="question-value"
-                                    >{q.answer || "—"}</span
-                                  >
-                                {/if}
-                              </div>
-                            </div>
-                          {/each}
-                        </div>
-                      </div>
-                    {:else if !selectedConfig.notes}
-                      <div class="config-no-questions">
-                        <svg
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="1.5"
-                          width="32"
-                          height="32"
-                        >
-                          <circle cx="12" cy="12" r="10" />
-                          <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
-                          <line x1="12" y1="17" x2="12.01" y2="17" />
-                        </svg>
-                        <p>No configuration fields available</p>
-                      </div>
-                    {/if}
-
-                    <!-- Footer metadata -->
-                    {#if selectedConfig.info}
-                      <div class="config-info-footer">
-                        {#if selectedConfig.info.enteredBy || selectedConfig.info.dateEntered}
-                          <div class="config-info-item">
-                            <svg
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              width="13"
-                              height="13"
-                            >
-                              <path d="M12 5v14M5 12h14" />
-                            </svg>
-                            Created{#if selectedConfig.info.enteredBy}&nbsp;by <strong
-                                >{selectedConfig.info.enteredBy}</strong
-                              >{/if}{#if selectedConfig.info.dateEntered}&nbsp;on
-                              {formatDate(selectedConfig.info.dateEntered)}{/if}
-                          </div>
-                        {/if}
-                        {#if selectedConfig.info.updatedBy || selectedConfig.info.lastUpdated}
-                          <div class="config-info-item">
-                            <svg
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              width="13"
-                              height="13"
-                            >
-                              <circle cx="12" cy="12" r="10" />
-                              <polyline points="12 6 12 12 16 14" />
-                            </svg>
-                            Updated{#if selectedConfig.info.updatedBy}&nbsp;by <strong
-                                >{selectedConfig.info.updatedBy}</strong
-                              >{/if}{#if selectedConfig.info.lastUpdated}&nbsp;on
-                              {formatDate(selectedConfig.info.lastUpdated)}{/if}
-                          </div>
-                        {/if}
-                      </div>
-                    {/if}
-                  </div>
-                {/key}
-              </div>
-            {/if}
-          </div>
-        {/if}
-      {:else if activeTab === "Users"}
-        <p class="tab-placeholder">Users content</p>
+        <ConfigurationsTab {configurations} {isMobile} />
+      {:else if activeTab === "UniFi"}
+        <UniFiTab
+          companyId={company?.id ?? ""}
+          {unifiSites}
+          {accessToken}
+          {permissions}
+          bind:isLinkUnifiOpen
+        />
+      {:else if activeTab === "Contacts"}
+        <ContactsTab {company} />
       {:else if activeTab === "Activity"}
-        <p class="tab-placeholder">Activity content</p>
+        <ActivityTab />
       {/if}
     </div>
   </div>
diff --git a/src/routes/companies/[id]/+page.svelte.bak b/src/routes/companies/[id]/+page.svelte.bak
new file mode 100644
index 0000000..1d78678
--- /dev/null
+++ b/src/routes/companies/[id]/+page.svelte.bak
@@ -0,0 +1,6134 @@
+<script lang="ts">
+  import "../../../styles/companies/companydetail.css";
+  import { onMount } from "svelte";
+  import type { PageData } from "./types";
+
+  // Tab components
+  import CompanySidebar from "./components/CompanySidebar.svelte";
+  import OverviewTab from "./components/OverviewTab.svelte";
+  import CredentialsTab from "./components/CredentialsTab.svelte";
+  import ConfigurationsTab from "./components/ConfigurationsTab.svelte";
+  import ContactsTab from "./components/ContactsTab.svelte";
+  import UniFiTab from "./components/UniFiTab.svelte";
+  import ActivityTab from "./components/ActivityTab.svelte";
+
+  export let data: PageData & {
+      description?: string;
+      createdAt?: string;
+      updatedAt?: string;
+      [key: string]: unknown;
+    }>;
+    credentials: Credential[];
+    credentialTypes: CredentialType[];
+    unifiSites: UnifiSite[];
+    accessToken: string | null;
+    permissions: PermissionMap;
+  };
+
+  $: company = data.company;
+  $: configurations = data.configurations;
+  $: credentials = data.credentials;
+  $: credentialTypes = data.credentialTypes;
+  $: unifiSites = data.unifiSites;
+  $: accessToken = data.accessToken;
+  $: permissions = data.permissions;
+
+  // Mobile detection for responsive layout behavior
+  let isMobile = false;
+  function checkMobile() {
+    isMobile = typeof window !== "undefined" && window.innerWidth <= 768;
+  }
+
+  import { onMount } from "svelte";
+  onMount(() => {
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  });
+
+  // Create credential modal state
+  let isCreateCredentialOpen = false;
+
+  // UniFi state
+  let isLinkUnifiOpen = false;
+  let selectedUnifiSite: UnifiSite | null = null;
+  let unifiSiteOverview: UnifiSiteOverview | null = null;
+  let unifiSiteDevices: UnifiDevice[] = [];
+  let unifiSiteWifi: UnifiWifiNetwork[] = [];
+  let unifiSiteNetworks: UnifiNetwork[] = [];
+  let unifiWlanGroups: UnifiWlanGroup[] = [];
+  let unifiAccessPoints: UnifiAccessPoint[] = [];
+  let unifiSpeedProfiles: UnifiSpeedProfile[] = [];
+  let wifiPPSKs: UnifiPPSK[] = [];
+  let isLoadingUnifiOverview = false;
+  let isLoadingUnifiDevices = false;
+  let isLoadingUnifiWifi = false;
+  let isLoadingUnifiNetworks = false;
+  let isLoadingSpeedProfiles = false;
+  let isLoadingPPSKs = false;
+  let unifiManagementTab: "overview" | "devices" | "wifi" | "networks" =
+    "overview";
+  let isUnlinkingSite = false;
+  let isUnifiSiteMenuOpen = false;
+  let revealedWifiPassphrases: Record<string, boolean> = {};
+
+  // WiFi split-view state
+  let selectedWifi: UnifiWifiNetwork | null = null;
+  let wifiEditState: Record<string, unknown> = {};
+  let wifiOriginalState: Record<string, unknown> = {};
+  let isWifiDirty = false;
+  let isSavingWifi = false;
+  let wifiSaveError: string | null = null;
+  let wifiAdvancedMode: "auto" | "manual" = "auto";
+  // PPSK add form state
+  let ppskNewName = "";
+  let ppskNewKey = "";
+  let ppskNewVlanId = "";
+  let ppskNewMac = "";
+  let isAddingPPSK = false;
+  // MAC filter add form state
+  let macFilterNewMac = "";
+  // Speed profile create modal state
+  let showSpeedProfileModal = false;
+  let speedProfileName = "";
+  let speedProfileDown = "";
+  let speedProfileUp = "";
+  let isCreatingSpeedProfile = false;
+  // PMF warning state
+  let showPmfWarning = false;
+  let pendingPmfValue = "";
+  $: canEditWifi = permissions["unifi.site.wifi.update"] === true;
+
+  // All WiFi settings organized into flat, user-friendly groups
+  type WifiFieldDef = {
+    key: string;
+    label: string;
+    hint?: string;
+    type: string;
+    showIf?: string;
+    editable?: boolean;
+    options?: Array<{ value: string; label: string }>;
+  };
+  type WifiGroupDef = {
+    id: string;
+    title: string;
+    description?: string;
+    icon: string;
+    fields: WifiFieldDef[];
+  };
+
+  // The old wifiSettingsGroups kept for backward-compat with checkWifiDirty / save
+  // We no longer iterate them in the template — the 3-section layout is hand-coded.
+  const wifiSettingsGroups: WifiGroupDef[] = [];
+
+  // Keep wifiAdvancedGroups as empty — dirty check now uses explicit field lists
+  $: wifiAdvancedGroups = [] as WifiGroupDef[];
+
+  // Card-level overview stats (preloaded for all sites)
+  let siteOverviews: Record<string, UnifiSiteOverview> = {};
+  let loadedOverviewIds = new Set<string>();
+  let isLoadingCardStats = false;
+
+  async function loadCardOverviews() {
+    if (!accessToken || unifiSites.length === 0) return;
+    const toLoad = unifiSites.filter((s) => !loadedOverviewIds.has(s.id));
+    if (toLoad.length === 0) return;
+    isLoadingCardStats = true;
+    try {
+      const results = await Promise.allSettled(
+        toLoad.map((s) =>
+          unifiApi
+            .fetchSiteOverview(accessToken!, s.id)
+            .then((r) => ({ id: s.id, data: r?.data })),
+        ),
+      );
+      for (const r of results) {
+        if (r.status === "fulfilled" && r.value?.data) {
+          siteOverviews[r.value.id] = r.value.data;
+          loadedOverviewIds.add(r.value.id);
+        }
+      }
+      siteOverviews = siteOverviews; // trigger reactivity
+    } catch (err) {
+      console.error("Failed to load card overviews:", err);
+    } finally {
+      isLoadingCardStats = false;
+    }
+  }
+
+  // Preload overviews when UniFi tab is active
+  $: if (activeTab === "UniFi" && !selectedUnifiSite && unifiSites.length > 0) {
+    loadCardOverviews();
+  }
+
+  function getCardHealthStatus(
+    siteId: string,
+  ): "ok" | "warn" | "error" | "unknown" {
+    const overview = siteOverviews[siteId];
+    if (!overview?.health) return "unknown";
+    const statuses = overview.health.map((h) => h.status);
+    if (statuses.some((s) => s === "error" || s === "critical")) return "error";
+    if (statuses.some((s) => s === "warn" || s === "warning")) return "warn";
+    if (statuses.every((s) => s === "ok")) return "ok";
+    return "unknown";
+  }
+
+  function getCardDeviceCount(siteId: string): number {
+    const overview = siteOverviews[siteId];
+    if (!overview?.health) return 0;
+    return overview.health.reduce((sum, h) => sum + (h.numAdopted ?? 0), 0);
+  }
+
+  function getCardGatewayCount(siteId: string): number {
+    const overview = siteOverviews[siteId];
+    if (!overview?.health) return 0;
+    return overview.health.reduce((sum, h) => sum + (h.numGateway ?? 0), 0);
+  }
+
+  async function selectUnifiSite(site: UnifiSite) {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedUnifiSite = site;
+    unifiManagementTab = "overview";
+    unifiSiteOverview = null;
+    unifiSiteDevices = [];
+    unifiSiteWifi = [];
+    unifiSiteNetworks = [];
+    revealedWifiPassphrases = {};
+    selectedWifi = null;
+    wifiEditState = {};
+    wifiOriginalState = {};
+    isWifiDirty = false;
+    wifiSaveError = null;
+    await loadUnifiOverview(site.id);
+  }
+
+  function backToUnifiSites() {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedUnifiSite = null;
+    unifiSiteOverview = null;
+    revealedWifiPassphrases = {};
+    unifiSiteDevices = [];
+    unifiSiteWifi = [];
+    unifiSiteNetworks = [];
+    selectedWifi = null;
+    wifiEditState = {};
+    wifiOriginalState = {};
+    isWifiDirty = false;
+    wifiSaveError = null;
+  }
+
+  async function loadUnifiOverview(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiOverview = true;
+    try {
+      const result = await unifiApi.fetchSiteOverview(accessToken, siteId);
+      unifiSiteOverview = result?.data ?? null;
+    } catch (err) {
+      console.error("Failed to load UniFi overview:", err);
+    } finally {
+      isLoadingUnifiOverview = false;
+    }
+  }
+
+  async function loadUnifiDevices(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiDevices = true;
+    try {
+      const result = await unifiApi.fetchSiteDevices(accessToken, siteId);
+      unifiSiteDevices = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load UniFi devices:", err);
+    } finally {
+      isLoadingUnifiDevices = false;
+    }
+  }
+
+  async function loadUnifiWifi(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiWifi = true;
+    try {
+      const result = await unifiApi.fetchSiteWifi(accessToken, siteId);
+      unifiSiteWifi = Array.isArray(result?.data)
+        ? result.data
+        : Array.isArray(result)
+          ? result
+          : [];
+    } catch (err) {
+      console.error("Failed to load UniFi WiFi:", err);
+    } finally {
+      isLoadingUnifiWifi = false;
+    }
+  }
+
+  async function loadUnifiNetworks(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiNetworks = true;
+    try {
+      const result = await unifiApi.fetchSiteNetworks(accessToken, siteId);
+      unifiSiteNetworks = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load UniFi networks:", err);
+    } finally {
+      isLoadingUnifiNetworks = false;
+    }
+  }
+
+  async function loadSpeedProfiles(siteId: string) {
+    if (!accessToken) return;
+    isLoadingSpeedProfiles = true;
+    try {
+      const result = await unifiApi.fetchSpeedProfiles(accessToken, siteId);
+      unifiSpeedProfiles = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load speed profiles:", err);
+    } finally {
+      isLoadingSpeedProfiles = false;
+    }
+  }
+
+  async function loadPPSKs(siteId: string, wlanId: string) {
+    if (!accessToken) return;
+    isLoadingPPSKs = true;
+    try {
+      const result = await unifiApi.fetchPPSKs(accessToken, siteId, wlanId);
+      wifiPPSKs = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load PPSKs:", err);
+    } finally {
+      isLoadingPPSKs = false;
+    }
+  }
+
+  async function addPPSK() {
+    if (!accessToken || !selectedUnifiSite || !selectedWifi) return;
+    if (!ppskNewName.trim() || !ppskNewKey.trim()) return;
+    isAddingPPSK = true;
+    try {
+      const data: { key: string; name: string; mac?: string; vlanId?: number } =
+        {
+          key: ppskNewKey.trim(),
+          name: ppskNewName.trim(),
+        };
+      if (ppskNewMac.trim()) data.mac = ppskNewMac.trim();
+      if (ppskNewVlanId && Number(ppskNewVlanId) > 0)
+        data.vlanId = Number(ppskNewVlanId);
+      const result = await unifiApi.createPPSK(
+        accessToken,
+        selectedUnifiSite.id,
+        selectedWifi.id,
+        data,
+      );
+      wifiPPSKs = result?.data ?? [...wifiPPSKs, data as UnifiPPSK];
+      ppskNewName = "";
+      ppskNewKey = "";
+      ppskNewMac = "";
+      ppskNewVlanId = "";
+    } catch (err) {
+      console.error("Failed to add PPSK:", err);
+      wifiSaveError = err instanceof Error ? err.message : "Failed to add PPSK";
+    } finally {
+      isAddingPPSK = false;
+    }
+  }
+
+  async function addMacToFilterList() {
+    const mac = macFilterNewMac.trim().toUpperCase();
+    if (!mac) return;
+    const current = Array.isArray(wifiEditState.macFilterList)
+      ? (wifiEditState.macFilterList as string[])
+      : [];
+    if (!current.includes(mac)) {
+      updateWifiField("macFilterList", [...current, mac]);
+    }
+    macFilterNewMac = "";
+  }
+
+  function removeMacFromFilterList(mac: string) {
+    const current = Array.isArray(wifiEditState.macFilterList)
+      ? (wifiEditState.macFilterList as string[])
+      : [];
+    updateWifiField(
+      "macFilterList",
+      current.filter((m) => m !== mac),
+    );
+  }
+
+  async function createSpeedProfile() {
+    if (!accessToken || !selectedUnifiSite || !speedProfileName.trim()) return;
+    isCreatingSpeedProfile = true;
+    try {
+      const data: {
+        name: string;
+        downloadLimitKbps?: number;
+        uploadLimitKbps?: number;
+      } = {
+        name: speedProfileName.trim(),
+      };
+      if (speedProfileDown && Number(speedProfileDown) > 0)
+        data.downloadLimitKbps = Number(speedProfileDown);
+      if (speedProfileUp && Number(speedProfileUp) > 0)
+        data.uploadLimitKbps = Number(speedProfileUp);
+      await unifiApi.createSpeedProfile(
+        accessToken,
+        selectedUnifiSite.id,
+        data,
+      );
+      await loadSpeedProfiles(selectedUnifiSite.id);
+      showSpeedProfileModal = false;
+      speedProfileName = "";
+      speedProfileDown = "";
+      speedProfileUp = "";
+    } catch (err) {
+      console.error("Failed to create speed profile:", err);
+    } finally {
+      isCreatingSpeedProfile = false;
+    }
+  }
+
+  function confirmPmfChange(value: string) {
+    if (value === "required" || value === "optional") {
+      pendingPmfValue = value;
+      showPmfWarning = true;
+    } else {
+      updateWifiField("pmfMode", value);
+    }
+  }
+
+  function applyPmfChange() {
+    updateWifiField("pmfMode", pendingPmfValue);
+    showPmfWarning = false;
+    pendingPmfValue = "";
+  }
+
+  async function switchUnifiManagementTab(tab: typeof unifiManagementTab) {
+    if (unifiManagementTab === "wifi" && tab !== "wifi" && isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+      selectedWifi = null;
+      wifiEditState = {};
+      wifiOriginalState = {};
+      isWifiDirty = false;
+      wifiSaveError = null;
+    }
+    unifiManagementTab = tab;
+    if (!selectedUnifiSite) return;
+    if (tab === "overview" && !unifiSiteOverview) {
+      await loadUnifiOverview(selectedUnifiSite.id);
+    } else if (tab === "devices" && unifiSiteDevices.length === 0) {
+      await loadUnifiDevices(selectedUnifiSite.id);
+    } else if (tab === "wifi" && unifiSiteWifi.length === 0) {
+      await Promise.all([
+        loadUnifiWifi(selectedUnifiSite.id),
+        unifiSiteNetworks.length === 0
+          ? loadUnifiNetworks(selectedUnifiSite.id)
+          : Promise.resolve(),
+        unifiSpeedProfiles.length === 0
+          ? loadSpeedProfiles(selectedUnifiSite.id)
+          : Promise.resolve(),
+      ]);
+    } else if (tab === "networks" && unifiSiteNetworks.length === 0) {
+      await loadUnifiNetworks(selectedUnifiSite.id);
+    }
+  }
+
+  async function unlinkUnifiSite(siteId: string) {
+    if (!accessToken) return;
+    isUnlinkingSite = true;
+    try {
+      await unifiApi.unlinkSite(accessToken, siteId);
+      selectedUnifiSite = null;
+      await invalidateAll();
+    } catch (err) {
+      console.error("Failed to unlink UniFi site:", err);
+    } finally {
+      isUnlinkingSite = false;
+    }
+  }
+
+  // WiFi split-view functions
+  function selectWifiNetwork(wifi: UnifiWifiNetwork) {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedWifi = wifi;
+    wifiEditState = { ...wifi };
+    wifiOriginalState = { ...wifi };
+    isWifiDirty = false;
+    wifiSaveError = null;
+    wifiAdvancedMode = wifi.settingPreference === "manual" ? "manual" : "auto";
+    revealedWifiPassphrases = {};
+    ppskNewName = "";
+    ppskNewKey = "";
+    ppskNewMac = "";
+    ppskNewVlanId = "";
+    wifiPPSKs = [];
+    macFilterNewMac = "";
+    // Load PPSKs if enabled
+    if (wifi.privatePreSharedKeysEnabled && selectedUnifiSite) {
+      loadPPSKs(selectedUnifiSite.id, wifi.id);
+    }
+  }
+
+  function backToWifiList() {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedWifi = null;
+    wifiEditState = {};
+    wifiOriginalState = {};
+    isWifiDirty = false;
+    wifiSaveError = null;
+    wifiAdvancedMode = "auto";
+  }
+
+  function updateWifiField(field: string, value: unknown) {
+    wifiEditState[field] = value;
+    wifiEditState = wifiEditState;
+    checkWifiDirty();
+  }
+
+  function checkWifiDirty() {
+    const allEditableFields = [
+      // General
+      "name",
+      "passphrase",
+      "enabled",
+      "networkconfId",
+      "band",
+      "apGroupMode",
+      // Security
+      "security",
+      "wpaMode",
+      "wpaEnc",
+      "pmfMode",
+      "privatePreSharedKeysEnabled",
+      "hideSSID",
+      "l2Isolation",
+      // Behavior Controls
+      "fastRoamingEnabled",
+      "proxyArp",
+      "bssTransition",
+      "uapsdEnabled",
+      "macFilterEnabled",
+      "macFilterPolicy",
+      "macFilterList",
+      "radiusMacAuthEnabled",
+      "radiusMacaclFormat",
+      "usergroupId",
+      "dtimMode",
+      "dtimNg",
+      "dtimNa",
+      "dtim6e",
+      "groupRekey",
+      "no2ghzOui",
+      "settingPreference",
+      // Other advanced
+      "wpa3Support",
+      "wpa3Transition",
+      "wpa3FastRoaming",
+      "wpa3Enhanced192",
+      "iappEnabled",
+      "mcastenhanceEnabled",
+      "isGuest",
+      "passphraseAutogenerated",
+      "radiusDasEnabled",
+      "minrateSettingPreference",
+      "minrateNgEnabled",
+      "minrateNgDataRateKbps",
+      "minrateNgAdvertisingRates",
+      "minrateNaEnabled",
+      "minrateNaDataRateKbps",
+      "minrateNaAdvertisingRates",
+    ];
+    isWifiDirty = allEditableFields.some(
+      (f) => f in wifiEditState && wifiEditState[f] !== wifiOriginalState[f],
+    );
+  }
+
+  function discardWifiChanges() {
+    wifiEditState = { ...wifiOriginalState };
+    isWifiDirty = false;
+    wifiSaveError = null;
+    wifiAdvancedMode =
+      wifiOriginalState.settingPreference === "manual" ? "manual" : "auto";
+  }
+
+  async function saveWifiChanges() {
+    if (!accessToken || !selectedUnifiSite || !selectedWifi) return;
+    isSavingWifi = true;
+    wifiSaveError = null;
+    try {
+      const fieldMap: Record<string, string> = {
+        name: "name",
+        passphrase: "x_passphrase",
+        enabled: "enabled",
+        security: "security",
+        wpaMode: "wpa_mode",
+        hideSSID: "hide_ssid",
+        isGuest: "is_guest",
+        band: "band",
+        settingPreference: "setting_preference",
+        wpa3Support: "wpa3_support",
+        wpa3Transition: "wpa3_transition",
+        wpa3FastRoaming: "wpa3_fast_roaming",
+        wpa3Enhanced192: "wpa3_enhanced_192",
+        wpaEnc: "wpa_enc",
+        pmfMode: "pmf_mode",
+        groupRekey: "group_rekey",
+        l2Isolation: "l2_isolation",
+        fastRoamingEnabled: "fast_roaming_enabled",
+        bssTransition: "bss_transition",
+        uapsdEnabled: "uapsd_enabled",
+        iappEnabled: "iapp_enabled",
+        proxyArp: "proxy_arp",
+        mcastenhanceEnabled: "mcastenhance_enabled",
+        dtimMode: "dtim_mode",
+        dtimNg: "dtim_ng",
+        dtimNa: "dtim_na",
+        dtim6e: "dtim_6e",
+        macFilterEnabled: "mac_filter_enabled",
+        macFilterPolicy: "mac_filter_policy",
+        macFilterList: "mac_filter_list",
+        radiusDasEnabled: "radius_das_enabled",
+        radiusMacAuthEnabled: "radius_mac_auth_enabled",
+        radiusMacaclFormat: "radius_macacl_format",
+        minrateSettingPreference: "minrate_setting_preference",
+        minrateNgEnabled: "minrate_ng_enabled",
+        minrateNgDataRateKbps: "minrate_ng_data_rate_kbps",
+        minrateNgAdvertisingRates: "minrate_ng_advertising_rates",
+        minrateNaEnabled: "minrate_na_enabled",
+        minrateNaDataRateKbps: "minrate_na_data_rate_kbps",
+        minrateNaAdvertisingRates: "minrate_na_advertising_rates",
+        privatePreSharedKeysEnabled: "private_pre_shared_keys_enabled",
+        passphraseAutogenerated: "passphrase_autogenerated",
+        no2ghzOui: "no2ghz_oui",
+        apGroupMode: "ap_group_mode",
+        usergroupId: "usergroup_id",
+        networkconfId: "networkconf_id",
+      };
+      // In auto mode, only send general fields + settingPreference
+      const autoOnlyFields = new Set([
+        "name",
+        "x_passphrase",
+        "enabled",
+        "band",
+        "security",
+        "wpa_mode",
+        "hide_ssid",
+        "is_guest",
+        "setting_preference",
+        "networkconf_id",
+        "ap_group_mode",
+      ]);
+      const payload: Record<string, unknown> = {};
+      for (const [readField, writeField] of Object.entries(fieldMap)) {
+        if (
+          readField in wifiEditState &&
+          wifiEditState[readField] !== wifiOriginalState[readField]
+        ) {
+          if (wifiAdvancedMode === "auto" && !autoOnlyFields.has(writeField))
+            continue;
+          payload[writeField] = wifiEditState[readField];
+        }
+      }
+      if (Object.keys(payload).length === 0) return;
+      const result = await unifiApi.updateWifi(
+        accessToken,
+        selectedUnifiSite.id,
+        selectedWifi.id,
+        payload,
+      );
+      const updated = result?.data ?? wifiEditState;
+      selectedWifi = { ...selectedWifi, ...updated } as UnifiWifiNetwork;
+      wifiEditState = { ...updated };
+      wifiOriginalState = { ...updated };
+      isWifiDirty = false;
+      unifiSiteWifi = unifiSiteWifi.map((w) =>
+        w.id === selectedWifi!.id
+          ? ({ ...w, ...updated } as UnifiWifiNetwork)
+          : w,
+      );
+    } catch (err) {
+      console.error("Failed to save WiFi changes:", err);
+      wifiSaveError =
+        err instanceof Error ? err.message : "Failed to save changes";
+    } finally {
+      isSavingWifi = false;
+    }
+  }
+
+  function formatWifiFieldValue(value: unknown, type: string): string {
+    if (value === undefined || value === null) return "—";
+    if (type === "bool") return value ? "Yes" : "No";
+    if (type === "array")
+      return Array.isArray(value) && value.length > 0 ? value.join(", ") : "—";
+    if (type === "number") return String(value);
+    return String(value) || "—";
+  }
+
+  function formatUptime(seconds: number): string {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${mins}m`;
+    return `${mins}m`;
+  }
+
+  // Credential actions state
+  let openCredMenuId: string | null = null;
+  let credToDelete: Credential | null = null;
+  let isDeleting = false;
+  let deleteError = "";
+
+  // Edit mode state
+  let isEditingCredential = false;
+  let editCredName = "";
+  let editCredNotes = "";
+  let editCredFields: Record<string, string> = {};
+  let isSavingCredential = false;
+  let saveCredError = "";
+
+  function toggleCredMenu(id: string) {
+    openCredMenuId = openCredMenuId === id ? null : id;
+  }
+
+  function handleEditCredential(cred: Credential | null) {
+    if (!cred) return;
+    openCredMenuId = null;
+    // If not already selected, select it first
+    if (selectedCredential?.id !== cred.id) {
+      selectedCredential = cred;
+      credFadeKey++;
+      revealedCredFields = {};
+      loadingCredFields = {};
+    }
+    // Enter edit mode
+    editCredName = cred.name;
+    editCredNotes = cred.notes ?? "";
+    const newFields: Record<string, string> = {};
+    cred.fields.forEach((f) => {
+      newFields[f.id] = f.secure ? "" : (f.value ?? "");
+    });
+    editCredFields = newFields;
+    saveCredError = "";
+    isEditingCredential = true;
+  }
+
+  function cancelEditCredential() {
+    isEditingCredential = false;
+    editCredName = "";
+    editCredNotes = "";
+    editCredFields = {};
+    saveCredError = "";
+  }
+
+  async function saveEditCredential() {
+    if (!selectedCredential || !accessToken) return;
+    isSavingCredential = true;
+    saveCredError = "";
+    try {
+      // Update name and notes if changed
+      const updates: { name?: string; notes?: string } = {};
+      if (editCredName.trim() !== selectedCredential.name) {
+        updates.name = editCredName.trim();
+      }
+      if (editCredNotes !== (selectedCredential.notes ?? "")) {
+        updates.notes = editCredNotes;
+      }
+      if (Object.keys(updates).length > 0) {
+        await credentialApi.update(accessToken, selectedCredential.id, updates);
+      }
+      // Update fields – only send fields that have values (skip empty secure fields to preserve existing)
+      const fieldsToUpdate = selectedCredential.fields
+        .filter((f) => {
+          const newVal = editCredFields[f.id];
+          // For secure fields, only update if user entered a new value
+          if (f.secure)
+            return typeof newVal === "string" && newVal.trim().length > 0;
+          // For non-secure fields, always include
+          return true;
+        })
+        .map((f) => ({
+          fieldId: f.id,
+          value: editCredFields[f.id] ?? "",
+        }));
+
+      console.log("editCredFields state:", JSON.stringify(editCredFields));
+      console.log("fieldsToUpdate:", JSON.stringify(fieldsToUpdate));
+
+      if (fieldsToUpdate.length > 0) {
+        await credentialApi.updateFields(
+          accessToken,
+          selectedCredential.id,
+          fieldsToUpdate as unknown as import("$lib/optima-api/modules/credentials").CredentialField[],
+        );
+      }
+      isEditingCredential = false;
+      // Clear any revealed secure values since they may have changed
+      revealedCredFields = {};
+      fetchedSecureValues = {};
+      await invalidateAll();
+      // Re-select the credential to get fresh data
+      const updated = credentials.find((c) => c.id === selectedCredential?.id);
+      if (updated) {
+        selectedCredential = updated;
+        credFadeKey++;
+      }
+    } catch (err) {
+      saveCredError =
+        err instanceof Error ? err.message : "Failed to save changes";
+      console.error("Failed to save credential:", err);
+    } finally {
+      isSavingCredential = false;
+    }
+  }
+
+  function handleDeleteCredential(cred: Credential | null) {
+    if (!cred) return;
+    openCredMenuId = null;
+    credToDelete = cred;
+    deleteError = "";
+  }
+
+  function cancelDelete() {
+    credToDelete = null;
+    deleteError = "";
+  }
+
+  async function confirmDelete() {
+    if (!credToDelete || !accessToken) return;
+    isDeleting = true;
+    deleteError = "";
+    try {
+      await credentialApi.delete(accessToken, credToDelete.id);
+      // If the deleted credential was selected, deselect it
+      if (selectedCredential?.id === credToDelete.id) {
+        selectedCredential = null;
+      }
+      credToDelete = null;
+      await invalidateAll();
+    } catch (err) {
+      deleteError =
+        err instanceof Error ? err.message : "Failed to delete credential";
+      console.error("Failed to delete credential:", err);
+    } finally {
+      isDeleting = false;
+    }
+  }
+
+  const tabs = [
+    "Overview",
+    "Credentials",
+    "Configurations",
+    "UniFi",
+    "Contacts",
+    "Activity",
+  ] as const;
+  type Tab = (typeof tabs)[number];
+  let activeTab: Tab = "Overview";
+
+  // Mobile nav state: null = show vertical nav menu; set = show tab content
+  let mobileActiveTab: Tab | null = null;
+
+  function selectMobileTab(tab: Tab) {
+    activeTab = tab;
+    mobileActiveTab = tab;
+  }
+
+  function mobileBack() {
+    mobileActiveTab = null;
+    // Deselect any open detail panels
+    selectedCredential = null;
+    selectedConfig = null;
+    isEditingCredential = false;
+  }
+
+  // Credentials split-view state
+  let selectedCredential: Credential | null = null;
+  let credFadeKey = 0;
+  let revealedCredFields: Record<string, boolean> = {};
+  let loadingCredFields: Record<string, boolean> = {};
+  let fetchedSecureValues: Record<string, string> = {};
+  let credFieldTimers: Record<string, ReturnType<typeof setTimeout>> = {};
+
+  // Sub-credentials state
+  let subCredentials: Credential[] = [];
+  let isLoadingSubCreds = false;
+  let addingSubCred: string | null = null; // field ID being added to
+  let newSubCredName = "";
+  let newSubCredFields: Record<string, string> = {};
+  let isSubmittingSubCred = false;
+  let subCredError = "";
+  let deletingSubCredId: string | null = null;
+
+  async function loadSubCredentials(credentialId: string) {
+    if (!accessToken) return;
+    isLoadingSubCreds = true;
+    try {
+      const result = await credentialApi.fetchSubCredentials(
+        accessToken,
+        credentialId,
+      );
+      subCredentials = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to fetch sub-credentials:", err);
+      subCredentials = [];
+    } finally {
+      isLoadingSubCreds = false;
+    }
+  }
+
+  function openAddSubCred(
+    fieldId: string,
+    subFields: import("$lib/optima-api/modules/credentialTypes").CredentialTypeField[],
+  ) {
+    addingSubCred = fieldId;
+    newSubCredName = "";
+    newSubCredFields = {};
+    subCredError = "";
+    (subFields ?? []).forEach((sf) => {
+      newSubCredFields[sf.id] = "";
+    });
+  }
+
+  function cancelAddSubCred() {
+    addingSubCred = null;
+    newSubCredName = "";
+    newSubCredFields = {};
+    subCredError = "";
+  }
+
+  async function submitSubCred(fieldId: string) {
+    if (!selectedCredential || !accessToken || !newSubCredName.trim()) return;
+    isSubmittingSubCred = true;
+    subCredError = "";
+    try {
+      await credentialApi.addSubCredential(accessToken, selectedCredential.id, {
+        fieldId,
+        name: newSubCredName.trim(),
+        fields: Object.entries(newSubCredFields).map(([fid, val]) => ({
+          fieldId: fid,
+          value: val,
+        })),
+      });
+      cancelAddSubCred();
+      await loadSubCredentials(selectedCredential.id);
+    } catch (err) {
+      subCredError =
+        err instanceof Error ? err.message : "Failed to add sub-credential";
+      console.error("Failed to add sub-credential:", err);
+    } finally {
+      isSubmittingSubCred = false;
+    }
+  }
+
+  async function deleteSubCred(subId: string) {
+    if (!selectedCredential || !accessToken) return;
+    deletingSubCredId = subId;
+    try {
+      await credentialApi.removeSubCredential(
+        accessToken,
+        selectedCredential.id,
+        subId,
+      );
+      await loadSubCredentials(selectedCredential.id);
+    } catch (err) {
+      console.error("Failed to delete sub-credential:", err);
+    } finally {
+      deletingSubCredId = null;
+    }
+  }
+
+  function selectCredential(cred: Credential) {
+    if (selectedCredential?.id === cred.id) {
+      selectedCredential = null;
+      isEditingCredential = false;
+      subCredentials = [];
+    } else {
+      selectedCredential = cred;
+      credFadeKey++;
+      revealedCredFields = {};
+      loadingCredFields = {};
+      isEditingCredential = false;
+      subCredentials = [];
+      cancelAddSubCred();
+      // Clear any running auto-hide timers
+      Object.values(credFieldTimers).forEach(clearTimeout);
+      credFieldTimers = {};
+      // Check if this credential has multi_credential fields and fetch sub-credentials
+      const hasMultiCredFields = getMultiCredFields(cred).length > 0;
+      if (hasMultiCredFields) {
+        loadSubCredentials(cred.id);
+      }
+    }
+  }
+
+  /** Get the multi_credential field definitions for a credential from its type */
+  function getMultiCredFields(
+    cred: Credential,
+  ): import("$lib/optima-api/modules/credentialTypes").CredentialTypeField[] {
+    const ct = credentialTypes.find((t) => t.id === cred.typeId);
+    if (!ct) return [];
+    return ct.fields.filter((f) => f.valueType === "multi_credential");
+  }
+
+  /** Composite key for sub-credential field reveal state */
+  function subCredKey(subCredId: string, fieldId: string): string {
+    return `sc:${subCredId}:${fieldId}`;
+  }
+
+  function autoHideCredField(fieldId: string) {
+    // Clear any existing timer for this field
+    if (credFieldTimers[fieldId]) clearTimeout(credFieldTimers[fieldId]);
+
+    credFieldTimers[fieldId] = setTimeout(() => {
+      revealedCredFields[fieldId] = false;
+      revealedCredFields = revealedCredFields;
+      // Clear cached value so next reveal re-fetches
+      delete fetchedSecureValues[fieldId];
+      fetchedSecureValues = fetchedSecureValues;
+      delete credFieldTimers[fieldId];
+    }, 30_000);
+  }
+
+  async function toggleCredField(
+    credentialId: string,
+    fieldId: string,
+    isSecure: boolean,
+    plaintextValue?: string,
+    stateKey?: string,
+  ) {
+    const key = stateKey ?? fieldId;
+    // If already revealed, just hide it and clear cache + timer
+    if (revealedCredFields[key]) {
+      revealedCredFields[key] = false;
+      revealedCredFields = revealedCredFields;
+      delete fetchedSecureValues[key];
+      fetchedSecureValues = fetchedSecureValues;
+      if (credFieldTimers[key]) {
+        clearTimeout(credFieldTimers[key]);
+        delete credFieldTimers[key];
+      }
+      return;
+    }
+
+    // Show loading spinner
+    loadingCredFields[key] = true;
+    loadingCredFields = loadingCredFields;
+
+    const minDelay = new Promise((r) => setTimeout(r, 500));
+
+    try {
+      if (isSecure) {
+        // Actually secure — fetch decrypted value from the API
+        const [response] = await Promise.all([
+          fetch(
+            `/companies/${data.company?.id}/secure-value?credentialId=${encodeURIComponent(credentialId)}&fieldId=${encodeURIComponent(fieldId)}`,
+          ),
+          minDelay,
+        ]);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const result = await response.json();
+        fetchedSecureValues[key] =
+          result?.data?.value ?? result?.data ?? result?.value ?? result ?? "";
+      } else {
+        // Not actually secure — value is already available, just simulate the reveal
+        await minDelay;
+        fetchedSecureValues[key] = plaintextValue ?? "";
+      }
+      fetchedSecureValues = fetchedSecureValues;
+      revealedCredFields[key] = true;
+      revealedCredFields = revealedCredFields;
+      // Start 30-second auto-hide timer
+      autoHideCredField(key);
+    } catch (err) {
+      console.error("Failed to fetch secure value:", err);
+      fetchedSecureValues[key] = "Error loading value";
+      fetchedSecureValues = fetchedSecureValues;
+      revealedCredFields[key] = true;
+      revealedCredFields = revealedCredFields;
+    } finally {
+      loadingCredFields[key] = false;
+      loadingCredFields = loadingCredFields;
+    }
+  }
+
+  // Configurations split-view state
+  let selectedConfig: (typeof configurations)[number] | null = null;
+  let configFadeKey = 0;
+
+  // Track which password fields are revealed (by question id)
+  let revealedPasswords: Record<number, boolean> = {};
+
+  function togglePassword(questionId: number) {
+    revealedPasswords[questionId] = !revealedPasswords[questionId];
+    revealedPasswords = revealedPasswords; // trigger reactivity
+  }
+
+  function selectConfig(config: (typeof configurations)[number]) {
+    if (selectedConfig?.id === config.id) {
+      // Clicking the active config collapses back to full list
+      selectedConfig = null;
+    } else {
+      selectedConfig = config;
+      configFadeKey++; // bump key to trigger fade animation
+      revealedPasswords = {}; // reset password visibility
+    }
+  }
+
+  function companyInitials(name: string): string {
+    return name
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0])
+      .join("")
+      .toUpperCase();
+  }
+
+  function statusClass(status?: string): string {
+    if (!status) return "neutral";
+    const s = status.toLowerCase();
+    if (s === "active") return "active";
+    if (s === "inactive" || s === "disabled") return "inactive";
+    if (s === "pending") return "pending";
+    return "neutral";
+  }
+
+  function configStatusClass(statusName?: string): string {
+    if (!statusName) return "neutral";
+    const s = statusName.toLowerCase();
+    if (s === "active") return "active";
+    if (s === "inactive" || s === "automate inactive") return "inactive";
+    if (s === "reserved") return "reserved";
+    if (s === "provisioning" || s === "pending approval") return "pending";
+    return "neutral";
+  }
+
+  function formatDate(dateStr?: string): string {
+    if (!dateStr) return "";
+    try {
+      return new Date(dateStr).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+    } catch {
+      return "";
+    }
+  }
+
+  function formatPhone(phone?: string): string {
+    if (!phone) return "";
+    // Strip everything except digits
+    const digits = phone.replace(/\D/g, "");
+    // 10-digit: (555) 012-3456
+    if (digits.length === 10) {
+      return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+    }
+    // 11-digit starting with 1: +1 (555) 012-3456
+    if (digits.length === 11 && digits.startsWith("1")) {
+      return `+1 (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`;
+    }
+    // Anything else: return as-is
+    return phone;
+  }
+
+  function formatValueTypeLabel(vt: string): string {
+    return vt
+      .split("_")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ");
+  }
+
+  function formatAddress(c: NonNullable<typeof company>): string[] {
+    // Prefer the nested cw_Data.address structure returned when includeAddress=true
+    const addr = c.cw_Data?.address;
+    if (addr) {
+      const lines: string[] = [];
+      if (addr.line1) lines.push(addr.line1);
+      if (addr.line2) lines.push(addr.line2);
+      const cityStateZip = [addr.city, addr.state, addr.zip]
+        .filter(Boolean)
+        .join(", ");
+      if (cityStateZip) lines.push(cityStateZip);
+      if (addr.country) lines.push(addr.country);
+      return lines;
+    }
+    // Fallback to flat fields
+    const lines: string[] = [];
+    if (c.address) lines.push(c.address);
+    const cityStateZip = [c.city, c.state, c.zip].filter(Boolean).join(", ");
+    if (cityStateZip) lines.push(cityStateZip);
+    if (c.country) lines.push(c.country);
+    return lines;
+  }
+</script>
+
+<svelte:window
+  on:click={() => {
+    openCredMenuId = null;
+    isUnifiSiteMenuOpen = false;
+  }}
+/>
+
+<svelte:head>
+  <title>{company?.name ?? "Company"} — Project Optima</title>
+</svelte:head>
+
+<div class="company-detail-page">
+  <!-- Left pane (1/4) — Company overview -->
+  <div
+    class="company-detail-left"
+    class:mobile-collapsed={isMobile && mobileActiveTab !== null}
+  >
+    <div class="detail-pane-body">
+      <button
+        class="back-btn"
+        on:click={() => goto("/companies")}
+        aria-label="Back to companies"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          width="16"
+          height="16"
+        >
+          <path d="M19 12H5M12 19l-7-7 7-7" />
+        </svg>
+      </button>
+      {#if company}
+        <!-- Avatar + name + status -->
+        <div class="profile-header">
+          <div class="profile-avatar">
+            <span class="profile-initials">{companyInitials(company.name)}</span
+            >
+          </div>
+          <h3 class="profile-name">{company.name}</h3>
+          {#if company.status}
+            <span class="profile-status {statusClass(company.status)}"
+              >{company.status}</span
+            >
+          {/if}
+        </div>
+
+        <!-- Info rows -->
+        <div class="profile-info">
+          {#if company.cw_Data?.primaryContact}
+            {@const contact = company.cw_Data.primaryContact}
+            <div class="primary-contact-section">
+              <div class="primary-contact-header">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="14"
+                  height="14"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+                <span class="primary-contact-label">Primary Contact</span>
+              </div>
+              <div class="primary-contact-card">
+                <div class="primary-contact-name">
+                  {[contact.firstName, contact.lastName]
+                    .filter(Boolean)
+                    .join(" ")}
+                  {#if contact.inactive}
+                    <span class="primary-contact-inactive">Inactive</span>
+                  {/if}
+                </div>
+                {#if contact.title}
+                  <div class="primary-contact-title">{contact.title}</div>
+                {/if}
+                {#if contact.email}
+                  <div class="primary-contact-detail">
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      width="12"
+                      height="12"
+                    >
+                      <rect x="2" y="4" width="20" height="16" rx="2" />
+                      <path d="M22 7l-10 7L2 7" />
+                    </svg>
+                    <a
+                      href="mailto:{contact.email}"
+                      class="primary-contact-link"
+                      on:click|stopPropagation>{contact.email}</a
+                    >
+                  </div>
+                {/if}
+                {#if contact.phone}
+                  <div class="primary-contact-detail">
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                      />
+                    </svg>
+                    <span>{formatPhone(contact.phone)}</span>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/if}
+
+          {#if company.type}
+            <div class="info-row">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="info-icon"
+              >
+                <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
+                <path d="M16 3h-8l-2 4h12z" />
+              </svg>
+              <div class="info-content">
+                <span class="info-label">Type</span>
+                <span class="info-value">{company.type}</span>
+              </div>
+            </div>
+          {/if}
+
+          {#if company.contactEmail}
+            <div class="info-row">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="info-icon"
+              >
+                <rect x="2" y="4" width="20" height="16" rx="2" />
+                <path d="M22 7l-10 7L2 7" />
+              </svg>
+              <div class="info-content">
+                <span class="info-label">Email</span>
+                <span class="info-value">{company.contactEmail}</span>
+              </div>
+            </div>
+          {/if}
+
+          {#if company.contactPhone}
+            <div class="info-row">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="info-icon"
+              >
+                <path
+                  d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                />
+              </svg>
+              <div class="info-content">
+                <span class="info-label">Phone</span>
+                <span class="info-value"
+                  >{formatPhone(company.contactPhone)}</span
+                >
+              </div>
+            </div>
+          {/if}
+
+          {#if permissions["company.fetch.address"] && formatAddress(company).length > 0}
+            <div class="info-row">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="info-icon"
+              >
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                <circle cx="12" cy="10" r="3" />
+              </svg>
+              <div class="info-content">
+                <span class="info-label">Address</span>
+                <span class="info-value address-multiline">
+                  {#each formatAddress(company) as line}
+                    {line}<br />
+                  {/each}
+                </span>
+              </div>
+            </div>
+          {/if}
+
+          {#if formatDate(company.createdAt)}
+            <div class="info-row">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="info-icon"
+              >
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                <line x1="16" y1="2" x2="16" y2="6" />
+                <line x1="8" y1="2" x2="8" y2="6" />
+                <line x1="3" y1="10" x2="21" y2="10" />
+              </svg>
+              <div class="info-content">
+                <span class="info-label">Created</span>
+                <span class="info-value">{formatDate(company.createdAt)}</span>
+              </div>
+            </div>
+          {/if}
+
+          {#if formatDate(company.updatedAt)}
+            <div class="info-row">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="info-icon"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+              </svg>
+              <div class="info-content">
+                <span class="info-label">Updated</span>
+                <span class="info-value">{formatDate(company.updatedAt)}</span>
+              </div>
+            </div>
+          {/if}
+        </div>
+
+        {#if company.identifier || company.id}
+          <div class="side-pane-identifier">
+            {company.identifier || company.id}
+          </div>
+        {/if}
+      {:else}
+        <div class="profile-empty">
+          <p>Company not found.</p>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Mobile vertical nav menu (only visible on mobile when no tab selected) -->
+  {#if isMobile && mobileActiveTab === null}
+    <div class="mobile-nav-menu">
+      {#each tabs as tab}
+        <button
+          class="mobile-nav-item"
+          on:click={() => selectMobileTab(tab)}
+          type="button"
+        >
+          <span class="mobile-nav-icon">
+            {#if tab === "Credentials"}
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="20"
+                height="20"
+              >
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path
+                  d="M7 11V7a5 5 0 0 1 10 0v4"
+                />
+              </svg>
+            {:else if tab === "Configurations"}
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="20"
+                height="20"
+              >
+                <circle cx="12" cy="12" r="3" /><path
+                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+                />
+              </svg>
+            {:else if tab === "UniFi"}
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="20"
+                height="20"
+              >
+                <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                <path d="M2 17l10 5 10-5" />
+                <path d="M2 12l10 5 10-5" />
+              </svg>
+            {:else if tab === "Contacts"}
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="20"
+                height="20"
+              >
+                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" /><circle
+                  cx="9"
+                  cy="7"
+                  r="4"
+                /><path d="M23 21v-2a4 4 0 00-3-3.87" /><path
+                  d="M16 3.13a4 4 0 010 7.75"
+                />
+              </svg>
+            {:else}
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="20"
+                height="20"
+              >
+                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+              </svg>
+            {/if}
+          </span>
+          <span class="mobile-nav-label">{tab}</span>
+          {#if tab === "Credentials" && credentials.length > 0}
+            <span class="mobile-nav-badge">{credentials.length}</span>
+          {/if}
+          {#if tab === "Configurations" && configurations.length > 0}
+            <span class="mobile-nav-badge">{configurations.length}</span>
+          {/if}
+          {#if tab === "UniFi" && unifiSites.length > 0}
+            <span class="mobile-nav-badge">{unifiSites.length}</span>
+          {/if}
+          {#if tab === "Contacts" && (company?.cw_Data?.allContacts?.length ?? 0) > 0}
+            <span class="mobile-nav-badge"
+              >{company?.cw_Data?.allContacts?.length}</span
+            >
+          {/if}
+          <svg
+            class="mobile-nav-chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="16"
+            height="16"
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  <!-- Right pane (3/4) -->
+  <div
+    class="company-detail-right"
+    class:mobile-hidden={isMobile && mobileActiveTab === null}
+  >
+    <!-- Mobile content header with back button -->
+    {#if isMobile && mobileActiveTab !== null}
+      <div class="mobile-content-header">
+        <button
+          class="mobile-back-btn"
+          on:click={mobileBack}
+          type="button"
+          aria-label="Back to menu"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="18"
+            height="18"
+          >
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <h3 class="mobile-content-title">{mobileActiveTab}</h3>
+        {#if mobileActiveTab === "Credentials"}
+          <button
+            type="button"
+            class="create-credential-btn mobile-create-btn"
+            on:click={() => (isCreateCredentialOpen = true)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"
+            >
+              <line x1="12" y1="5" x2="12" y2="19" /><line
+                x1="5"
+                y1="12"
+                x2="19"
+                y2="12"
+              />
+            </svg>
+            New
+          </button>
+        {/if}
+        {#if mobileActiveTab === "UniFi"}
+          <button
+            type="button"
+            class="create-credential-btn mobile-create-btn"
+            on:click={() => (isLinkUnifiOpen = true)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"
+            >
+              <path
+                d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+              />
+              <path
+                d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+              />
+            </svg>
+            Link
+          </button>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="tab-bar" role="tablist">
+      {#each tabs as tab}
+        <button
+          class="tab-btn"
+          class:active={activeTab === tab}
+          role="tab"
+          aria-selected={activeTab === tab}
+          on:click={() => (activeTab = tab)}
+        >
+          {tab}
+          {#if tab === "Credentials" && credentials.length > 0}
+            <span class="tab-count-badge">{credentials.length}</span>
+          {/if}
+          {#if tab === "Configurations" && configurations.length > 0}
+            <span class="tab-count-badge">{configurations.length}</span>
+          {/if}
+          {#if tab === "UniFi" && unifiSites.length > 0}
+            <span class="tab-count-badge">{unifiSites.length}</span>
+          {/if}
+        </button>
+      {/each}
+      {#if activeTab === "Credentials"}
+        <div class="tab-bar-spacer"></div>
+        <button
+          type="button"
+          class="create-credential-btn"
+          on:click={() => (isCreateCredentialOpen = true)}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="14"
+            height="14"
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Create Credential
+        </button>
+      {/if}
+      {#if activeTab === "UniFi" && !selectedUnifiSite}
+        <div class="tab-bar-spacer"></div>
+        <button
+          type="button"
+          class="create-credential-btn"
+          on:click={() => (isLinkUnifiOpen = true)}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            width="14"
+            height="14"
+          >
+            <path
+              d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+            />
+            <path
+              d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+            />
+          </svg>
+          Link Site
+        </button>
+      {/if}
+    </div>
+    <div class="detail-pane-body">
+      {#if activeTab === "Overview"}
+        <div class="overview-tab">
+          <div class="overview-section">
+            <h3 class="overview-section-title">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="16"
+                height="16"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+              Company Details
+            </h3>
+            <div class="overview-details-grid">
+              <div class="overview-detail-item">
+                <span class="overview-detail-label">Name</span>
+                <span class="overview-detail-value">{company?.name ?? "—"}</span
+                >
+              </div>
+              <div class="overview-detail-item">
+                <span class="overview-detail-label">ID</span>
+                <span class="overview-detail-value mono"
+                  >{company?.id ?? "—"}</span
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="overview-section">
+            <h3 class="overview-section-title">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="16"
+                height="16"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+              At a Glance
+            </h3>
+            <div class="overview-stats-grid">
+              <div class="overview-stat-card">
+                <span class="overview-stat-value">{credentials.length}</span>
+                <span class="overview-stat-label">Credentials</span>
+              </div>
+              <div class="overview-stat-card">
+                <span class="overview-stat-value">{configurations.length}</span>
+                <span class="overview-stat-label">Configurations</span>
+              </div>
+              <div class="overview-stat-card">
+                <span class="overview-stat-value">{unifiSites.length}</span>
+                <span class="overview-stat-label">UniFi Sites</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="overview-section">
+            <h3 class="overview-section-title">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="16"
+                height="16"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 6v6l4 2" />
+              </svg>
+              Recent Activity
+            </h3>
+            <p class="overview-placeholder">Activity feed coming soon.</p>
+          </div>
+        </div>
+      {:else if activeTab === "Credentials"}
+        <CreateCredentialModal
+          bind:isOpen={isCreateCredentialOpen}
+          companyId={company?.id ?? ""}
+          accessToken={accessToken ?? ""}
+          {credentialTypes}
+          onSuccess={() => {
+            isCreateCredentialOpen = false;
+            invalidateAll();
+          }}
+        />
+
+        <!-- Delete confirmation dialog -->
+        {#if credToDelete}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <div class="delete-overlay" on:click={cancelDelete}>
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <div class="delete-dialog" on:click|stopPropagation>
+              <div class="delete-dialog-icon">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="28"
+                  height="28"
+                >
+                  <polyline points="3 6 5 6 21 6" />
+                  <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
+                  <path d="M10 11v6M14 11v6" />
+                  <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+                </svg>
+              </div>
+              <h3 class="delete-dialog-title">Delete Credential</h3>
+              <p class="delete-dialog-msg">
+                Are you sure you want to delete
+                <strong>{credToDelete.name}</strong>? This action cannot be
+                undone.
+              </p>
+              {#if deleteError}
+                <p class="delete-dialog-error">{deleteError}</p>
+              {/if}
+              <div class="delete-dialog-actions">
+                <button
+                  type="button"
+                  class="delete-dialog-btn cancel"
+                  on:click={cancelDelete}
+                  disabled={isDeleting}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  class="delete-dialog-btn confirm"
+                  on:click={confirmDelete}
+                  disabled={isDeleting}
+                >
+                  {#if isDeleting}
+                    Deleting…
+                  {:else}
+                    Delete
+                  {/if}
+                </button>
+              </div>
+            </div>
+          </div>
+        {/if}
+        {#if credentials.length === 0}
+          <div class="tab-empty">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tab-empty-icon"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+            <p>No credentials found for this company</p>
+            <button
+              type="button"
+              class="create-credential-btn"
+              on:click={() => (isCreateCredentialOpen = true)}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="14"
+                height="14"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Create Credential
+            </button>
+          </div>
+        {:else}
+          <div
+            class="config-split"
+            class:expanded={selectedCredential !== null && !isMobile}
+          >
+            <!-- Left side: credential buttons -->
+            <div
+              class="config-list"
+              class:collapsed={selectedCredential !== null && !isMobile}
+            >
+              {#each credentials as cred (cred.id)}
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div
+                  class="config-item"
+                  class:selected={selectedCredential?.id === cred.id}
+                  on:click={() => selectCredential(cred)}
+                  on:keydown={(e) =>
+                    e.key === "Enter" && selectCredential(cred)}
+                  role="button"
+                  tabindex="0"
+                >
+                  <div class="config-item-header">
+                    <div class="config-name-group">
+                      <span class="config-status-dot dot-active" title="Active"
+                      ></span>
+                      <span class="config-name">{cred.name}</span>
+                    </div>
+                    <div class="config-header-badges">
+                      {#if cred.type?.name && (!selectedCredential || isMobile)}
+                        <span class="config-type-badge">{cred.type.name}</span>
+                      {/if}
+                      {#if !selectedCredential || isMobile}
+                        <div class="cred-menu-wrap">
+                          <button
+                            type="button"
+                            class="cred-menu-btn"
+                            aria-label="Credential actions"
+                            on:click|stopPropagation={() =>
+                              toggleCredMenu(cred.id)}
+                          >
+                            <svg
+                              viewBox="0 0 16 16"
+                              fill="currentColor"
+                              width="14"
+                              height="14"
+                            >
+                              <circle cx="8" cy="2.5" r="1.5" />
+                              <circle cx="8" cy="8" r="1.5" />
+                              <circle cx="8" cy="13.5" r="1.5" />
+                            </svg>
+                          </button>
+                          {#if openCredMenuId === cred.id}
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <div
+                              class="cred-dropdown-menu"
+                              on:click|stopPropagation
+                            >
+                              <button
+                                type="button"
+                                class="cred-dropdown-item"
+                                on:click|stopPropagation={() =>
+                                  handleEditCredential(cred)}
+                              >
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="13"
+                                  height="13"
+                                >
+                                  <path
+                                    d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"
+                                  />
+                                  <path
+                                    d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
+                                  />
+                                </svg>
+                                Edit
+                              </button>
+                              <div class="cred-dropdown-sep"></div>
+                              <button
+                                type="button"
+                                class="cred-dropdown-item cred-dropdown-item-danger"
+                                on:click|stopPropagation={() =>
+                                  handleDeleteCredential(cred)}
+                              >
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="13"
+                                  height="13"
+                                >
+                                  <polyline points="3 6 5 6 21 6" />
+                                  <path
+                                    d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                                  />
+                                  <path d="M10 11v6M14 11v6" />
+                                  <path
+                                    d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"
+                                  />
+                                </svg>
+                                Delete
+                              </button>
+                            </div>
+                          {/if}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                  {#if !selectedCredential || isMobile}
+                    {#if cred.type?.name}
+                      <p class="config-description">{cred.type.name}</p>
+                    {/if}
+                    {#if cred.fields.length > 0}
+                      <span class="config-date">
+                        {cred.fields.length} field{cred.fields.length === 1
+                          ? ""
+                          : "s"}
+                      </span>
+                    {/if}
+                    {#if formatDate(cred.updatedAt) || formatDate(cred.createdAt)}
+                      <span class="config-date">
+                        {#if formatDate(cred.updatedAt)}
+                          Updated {formatDate(cred.updatedAt)}
+                        {:else}
+                          Created {formatDate(cred.createdAt)}
+                        {/if}
+                      </span>
+                    {/if}
+                  {/if}
+                </div>
+              {/each}
+            </div>
+
+            <!-- Right side: credential detail panel -->
+            {#if selectedCredential}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <div
+                class="bottom-sheet-overlay"
+                class:active={selectedCredential !== null}
+                on:click={() => {
+                  selectedCredential = null;
+                  isEditingCredential = false;
+                }}
+              >
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <div class="bottom-sheet-panel" on:click|stopPropagation>
+                  <div class="bottom-sheet-handle"></div>
+                  <div class="bottom-sheet-body">
+                    <div class="config-detail-panel">
+                      {#key credFadeKey}
+                        <div class="config-detail-content">
+                          <div class="config-detail-header">
+                            <div class="config-detail-header-left">
+                              {#if isEditingCredential}
+                                <input
+                                  class="cred-edit-name-input"
+                                  type="text"
+                                  bind:value={editCredName}
+                                  placeholder="Credential name"
+                                />
+                              {:else}
+                                <h3 class="config-detail-title">
+                                  {selectedCredential.name}
+                                </h3>
+                              {/if}
+                              <div class="config-detail-meta-badges">
+                                {#if selectedCredential.type?.name}
+                                  <span class="config-badge type">
+                                    {selectedCredential.type.name}
+                                  </span>
+                                {/if}
+                              </div>
+                            </div>
+                            <div class="config-detail-header-actions">
+                              {#if isEditingCredential}
+                                <button
+                                  class="cred-action-btn cred-action-save"
+                                  on:click={saveEditCredential}
+                                  disabled={isSavingCredential ||
+                                    !editCredName.trim()}
+                                  aria-label="Save changes"
+                                  type="button"
+                                  title="Save changes"
+                                >
+                                  {#if isSavingCredential}
+                                    <svg
+                                      viewBox="0 0 24 24"
+                                      width="14"
+                                      height="14"
+                                      class="spin-icon"
+                                    >
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="10"
+                                        stroke="currentColor"
+                                        stroke-width="3"
+                                        fill="none"
+                                        opacity="0.25"
+                                      />
+                                      <path
+                                        d="M12 2a10 10 0 0 1 10 10"
+                                        stroke="currentColor"
+                                        stroke-width="3"
+                                        fill="none"
+                                        stroke-linecap="round"
+                                      />
+                                    </svg>
+                                  {:else}
+                                    <svg
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      width="14"
+                                      height="14"
+                                    >
+                                      <polyline points="20 6 9 17 4 12" />
+                                    </svg>
+                                  {/if}
+                                </button>
+                              {:else}
+                                <button
+                                  class="cred-action-btn cred-action-edit"
+                                  on:click={() =>
+                                    handleEditCredential(selectedCredential)}
+                                  aria-label="Edit credential"
+                                  type="button"
+                                  title="Edit credential"
+                                >
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="14"
+                                    height="14"
+                                  >
+                                    <path
+                                      d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"
+                                    />
+                                    <path
+                                      d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
+                                    />
+                                  </svg>
+                                </button>
+                                <button
+                                  class="cred-action-btn cred-action-delete"
+                                  on:click={() =>
+                                    handleDeleteCredential(selectedCredential)}
+                                  aria-label="Delete credential"
+                                  type="button"
+                                  title="Delete credential"
+                                >
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="14"
+                                    height="14"
+                                  >
+                                    <polyline points="3 6 5 6 21 6" />
+                                    <path
+                                      d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                                    />
+                                    <path d="M10 11v6M14 11v6" />
+                                    <path
+                                      d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"
+                                    />
+                                  </svg>
+                                </button>
+                              {/if}
+                              <button
+                                class="config-detail-close"
+                                on:click={() => {
+                                  if (isEditingCredential) {
+                                    cancelEditCredential();
+                                  } else {
+                                    selectedCredential = null;
+                                  }
+                                }}
+                                aria-label={isEditingCredential
+                                  ? "Cancel editing"
+                                  : "Close detail view"}
+                                type="button"
+                              >
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="16"
+                                  height="16"
+                                >
+                                  <path d="M18 6L6 18M6 6l12 12" />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+
+                          <!-- Credential fields -->
+                          {#if (selectedCredential.fields && selectedCredential.fields.length > 0) || isEditingCredential || selectedCredential.notes}
+                            <div class="config-questions">
+                              <!-- Notes -->
+                              {#if isEditingCredential || selectedCredential.notes}
+                                <div class="cred-notes-section">
+                                  <h4 class="config-section-title">
+                                    <svg
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      width="16"
+                                      height="16"
+                                    >
+                                      <path
+                                        d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
+                                      />
+                                      <polyline points="14 2 14 8 20 8" />
+                                      <line x1="16" y1="13" x2="8" y2="13" />
+                                      <line x1="16" y1="17" x2="8" y2="17" />
+                                      <polyline points="10 9 9 9 8 9" />
+                                    </svg>
+                                    Notes
+                                  </h4>
+                                  {#if isEditingCredential}
+                                    <textarea
+                                      class="cred-edit-notes-input"
+                                      bind:value={editCredNotes}
+                                      placeholder="Add notes…"
+                                      rows="3"
+                                    ></textarea>
+                                  {:else}
+                                    <p class="cred-notes-text">
+                                      {selectedCredential.notes}
+                                    </p>
+                                  {/if}
+                                </div>
+                              {/if}
+                              <h4 class="config-section-title">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="16"
+                                  height="16"
+                                >
+                                  <path
+                                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
+                                  />
+                                  <rect
+                                    x="9"
+                                    y="3"
+                                    width="6"
+                                    height="4"
+                                    rx="1"
+                                  />
+                                </svg>
+                                Credential Fields
+                              </h4>
+                              <div class="questions-grid">
+                                {#each selectedCredential.fields as field (field.id)}
+                                  {#if field.valueType === "multi_credential"}
+                                    <!-- Skip multi_credential fields in the regular grid -->
+                                  {:else}
+                                    <div
+                                      class="question-row"
+                                      class:has-answer={!!field.value}
+                                    >
+                                      <div class="cred-field-label-row">
+                                        <span class="question-label"
+                                          >{field.name}</span
+                                        >
+                                        {#if field.required && isEditingCredential}
+                                          <span
+                                            class="cred-required-star"
+                                            title="Required">*</span
+                                          >
+                                        {/if}
+                                        {#if field.secure}
+                                          <svg
+                                            class="cred-lock-icon"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="11"
+                                            height="11"
+                                            aria-label="Secure"
+                                          >
+                                            <title>Secure</title>
+                                            <rect
+                                              x="3"
+                                              y="11"
+                                              width="18"
+                                              height="11"
+                                              rx="2"
+                                              ry="2"
+                                            />
+                                            <path
+                                              d="M7 11V7a5 5 0 0 1 10 0v4"
+                                            />
+                                          </svg>
+                                        {/if}
+                                      </div>
+                                      <div class="question-value-wrap">
+                                        {#if isEditingCredential}
+                                          <input
+                                            class="cred-edit-field-input"
+                                            type={field.valueType === "email"
+                                              ? "email"
+                                              : field.valueType === "url"
+                                                ? "url"
+                                                : "text"}
+                                            bind:value={
+                                              editCredFields[field.id]
+                                            }
+                                            placeholder={field.secure
+                                              ? "Leave blank to keep existing"
+                                              : `Enter ${field.name}`}
+                                          />
+                                        {:else if field.secure || field.valueType === "password" || field.valueType === "generic_secret" || field.valueType === "bitlocker_key"}
+                                          <span
+                                            class="question-value password-value"
+                                          >
+                                            {#if loadingCredFields[field.id]}
+                                              <span
+                                                class="cred-secure-spinner"
+                                                aria-label="Loading"
+                                              >
+                                                <svg
+                                                  viewBox="0 0 24 24"
+                                                  width="14"
+                                                  height="14"
+                                                  class="spin-icon"
+                                                >
+                                                  <circle
+                                                    cx="12"
+                                                    cy="12"
+                                                    r="10"
+                                                    stroke="currentColor"
+                                                    stroke-width="3"
+                                                    fill="none"
+                                                    opacity="0.25"
+                                                  />
+                                                  <path
+                                                    d="M12 2a10 10 0 0 1 10 10"
+                                                    stroke="currentColor"
+                                                    stroke-width="3"
+                                                    fill="none"
+                                                    stroke-linecap="round"
+                                                  />
+                                                </svg>
+                                              </span>
+                                            {:else if revealedCredFields[field.id]}
+                                              <span
+                                                class="cred-revealed-value {field.valueType ===
+                                                  'bitlocker_key' ||
+                                                field.valueType ===
+                                                  'license_key'
+                                                  ? 'mono'
+                                                  : ''}"
+                                              >
+                                                {fetchedSecureValues[
+                                                  field.id
+                                                ] || "—"}
+                                              </span>
+                                            {:else}
+                                              ••••••••
+                                            {/if}
+                                          </span>
+                                          {#if (!field.secure || permissions["credential.secure_values.read"]) && !loadingCredFields[field.id]}
+                                            {#if revealedCredFields[field.id]}
+                                              <span
+                                                class="cred-countdown-wrap"
+                                                title="Auto-hides in 30 seconds"
+                                              >
+                                                <svg
+                                                  class="cred-countdown-ring"
+                                                  viewBox="0 0 20 20"
+                                                  width="20"
+                                                  height="20"
+                                                >
+                                                  <circle
+                                                    cx="10"
+                                                    cy="10"
+                                                    r="8"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    stroke-width="2"
+                                                    opacity="0.1"
+                                                  />
+                                                  <circle
+                                                    cx="10"
+                                                    cy="10"
+                                                    r="8"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    stroke-width="2"
+                                                    stroke-linecap="round"
+                                                    stroke-dasharray="50.265"
+                                                    stroke-dashoffset="0"
+                                                    class="cred-countdown-arc"
+                                                  />
+                                                </svg>
+                                              </span>
+                                            {/if}
+                                            <button
+                                              class="password-toggle"
+                                              on:click={() =>
+                                                toggleCredField(
+                                                  selectedCredential?.id ?? "",
+                                                  field.id,
+                                                  field.secure,
+                                                  field.value,
+                                                )}
+                                              type="button"
+                                              aria-label={revealedCredFields[
+                                                field.id
+                                              ]
+                                                ? "Hide value"
+                                                : "Show value"}
+                                            >
+                                              {#if revealedCredFields[field.id]}
+                                                <svg
+                                                  viewBox="0 0 24 24"
+                                                  fill="none"
+                                                  stroke="currentColor"
+                                                  stroke-width="2"
+                                                  width="14"
+                                                  height="14"
+                                                >
+                                                  <path
+                                                    d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                                  />
+                                                  <path
+                                                    d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                                  />
+                                                  <path
+                                                    d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                                  />
+                                                  <line
+                                                    x1="1"
+                                                    y1="1"
+                                                    x2="23"
+                                                    y2="23"
+                                                  />
+                                                </svg>
+                                              {:else}
+                                                <svg
+                                                  viewBox="0 0 24 24"
+                                                  fill="none"
+                                                  stroke="currentColor"
+                                                  stroke-width="2"
+                                                  width="14"
+                                                  height="14"
+                                                >
+                                                  <path
+                                                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                                  />
+                                                  <circle
+                                                    cx="12"
+                                                    cy="12"
+                                                    r="3"
+                                                  />
+                                                </svg>
+                                              {/if}
+                                            </button>
+                                          {/if}
+                                        {:else if field.valueType === "url" && field.value}
+                                          <a
+                                            class="question-value cred-url-value"
+                                            href={field.value}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            on:click|stopPropagation
+                                          >
+                                            {field.value}
+                                          </a>
+                                        {:else if field.valueType === "email" && field.value}
+                                          <a
+                                            class="question-value cred-email-value"
+                                            href="mailto:{field.value}"
+                                            on:click|stopPropagation
+                                          >
+                                            {field.value}
+                                          </a>
+                                        {:else if field.valueType === "ip_address" && field.value}
+                                          <span class="question-value mono">
+                                            {field.value}
+                                          </span>
+                                        {:else if field.valueType === "license_key" && field.value}
+                                          <span class="question-value mono">
+                                            {field.value}
+                                          </span>
+                                        {:else}
+                                          <span class="question-value">
+                                            {field.value || "—"}
+                                          </span>
+                                        {/if}
+                                      </div>
+                                    </div>
+                                  {/if}
+                                {/each}
+                              </div>
+
+                              <!-- Sub-credentials for multi_credential fields -->
+                              {#if selectedCredential && getMultiCredFields(selectedCredential).length > 0}
+                                {#each getMultiCredFields(selectedCredential) as mcField (mcField.id)}
+                                  <div class="sub-creds-section">
+                                    <div class="sub-creds-header">
+                                      <h4 class="sub-creds-title">
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="14"
+                                          height="14"
+                                        >
+                                          <rect
+                                            x="2"
+                                            y="3"
+                                            width="20"
+                                            height="6"
+                                            rx="1"
+                                          />
+                                          <rect
+                                            x="2"
+                                            y="15"
+                                            width="20"
+                                            height="6"
+                                            rx="1"
+                                          />
+                                          <path d="M12 9v6" />
+                                        </svg>
+                                        {mcField.name}
+                                        {#if subCredentials.length > 0}
+                                          <span class="sub-creds-count"
+                                            >{subCredentials.length}</span
+                                          >
+                                        {/if}
+                                      </h4>
+                                      {#if !isEditingCredential && addingSubCred !== mcField.id}
+                                        <button
+                                          type="button"
+                                          class="sub-cred-add-btn"
+                                          on:click={() =>
+                                            openAddSubCred(
+                                              mcField.id,
+                                              mcField.subFields ?? [],
+                                            )}
+                                        >
+                                          <svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="12"
+                                            height="12"
+                                          >
+                                            <line
+                                              x1="12"
+                                              y1="5"
+                                              x2="12"
+                                              y2="19"
+                                            /><line
+                                              x1="5"
+                                              y1="12"
+                                              x2="19"
+                                              y2="12"
+                                            />
+                                          </svg>
+                                          Add
+                                        </button>
+                                      {/if}
+                                    </div>
+
+                                    {#if isLoadingSubCreds}
+                                      <div class="sub-creds-loading">
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          width="14"
+                                          height="14"
+                                          class="spin-icon"
+                                        >
+                                          <circle
+                                            cx="12"
+                                            cy="12"
+                                            r="10"
+                                            stroke="currentColor"
+                                            stroke-width="3"
+                                            fill="none"
+                                            opacity="0.25"
+                                          />
+                                          <path
+                                            d="M12 2a10 10 0 0 1 10 10"
+                                            stroke="currentColor"
+                                            stroke-width="3"
+                                            fill="none"
+                                            stroke-linecap="round"
+                                          />
+                                        </svg>
+                                        <span>Loading…</span>
+                                      </div>
+                                    {:else if subCredentials.length === 0 && addingSubCred !== mcField.id}
+                                      <p class="sub-creds-empty">
+                                        No entries yet.
+                                      </p>
+                                    {:else}
+                                      <table class="sub-creds-table">
+                                        <thead>
+                                          <tr>
+                                            <th>Name</th>
+                                            {#each mcField.subFields ?? [] as sf (sf.id)}
+                                              <th>
+                                                {sf.name}
+                                                {#if sf.secure}
+                                                  <svg
+                                                    class="cred-lock-icon"
+                                                    viewBox="0 0 24 24"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    stroke-width="2"
+                                                    width="9"
+                                                    height="9"
+                                                  >
+                                                    <rect
+                                                      x="3"
+                                                      y="11"
+                                                      width="18"
+                                                      height="11"
+                                                      rx="2"
+                                                      ry="2"
+                                                    />
+                                                    <path
+                                                      d="M7 11V7a5 5 0 0 1 10 0v4"
+                                                    />
+                                                  </svg>
+                                                {/if}
+                                              </th>
+                                            {/each}
+                                            {#if !isEditingCredential}
+                                              <th class="sub-creds-th-actions"
+                                              ></th>
+                                            {/if}
+                                          </tr>
+                                        </thead>
+                                        <tbody>
+                                          {#each subCredentials as subCred (subCred.id)}
+                                            <tr class="sub-cred-row">
+                                              <td class="sub-cred-name-cell"
+                                                >{subCred.name}</td
+                                              >
+                                              {#each subCred.fields as sf (sf.id)}
+                                                <td
+                                                  class:mono={sf.valueType ===
+                                                    "ip_address" ||
+                                                    sf.valueType ===
+                                                      "license_key"}
+                                                >
+                                                  {#if sf.secure}
+                                                    <span
+                                                      class="sub-cred-secure-cell"
+                                                    >
+                                                      {#if loadingCredFields[subCredKey(subCred.id, sf.id)]}
+                                                        <svg
+                                                          viewBox="0 0 24 24"
+                                                          width="12"
+                                                          height="12"
+                                                          class="spin-icon sub-cred-spinner"
+                                                        >
+                                                          <circle
+                                                            cx="12"
+                                                            cy="12"
+                                                            r="10"
+                                                            stroke="currentColor"
+                                                            stroke-width="3"
+                                                            fill="none"
+                                                            opacity="0.25"
+                                                          />
+                                                          <path
+                                                            d="M12 2a10 10 0 0 1 10 10"
+                                                            stroke="currentColor"
+                                                            stroke-width="3"
+                                                            fill="none"
+                                                            stroke-linecap="round"
+                                                          />
+                                                        </svg>
+                                                      {:else if revealedCredFields[subCredKey(subCred.id, sf.id)]}
+                                                        <span
+                                                          class="sub-cred-revealed"
+                                                          >{fetchedSecureValues[
+                                                            subCredKey(
+                                                              subCred.id,
+                                                              sf.id,
+                                                            )
+                                                          ] || "—"}</span
+                                                        >
+                                                      {:else}
+                                                        <span
+                                                          class="sub-cred-masked"
+                                                          >••••••••</span
+                                                        >
+                                                      {/if}
+                                                      {#if permissions["credential.secure_values.read"] && !loadingCredFields[subCredKey(subCred.id, sf.id)]}
+                                                        {#if revealedCredFields[subCredKey(subCred.id, sf.id)]}
+                                                          <span
+                                                            class="cred-countdown-wrap"
+                                                            title="Auto-hides in 30 seconds"
+                                                          >
+                                                            <svg
+                                                              class="cred-countdown-ring"
+                                                              viewBox="0 0 20 20"
+                                                              width="16"
+                                                              height="16"
+                                                            >
+                                                              <circle
+                                                                cx="10"
+                                                                cy="10"
+                                                                r="8"
+                                                                fill="none"
+                                                                stroke="currentColor"
+                                                                stroke-width="2"
+                                                                opacity="0.1"
+                                                              />
+                                                              <circle
+                                                                cx="10"
+                                                                cy="10"
+                                                                r="8"
+                                                                fill="none"
+                                                                stroke="currentColor"
+                                                                stroke-width="2"
+                                                                stroke-linecap="round"
+                                                                stroke-dasharray="50.265"
+                                                                stroke-dashoffset="0"
+                                                                class="cred-countdown-arc"
+                                                              />
+                                                            </svg>
+                                                          </span>
+                                                        {/if}
+                                                        <button
+                                                          type="button"
+                                                          class="sub-cred-eye-btn"
+                                                          on:click|stopPropagation={() =>
+                                                            toggleCredField(
+                                                              subCred.id,
+                                                              sf.id,
+                                                              true,
+                                                              undefined,
+                                                              subCredKey(
+                                                                subCred.id,
+                                                                sf.id,
+                                                              ),
+                                                            )}
+                                                          aria-label={revealedCredFields[
+                                                            subCredKey(
+                                                              subCred.id,
+                                                              sf.id,
+                                                            )
+                                                          ]
+                                                            ? "Hide value"
+                                                            : "Show value"}
+                                                          title={revealedCredFields[
+                                                            subCredKey(
+                                                              subCred.id,
+                                                              sf.id,
+                                                            )
+                                                          ]
+                                                            ? "Hide"
+                                                            : "Reveal"}
+                                                        >
+                                                          {#if revealedCredFields[subCredKey(subCred.id, sf.id)]}
+                                                            <svg
+                                                              viewBox="0 0 24 24"
+                                                              fill="none"
+                                                              stroke="currentColor"
+                                                              stroke-width="2"
+                                                              width="13"
+                                                              height="13"
+                                                            >
+                                                              <path
+                                                                d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                                              />
+                                                              <path
+                                                                d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                                              />
+                                                              <path
+                                                                d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                                              />
+                                                              <line
+                                                                x1="1"
+                                                                y1="1"
+                                                                x2="23"
+                                                                y2="23"
+                                                              />
+                                                            </svg>
+                                                          {:else}
+                                                            <svg
+                                                              viewBox="0 0 24 24"
+                                                              fill="none"
+                                                              stroke="currentColor"
+                                                              stroke-width="2"
+                                                              width="13"
+                                                              height="13"
+                                                            >
+                                                              <path
+                                                                d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                                              />
+                                                              <circle
+                                                                cx="12"
+                                                                cy="12"
+                                                                r="3"
+                                                              />
+                                                            </svg>
+                                                          {/if}
+                                                        </button>
+                                                      {/if}
+                                                    </span>
+                                                  {:else}
+                                                    {sf.value || "—"}
+                                                  {/if}
+                                                </td>
+                                              {/each}
+                                              {#if !isEditingCredential}
+                                                <td
+                                                  class="sub-cred-actions-cell"
+                                                >
+                                                  <button
+                                                    type="button"
+                                                    class="sub-cred-remove-btn"
+                                                    on:click|stopPropagation={() =>
+                                                      deleteSubCred(subCred.id)}
+                                                    disabled={deletingSubCredId ===
+                                                      subCred.id}
+                                                    aria-label="Remove"
+                                                    title="Remove"
+                                                  >
+                                                    {#if deletingSubCredId === subCred.id}
+                                                      <svg
+                                                        viewBox="0 0 24 24"
+                                                        width="12"
+                                                        height="12"
+                                                        class="spin-icon"
+                                                      >
+                                                        <circle
+                                                          cx="12"
+                                                          cy="12"
+                                                          r="10"
+                                                          stroke="currentColor"
+                                                          stroke-width="3"
+                                                          fill="none"
+                                                          opacity="0.25"
+                                                        />
+                                                        <path
+                                                          d="M12 2a10 10 0 0 1 10 10"
+                                                          stroke="currentColor"
+                                                          stroke-width="3"
+                                                          fill="none"
+                                                          stroke-linecap="round"
+                                                        />
+                                                      </svg>
+                                                    {:else}
+                                                      <svg
+                                                        viewBox="0 0 24 24"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        width="12"
+                                                        height="12"
+                                                      >
+                                                        <polyline
+                                                          points="3 6 5 6 21 6"
+                                                        />
+                                                        <path
+                                                          d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                                                        />
+                                                        <path
+                                                          d="M10 11v6M14 11v6"
+                                                        />
+                                                        <path
+                                                          d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"
+                                                        />
+                                                      </svg>
+                                                    {/if}
+                                                  </button>
+                                                </td>
+                                              {/if}
+                                            </tr>
+                                          {/each}
+                                        </tbody>
+                                      </table>
+                                    {/if}
+
+                                    <!-- Inline add form -->
+                                    {#if addingSubCred === mcField.id}
+                                      <div class="sub-cred-add-row">
+                                        <div class="sub-cred-add-row-fields">
+                                          <input
+                                            type="text"
+                                            class="sub-cred-add-input"
+                                            bind:value={newSubCredName}
+                                            placeholder="Name"
+                                            disabled={isSubmittingSubCred}
+                                          />
+                                          {#each mcField.subFields ?? [] as sf (sf.id)}
+                                            <input
+                                              type="text"
+                                              class="sub-cred-add-input"
+                                              bind:value={
+                                                newSubCredFields[sf.id]
+                                              }
+                                              placeholder={sf.name}
+                                              disabled={isSubmittingSubCred}
+                                            />
+                                          {/each}
+                                        </div>
+                                        <div class="sub-cred-add-row-actions">
+                                          {#if subCredError}
+                                            <span
+                                              class="sub-cred-add-error"
+                                              title={subCredError}
+                                            >
+                                              <svg
+                                                viewBox="0 0 24 24"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-width="2"
+                                                width="13"
+                                                height="13"
+                                              >
+                                                <circle
+                                                  cx="12"
+                                                  cy="12"
+                                                  r="10"
+                                                /><line
+                                                  x1="12"
+                                                  y1="8"
+                                                  x2="12"
+                                                  y2="12"
+                                                /><line
+                                                  x1="12"
+                                                  y1="16"
+                                                  x2="12.01"
+                                                  y2="16"
+                                                />
+                                              </svg>
+                                            </span>
+                                          {/if}
+                                          <button
+                                            type="button"
+                                            class="sub-cred-btn-save"
+                                            on:click={() =>
+                                              submitSubCred(mcField.id)}
+                                            disabled={isSubmittingSubCred ||
+                                              !newSubCredName.trim()}
+                                          >
+                                            {isSubmittingSubCred ? "…" : "Add"}
+                                          </button>
+                                          <button
+                                            type="button"
+                                            class="sub-cred-btn-cancel"
+                                            on:click={cancelAddSubCred}
+                                            disabled={isSubmittingSubCred}
+                                          >
+                                            Cancel
+                                          </button>
+                                        </div>
+                                      </div>
+                                    {/if}
+                                  </div>
+                                {/each}
+                              {/if}
+
+                              {#if isEditingCredential && saveCredError}
+                                <div class="cred-edit-error">
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="14"
+                                    height="14"
+                                  >
+                                    <circle cx="12" cy="12" r="10" />
+                                    <line x1="12" y1="8" x2="12" y2="12" />
+                                    <line x1="12" y1="16" x2="12.01" y2="16" />
+                                  </svg>
+                                  {saveCredError}
+                                </div>
+                              {/if}
+                            </div>
+                          {:else}
+                            <div class="config-no-questions">
+                              <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                width="32"
+                                height="32"
+                              >
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+                                <line x1="12" y1="17" x2="12.01" y2="17" />
+                              </svg>
+                              <p>No credential fields available</p>
+                            </div>
+                          {/if}
+
+                          <!-- Footer metadata -->
+                          <div class="config-info-footer">
+                            {#if formatDate(selectedCredential.createdAt)}
+                              <div class="config-info-item">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="13"
+                                  height="13"
+                                >
+                                  <path d="M12 5v14M5 12h14" />
+                                </svg>
+                                Created on {formatDate(
+                                  selectedCredential.createdAt,
+                                )}
+                              </div>
+                            {/if}
+                            {#if formatDate(selectedCredential.updatedAt)}
+                              <div class="config-info-item">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="13"
+                                  height="13"
+                                >
+                                  <circle cx="12" cy="12" r="10" />
+                                  <polyline points="12 6 12 12 16 14" />
+                                </svg>
+                                Updated on {formatDate(
+                                  selectedCredential.updatedAt,
+                                )}
+                              </div>
+                            {/if}
+                          </div>
+                        </div>
+                      {/key}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      {:else if activeTab === "Configurations"}
+        {#if configurations.length === 0}
+          <div class="tab-empty">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tab-empty-icon"
+            >
+              <path
+                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+              />
+            </svg>
+            <p>No configurations found</p>
+          </div>
+        {:else}
+          <div
+            class="config-split"
+            class:expanded={selectedConfig !== null && !isMobile}
+          >
+            <!-- Left side: config buttons -->
+            <div
+              class="config-list"
+              class:collapsed={selectedConfig !== null && !isMobile}
+            >
+              {#each configurations as config (config.id)}
+                <button
+                  class="config-item"
+                  class:selected={selectedConfig?.id === config.id}
+                  class:config-inactive={config.status?.name === "Inactive" ||
+                    config.status?.name === "Automate Inactive"}
+                  on:click={() => selectConfig(config)}
+                  type="button"
+                >
+                  <div class="config-item-header">
+                    <div class="config-name-group">
+                      <span
+                        class="config-status-dot dot-{configStatusClass(
+                          config.status?.name,
+                        )}"
+                        title={config.status?.name ?? "Unknown"}
+                      ></span>
+                      <span class="config-name">{config.name}</span>
+                    </div>
+                    <div class="config-header-badges">
+                      {#if config.status?.name && (!selectedConfig || isMobile)}
+                        <span
+                          class="config-status-badge status-{configStatusClass(
+                            config.status.name,
+                          )}">{config.status.name}</span
+                        >
+                      {/if}
+                      {#if config.type?.name && (!selectedConfig || isMobile)}
+                        <span class="config-type-badge">{config.type.name}</span
+                        >
+                      {/if}
+                    </div>
+                  </div>
+                  {#if !selectedConfig || isMobile}
+                    {#if config.description}
+                      <p class="config-description">{config.description}</p>
+                    {/if}
+                    {#if config.key}
+                      <div class="config-kv">
+                        <span class="config-key">{config.key}</span>
+                        {#if config.value}
+                          <span class="config-value">{config.value}</span>
+                        {/if}
+                      </div>
+                    {/if}
+                    {#if formatDate(config.updatedAt) || formatDate(config.createdAt) || formatDate(config.info?.lastUpdated) || formatDate(config.info?.dateEntered)}
+                      <span class="config-date">
+                        {#if formatDate(config.updatedAt)}
+                          Updated {formatDate(config.updatedAt)}
+                        {:else if formatDate(config.info?.lastUpdated)}
+                          Updated {formatDate(config.info?.lastUpdated)}
+                        {:else if formatDate(config.createdAt)}
+                          Created {formatDate(config.createdAt)}
+                        {:else if formatDate(config.info?.dateEntered)}
+                          Created {formatDate(config.info?.dateEntered)}
+                        {/if}
+                      </span>
+                    {/if}
+                  {/if}
+                </button>
+              {/each}
+            </div>
+
+            <!-- Right side: config detail panel -->
+            {#if selectedConfig}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <div
+                class="bottom-sheet-overlay"
+                class:active={selectedConfig !== null}
+                on:click={() => {
+                  selectedConfig = null;
+                }}
+              >
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <div class="bottom-sheet-panel" on:click|stopPropagation>
+                  <div class="bottom-sheet-handle"></div>
+                  <div class="bottom-sheet-body">
+                    <div class="config-detail-panel">
+                      {#key configFadeKey}
+                        <div class="config-detail-content">
+                          <div class="config-detail-header">
+                            <div class="config-detail-header-left">
+                              <h3 class="config-detail-title">
+                                {selectedConfig.name}
+                              </h3>
+                              <div class="config-detail-meta-badges">
+                                {#if selectedConfig.type?.name}
+                                  <span class="config-badge type"
+                                    >{selectedConfig.type.name}</span
+                                  >
+                                {/if}
+                                {#if selectedConfig.status?.name}
+                                  <span
+                                    class="config-badge status-{configStatusClass(
+                                      selectedConfig.status.name,
+                                    )}"
+                                  >
+                                    {selectedConfig.status.name}
+                                  </span>
+                                {/if}
+                              </div>
+                            </div>
+                            <button
+                              class="config-detail-close"
+                              on:click={() => (selectedConfig = null)}
+                              aria-label="Close detail view"
+                              type="button"
+                            >
+                              <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                width="16"
+                                height="16"
+                              >
+                                <path d="M18 6L6 18M6 6l12 12" />
+                              </svg>
+                            </button>
+                          </div>
+
+                          {#if selectedConfig.serialNumber}
+                            <div class="config-serial">
+                              <span class="config-serial-label">Serial #</span>
+                              <span class="config-serial-value"
+                                >{selectedConfig.serialNumber}</span
+                              >
+                            </div>
+                          {/if}
+
+                          <!-- Notes -->
+                          <!-- Questions / Fields -->
+                          {#if (selectedConfig.questions && selectedConfig.questions.length > 0) || selectedConfig.notes}
+                            <div class="config-questions">
+                              {#if selectedConfig.notes}
+                                <div class="config-notes">
+                                  <h4 class="config-section-title">
+                                    <svg
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      width="16"
+                                      height="16"
+                                    >
+                                      <path
+                                        d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
+                                      />
+                                      <polyline points="14 2 14 8 20 8" />
+                                      <line x1="16" y1="13" x2="8" y2="13" />
+                                      <line x1="16" y1="17" x2="8" y2="17" />
+                                      <polyline points="10 9 9 9 8 9" />
+                                    </svg>
+                                    Notes
+                                  </h4>
+                                  <p class="config-notes-text">
+                                    {selectedConfig.notes}
+                                  </p>
+                                </div>
+                              {/if}
+                              <h4 class="config-section-title">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="16"
+                                  height="16"
+                                >
+                                  <path
+                                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
+                                  />
+                                  <rect
+                                    x="9"
+                                    y="3"
+                                    width="6"
+                                    height="4"
+                                    rx="1"
+                                  />
+                                </svg>
+                                Configuration Details
+                              </h4>
+                              <div class="questions-grid">
+                                {#each selectedConfig.questions as q (q.id)}
+                                  <div
+                                    class="question-row"
+                                    class:has-answer={!!q.answer}
+                                  >
+                                    <span class="question-label"
+                                      >{q.question}</span
+                                    >
+                                    <div class="question-value-wrap">
+                                      {#if q.fieldType === "Password"}
+                                        <span
+                                          class="question-value password-value"
+                                        >
+                                          {#if revealedPasswords[q.id]}
+                                            {q.answer || "—"}
+                                          {:else}
+                                            {q.answer ? "••••••••" : "—"}
+                                          {/if}
+                                        </span>
+                                        {#if q.answer}
+                                          <button
+                                            class="password-toggle"
+                                            on:click={() =>
+                                              togglePassword(q.id)}
+                                            type="button"
+                                            aria-label={revealedPasswords[q.id]
+                                              ? "Hide password"
+                                              : "Show password"}
+                                          >
+                                            {#if revealedPasswords[q.id]}
+                                              <svg
+                                                viewBox="0 0 24 24"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-width="2"
+                                                width="14"
+                                                height="14"
+                                              >
+                                                <path
+                                                  d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                                />
+                                                <path
+                                                  d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                                />
+                                                <path
+                                                  d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                                />
+                                                <line
+                                                  x1="1"
+                                                  y1="1"
+                                                  x2="23"
+                                                  y2="23"
+                                                />
+                                              </svg>
+                                            {:else}
+                                              <svg
+                                                viewBox="0 0 24 24"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-width="2"
+                                                width="14"
+                                                height="14"
+                                              >
+                                                <path
+                                                  d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                                />
+                                                <circle cx="12" cy="12" r="3" />
+                                              </svg>
+                                            {/if}
+                                          </button>
+                                        {/if}
+                                      {:else if q.fieldType === "TextArea"}
+                                        <span
+                                          class="question-value textarea-value"
+                                          >{q.answer || "—"}</span
+                                        >
+                                      {:else}
+                                        <span class="question-value"
+                                          >{q.answer || "—"}</span
+                                        >
+                                      {/if}
+                                    </div>
+                                  </div>
+                                {/each}
+                              </div>
+                            </div>
+                          {:else if !selectedConfig.notes}
+                            <div class="config-no-questions">
+                              <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                width="32"
+                                height="32"
+                              >
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+                                <line x1="12" y1="17" x2="12.01" y2="17" />
+                              </svg>
+                              <p>No configuration fields available</p>
+                            </div>
+                          {/if}
+
+                          <!-- Footer metadata -->
+                          {#if selectedConfig.info}
+                            <div class="config-info-footer">
+                              {#if selectedConfig.info.enteredBy || selectedConfig.info.dateEntered}
+                                <div class="config-info-item">
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="13"
+                                    height="13"
+                                  >
+                                    <path d="M12 5v14M5 12h14" />
+                                  </svg>
+                                  Created{#if selectedConfig.info.enteredBy}&nbsp;by
+                                    <strong
+                                      >{selectedConfig.info.enteredBy}</strong
+                                    >{/if}{#if selectedConfig.info.dateEntered}&nbsp;on
+                                    {formatDate(
+                                      selectedConfig.info.dateEntered,
+                                    )}{/if}
+                                </div>
+                              {/if}
+                              {#if selectedConfig.info.updatedBy || selectedConfig.info.lastUpdated}
+                                <div class="config-info-item">
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="13"
+                                    height="13"
+                                  >
+                                    <circle cx="12" cy="12" r="10" />
+                                    <polyline points="12 6 12 12 16 14" />
+                                  </svg>
+                                  Updated{#if selectedConfig.info.updatedBy}&nbsp;by
+                                    <strong
+                                      >{selectedConfig.info.updatedBy}</strong
+                                    >{/if}{#if selectedConfig.info.lastUpdated}&nbsp;on
+                                    {formatDate(
+                                      selectedConfig.info.lastUpdated,
+                                    )}{/if}
+                                </div>
+                              {/if}
+                            </div>
+                          {/if}
+                        </div>
+                      {/key}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      {:else if activeTab === "Contacts"}
+        {#if !company?.cw_Data?.allContacts || company.cw_Data.allContacts.length === 0}
+          <div class="tab-empty">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tab-empty-icon"
+            >
+              <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 00-3-3.87" />
+              <path d="M16 3.13a4 4 0 010 7.75" />
+            </svg>
+            <p>No contacts found</p>
+          </div>
+        {:else}
+          {@const activeContacts = company.cw_Data.allContacts.filter(
+            (c) => !c.inactive,
+          )}
+          {@const inactiveContacts = company.cw_Data.allContacts.filter(
+            (c) => c.inactive,
+          )}
+
+          <!-- Active contacts -->
+          {#if activeContacts.length > 0}
+            <div class="contacts-section">
+              <div class="contacts-section-header">
+                <h3 class="contacts-section-title">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-muted)"
+                    stroke-width="2"
+                    width="16"
+                    height="16"
+                  >
+                    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                    <circle cx="9" cy="7" r="4" />
+                    <path d="M23 21v-2a4 4 0 00-3-3.87" />
+                    <path d="M16 3.13a4 4 0 010 7.75" />
+                  </svg>
+                  Active
+                </h3>
+                <span class="contacts-section-count"
+                  >{activeContacts.length}</span
+                >
+              </div>
+              <div class="contacts-grid">
+                {#each activeContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+                  <div class="contact-card">
+                    <div class="contact-card-header">
+                      <div class="contact-avatar">
+                        <span class="contact-initials">
+                          {contact.firstName?.[0] ?? ""}{contact
+                            .lastName?.[0] ?? ""}
+                        </span>
+                      </div>
+                      <div class="contact-card-info">
+                        <div class="contact-name">
+                          {[contact.firstName, contact.lastName]
+                            .filter(Boolean)
+                            .join(" ")}
+                        </div>
+                        {#if contact.title}
+                          <div class="contact-title">{contact.title}</div>
+                        {/if}
+                      </div>
+                    </div>
+                    <div class="contact-card-details">
+                      {#if contact.email}
+                        <div class="contact-detail-row">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="var(--text-secondary)"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                            style="min-width:13px;min-height:13px;"
+                          >
+                            <rect x="2" y="4" width="20" height="16" rx="2" />
+                            <path d="M22 7l-10 7L2 7" />
+                          </svg>
+                          <a
+                            href="mailto:{contact.email}"
+                            class="contact-link"
+                            on:click|stopPropagation>{contact.email}</a
+                          >
+                        </div>
+                      {/if}
+                      {#if contact.phone}
+                        <div class="contact-detail-row">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="var(--text-secondary)"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                            style="min-width:13px;min-height:13px;"
+                          >
+                            <path
+                              d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                            />
+                          </svg>
+                          <span>{formatPhone(contact.phone)}</span>
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          <!-- Inactive contacts -->
+          {#if inactiveContacts.length > 0}
+            <div class="contacts-section contacts-section-inactive">
+              <div class="contacts-section-header">
+                <h3 class="contacts-section-title">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-muted)"
+                    stroke-width="2"
+                    width="16"
+                    height="16"
+                  >
+                    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                    <circle cx="9" cy="7" r="4" />
+                    <line x1="23" y1="13" x2="17" y2="13" />
+                  </svg>
+                  Inactive
+                </h3>
+                <span class="contacts-section-count inactive"
+                  >{inactiveContacts.length}</span
+                >
+              </div>
+              <div class="contacts-grid">
+                {#each inactiveContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+                  <div class="contact-card contact-inactive">
+                    <div class="contact-card-header">
+                      <div class="contact-avatar contact-avatar-inactive">
+                        <span class="contact-initials">
+                          {contact.firstName?.[0] ?? ""}{contact
+                            .lastName?.[0] ?? ""}
+                        </span>
+                      </div>
+                      <div class="contact-card-info">
+                        <div class="contact-name">
+                          {[contact.firstName, contact.lastName]
+                            .filter(Boolean)
+                            .join(" ")}
+                          <span class="contact-inactive-badge">Inactive</span>
+                        </div>
+                        {#if contact.title}
+                          <div class="contact-title">{contact.title}</div>
+                        {/if}
+                      </div>
+                    </div>
+                    <div class="contact-card-details">
+                      {#if contact.email}
+                        <div class="contact-detail-row">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="var(--text-secondary)"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                            style="min-width:13px;min-height:13px;"
+                          >
+                            <rect x="2" y="4" width="20" height="16" rx="2" />
+                            <path d="M22 7l-10 7L2 7" />
+                          </svg>
+                          <a
+                            href="mailto:{contact.email}"
+                            class="contact-link"
+                            on:click|stopPropagation>{contact.email}</a
+                          >
+                        </div>
+                      {/if}
+                      {#if contact.phone}
+                        <div class="contact-detail-row">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="var(--text-secondary)"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                            style="min-width:13px;min-height:13px;"
+                          >
+                            <path
+                              d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                            />
+                          </svg>
+                          <span>{formatPhone(contact.phone)}</span>
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+        {/if}
+      {:else if activeTab === "UniFi"}
+        <LinkUnifiSiteModal
+          bind:isOpen={isLinkUnifiOpen}
+          companyId={company?.id ?? ""}
+          accessToken={accessToken ?? ""}
+          linkedSiteIds={unifiSites.map((s) => s.id)}
+          onSuccess={() => {
+            isLinkUnifiOpen = false;
+            invalidateAll();
+          }}
+        />
+
+        {#if selectedUnifiSite}
+          <!-- Management view for a selected UniFi site -->
+          <div class="unifi-management">
+            <div class="unifi-management-header">
+              <button
+                class="unifi-back-btn"
+                on:click={backToUnifiSites}
+                type="button"
+                aria-label="Back to sites"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="16"
+                  height="16"
+                >
+                  <path d="M19 12H5M12 19l-7-7 7-7" />
+                </svg>
+              </button>
+              <div class="unifi-management-title-group">
+                <h3 class="unifi-management-title">{selectedUnifiSite.name}</h3>
+                <span class="unifi-management-site-id"
+                  >{selectedUnifiSite.siteId}</span
+                >
+              </div>
+              <div class="unifi-site-menu-wrap">
+                <button
+                  type="button"
+                  class="unifi-site-menu-btn"
+                  aria-label="Site actions"
+                  on:click|stopPropagation={() =>
+                    (isUnifiSiteMenuOpen = !isUnifiSiteMenuOpen)}
+                >
+                  <svg
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    width="14"
+                    height="14"
+                  >
+                    <circle cx="8" cy="2.5" r="1.5" />
+                    <circle cx="8" cy="8" r="1.5" />
+                    <circle cx="8" cy="13.5" r="1.5" />
+                  </svg>
+                </button>
+                {#if isUnifiSiteMenuOpen}
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <!-- svelte-ignore a11y_click_events_have_key_events -->
+                  <div
+                    class="unifi-site-dropdown-menu"
+                    on:click|stopPropagation
+                  >
+                    <button
+                      type="button"
+                      class="unifi-site-dropdown-item unifi-site-dropdown-item-danger"
+                      disabled={isUnlinkingSite}
+                      on:click|stopPropagation={() => {
+                        isUnifiSiteMenuOpen = false;
+                        unlinkUnifiSite(selectedUnifiSite?.id ?? "");
+                      }}
+                    >
+                      {#if isUnlinkingSite}
+                        <svg
+                          viewBox="0 0 24 24"
+                          width="13"
+                          height="13"
+                          class="spin-icon"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            stroke-width="3"
+                            fill="none"
+                            opacity="0.25"
+                          />
+                          <path
+                            d="M12 2a10 10 0 0 1 10 10"
+                            stroke="currentColor"
+                            stroke-width="3"
+                            fill="none"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      {:else}
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="13"
+                          height="13"
+                        >
+                          <path d="M18 6L6 18M6 6l12 12" />
+                        </svg>
+                      {/if}
+                      Unlink Site
+                    </button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+
+            <!-- Management sub-tabs -->
+            <div class="unifi-mgmt-tabs">
+              <button
+                class="unifi-mgmt-tab"
+                class:active={unifiManagementTab === "overview"}
+                on:click={() => switchUnifiManagementTab("overview")}
+                type="button">Overview</button
+              >
+              <button
+                class="unifi-mgmt-tab"
+                class:active={unifiManagementTab === "devices"}
+                on:click={() => switchUnifiManagementTab("devices")}
+                type="button">Devices</button
+              >
+              {#if permissions["unifi.site.wifi"] && permissions["unifi.site.wifi.read.name"]}
+                <button
+                  class="unifi-mgmt-tab"
+                  class:active={unifiManagementTab === "wifi"}
+                  on:click={() => switchUnifiManagementTab("wifi")}
+                  type="button">WiFi</button
+                >
+              {/if}
+              <button
+                class="unifi-mgmt-tab"
+                class:active={unifiManagementTab === "networks"}
+                on:click={() => switchUnifiManagementTab("networks")}
+                type="button">Networks</button
+              >
+            </div>
+
+            <div class="unifi-mgmt-content">
+              {#if unifiManagementTab === "overview"}
+                {#if isLoadingUnifiOverview}
+                  <div class="unifi-loading">
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="20"
+                      height="20"
+                      class="spin-icon"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        opacity="0.25"
+                      />
+                      <path
+                        d="M12 2a10 10 0 0 1 10 10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Loading overview…</span>
+                  </div>
+                {:else if unifiSiteOverview}
+                  <div class="unifi-overview-grid">
+                    <!-- Health status -->
+                    {#if unifiSiteOverview.health && unifiSiteOverview.health.length > 0}
+                      <div class="unifi-overview-section">
+                        <h4 class="unifi-section-title">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="14"
+                            height="14"
+                          >
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                          </svg>
+                          Health
+                        </h4>
+                        <div class="unifi-health-cards">
+                          {#each unifiSiteOverview.health as h}
+                            <div class="unifi-health-card">
+                              <span
+                                class="unifi-health-status"
+                                class:healthy={h.status === "ok"}
+                                class:unhealthy={h.status !== "ok"}
+                              >
+                                {h.status === "ok" ? "●" : "○"}
+                              </span>
+                              <span class="unifi-health-subsystem"
+                                >{h.subsystem}</span
+                              >
+                              <span class="unifi-health-status-text"
+                                >{h.status}</span
+                              >
+                            </div>
+                          {/each}
+                        </div>
+                      </div>
+                    {/if}
+
+                    <!-- System info -->
+                    {#if unifiSiteOverview.sysInfo}
+                      <div class="unifi-overview-section">
+                        <h4 class="unifi-section-title">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="14"
+                            height="14"
+                          >
+                            <rect
+                              x="2"
+                              y="3"
+                              width="20"
+                              height="14"
+                              rx="2"
+                              ry="2"
+                            />
+                            <line x1="8" y1="21" x2="16" y2="21" />
+                            <line x1="12" y1="17" x2="12" y2="21" />
+                          </svg>
+                          System Info
+                        </h4>
+                        <div class="unifi-info-grid">
+                          {#if unifiSiteOverview.sysInfo.hostname}
+                            <div class="unifi-info-item">
+                              <span class="unifi-info-label">Hostname</span>
+                              <span class="unifi-info-value"
+                                >{unifiSiteOverview.sysInfo.hostname}</span
+                              >
+                            </div>
+                          {/if}
+                          {#if unifiSiteOverview.sysInfo.version}
+                            <div class="unifi-info-item">
+                              <span class="unifi-info-label">Version</span>
+                              <span class="unifi-info-value mono"
+                                >{unifiSiteOverview.sysInfo.version}</span
+                              >
+                            </div>
+                          {/if}
+                          {#if unifiSiteOverview.sysInfo.timezone}
+                            <div class="unifi-info-item">
+                              <span class="unifi-info-label">Timezone</span>
+                              <span class="unifi-info-value"
+                                >{unifiSiteOverview.sysInfo.timezone}</span
+                              >
+                            </div>
+                          {/if}
+                        </div>
+                      </div>
+                    {/if}
+                  </div>
+                {:else}
+                  <div class="unifi-empty-state">
+                    <p>No overview data available</p>
+                  </div>
+                {/if}
+              {:else if unifiManagementTab === "devices"}
+                {#if isLoadingUnifiDevices}
+                  <div class="unifi-loading">
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="20"
+                      height="20"
+                      class="spin-icon"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        opacity="0.25"
+                      />
+                      <path
+                        d="M12 2a10 10 0 0 1 10 10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Loading devices…</span>
+                  </div>
+                {:else if unifiSiteDevices.length === 0}
+                  <div class="unifi-empty-state">
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      width="32"
+                      height="32"
+                    >
+                      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+                      <line x1="8" y1="21" x2="16" y2="21" />
+                      <line x1="12" y1="17" x2="12" y2="21" />
+                    </svg>
+                    <p>No devices found</p>
+                  </div>
+                {:else}
+                  <div class="unifi-devices-table-wrap">
+                    <table class="unifi-devices-table">
+                      <thead>
+                        <tr>
+                          <th>Status</th>
+                          <th>Name</th>
+                          <th>Model</th>
+                          <th>IP</th>
+                          <th>MAC</th>
+                          <th>Version</th>
+                          <th>Uptime</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {#each unifiSiteDevices as device (device.id)}
+                          <tr class="unifi-device-row">
+                            <td class="unifi-device-status-cell">
+                              <span
+                                class="unifi-device-status-dot"
+                                class:online={device.state === "connected" ||
+                                  device.state === 1}
+                                class:offline={device.state !== "connected" &&
+                                  device.state !== 1}
+                              ></span>
+                            </td>
+                            <td class="unifi-device-name-cell">
+                              {device.name || device.mac}
+                            </td>
+                            <td class="unifi-device-model-cell"
+                              >{device.model}</td
+                            >
+                            <td class="unifi-device-mono-cell"
+                              >{device.ip || "—"}</td
+                            >
+                            <td class="unifi-device-mono-cell">{device.mac}</td>
+                            <td class="unifi-device-mono-cell"
+                              >{device.version || "—"}</td
+                            >
+                            <td class="unifi-device-uptime-cell">
+                              {#if device.uptime}
+                                {formatUptime(device.uptime)}
+                              {:else}
+                                —
+                              {/if}
+                            </td>
+                          </tr>
+                        {/each}
+                      </tbody>
+                    </table>
+                  </div>
+                {/if}
+              {:else if unifiManagementTab === "wifi"}
+                {#if isLoadingUnifiWifi}
+                  <div class="unifi-loading">
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="20"
+                      height="20"
+                      class="spin-icon"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        opacity="0.25"
+                      />
+                      <path
+                        d="M12 2a10 10 0 0 1 10 10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Loading WiFi networks…</span>
+                  </div>
+                {:else if unifiSiteWifi.length === 0}
+                  <div class="unifi-empty-state">
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      width="32"
+                      height="32"
+                    >
+                      <path d="M5 12.55a11 11 0 0114.08 0" />
+                      <path d="M1.42 9a16 16 0 0121.16 0" />
+                      <path d="M8.53 16.11a6 6 0 016.95 0" />
+                      <line x1="12" y1="20" x2="12.01" y2="20" />
+                    </svg>
+                    <p>No WiFi networks found</p>
+                  </div>
+                {:else}
+                  <div
+                    class="wifi-split-view"
+                    class:detail-open={selectedWifi !== null}
+                  >
+                    <!-- Network list panel -->
+                    <div class="wifi-list-panel">
+                      <div class="wifi-table-header">
+                        <span class="wifi-table-title">WiFi Networks</span>
+                        <span class="wifi-list-count"
+                          >{unifiSiteWifi.length}</span
+                        >
+                      </div>
+                      <div class="wifi-table-head">
+                        <span class="wifi-col wifi-col-status"></span>
+                        <span class="wifi-col wifi-col-name">Name</span>
+                        <span class="wifi-col wifi-col-vlan">Network</span>
+                        <span class="wifi-col wifi-col-aps"
+                          >Broadcasting AP's</span
+                        >
+                        <span class="wifi-col wifi-col-band">Radio Band</span>
+                        <span class="wifi-col wifi-col-clients">Clients</span>
+                        <span class="wifi-col wifi-col-security">Security</span>
+                      </div>
+                      <div class="wifi-table-body">
+                        {#each unifiSiteWifi as wifi, i (wifi.id ?? `wifi-${i}`)}
+                          <button
+                            class="wifi-table-row"
+                            class:active={selectedWifi === wifi ||
+                              (selectedWifi?.id && selectedWifi.id === wifi.id)}
+                            on:click={() => selectWifiNetwork(wifi)}
+                            type="button"
+                          >
+                            <span class="wifi-col wifi-col-status">
+                              <span
+                                class="wifi-status-dot"
+                                class:enabled={wifi.enabled !== false}
+                                title={wifi.enabled !== false
+                                  ? "Enabled"
+                                  : "Disabled"}
+                              ></span>
+                            </span>
+                            <span class="wifi-col wifi-col-name">
+                              <span class="wifi-network-name"
+                                >{wifi.name ?? wifi.id ?? "Unknown"}</span
+                              >
+                              {#if "hideSSID" in wifi && wifi.hideSSID}
+                                <span class="wifi-table-tag">Hidden</span>
+                              {/if}
+                              {#if "isGuest" in wifi && wifi.isGuest}
+                                <span
+                                  class="wifi-table-tag wifi-table-tag-guest"
+                                  >Guest</span
+                                >
+                              {/if}
+                            </span>
+                            <span class="wifi-col wifi-col-vlan">
+                              {#if "networkconfId" in wifi && wifi.networkconfId}
+                                {@const net = unifiSiteNetworks.find(
+                                  (n) => n.id === wifi.networkconfId,
+                                )}
+                                {#if net}
+                                  {net.name}
+                                {:else}
+                                  —
+                                {/if}
+                              {:else}
+                                —
+                              {/if}
+                            </span>
+                            <span class="wifi-col wifi-col-aps">
+                              {#if "apGroupIds" in wifi && Array.isArray(wifi.apGroupIds)}
+                                {wifi.apGroupIds.length}
+                              {:else}
+                                —
+                              {/if}
+                            </span>
+                            <span class="wifi-col wifi-col-band">
+                              {#if "band" in wifi}
+                                <span class="wifi-band-badge"
+                                  >{wifi.band === "both"
+                                    ? "2.4 / 5 GHz"
+                                    : wifi.band === "2g"
+                                      ? "2.4 GHz"
+                                      : wifi.band === "5g"
+                                        ? "5 GHz"
+                                        : wifi.band}</span
+                                >
+                              {:else}
+                                —
+                              {/if}
+                            </span>
+                            <span class="wifi-col wifi-col-clients">—</span>
+                            <span class="wifi-col wifi-col-security">
+                              {#if "security" in wifi}
+                                {wifi.security === "wpapsk"
+                                  ? "WPA Personal"
+                                  : wifi.security === "wpaeap"
+                                    ? "WPA Enterprise"
+                                    : wifi.security === "open"
+                                      ? "Open"
+                                      : wifi.security}{#if "wpaMode" in wifi}&nbsp;({wifi.wpaMode ===
+                                  "wpa2"
+                                    ? "WPA2"
+                                    : wifi.wpaMode === "wpa3"
+                                      ? "WPA3"
+                                      : wifi.wpaMode === "wpa2wpa3"
+                                        ? "WPA2/3"
+                                        : wifi.wpaMode}){/if}
+                              {:else}
+                                —
+                              {/if}
+                            </span>
+                          </button>
+                        {/each}
+                      </div>
+                    </div>
+
+                    <!-- Detail panel -->
+                    <div class="wifi-detail-panel">
+                      {#if selectedWifi}
+                        <div class="wifi-detail-header">
+                          <button
+                            class="wifi-detail-back"
+                            type="button"
+                            on:click={backToWifiList}
+                          >
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="16"
+                              height="16"><path d="M15 18l-6-6 6-6" /></svg
+                            >
+                            Back
+                          </button>
+                          {#if canEditWifi}
+                            <div class="wifi-detail-actions">
+                              {#if isWifiDirty}
+                                <button
+                                  class="wifi-btn wifi-btn-ghost"
+                                  type="button"
+                                  on:click={discardWifiChanges}>Discard</button
+                                >
+                              {/if}
+                              <button
+                                class="wifi-btn wifi-btn-primary"
+                                type="button"
+                                on:click={saveWifiChanges}
+                                disabled={!isWifiDirty || isSavingWifi}
+                                >{isSavingWifi
+                                  ? "Saving…"
+                                  : "Save Changes"}</button
+                              >
+                            </div>
+                          {/if}
+                        </div>
+
+                        {#if wifiSaveError}
+                          <div class="wifi-save-error">{wifiSaveError}</div>
+                        {/if}
+
+                        <!-- PMF Warning Modal -->
+                        {#if showPmfWarning}
+                          <div
+                            class="wifi-modal-overlay"
+                            on:click|self={() => {
+                              showPmfWarning = false;
+                            }}
+                            on:keydown={(e) => {
+                              if (e.key === "Escape") showPmfWarning = false;
+                            }}
+                            role="dialog"
+                            tabindex="-1"
+                          >
+                            <div class="wifi-modal">
+                              <div class="wifi-modal-header">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="#f59e0b"
+                                  stroke-width="2"
+                                  width="20"
+                                  height="20"
+                                  ><path
+                                    d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+                                  /><line x1="12" y1="9" x2="12" y2="13" /><line
+                                    x1="12"
+                                    y1="17"
+                                    x2="12.01"
+                                    y2="17"
+                                  /></svg
+                                >
+                                <span>PMF Warning</span>
+                              </div>
+                              <p class="wifi-modal-body">
+                                Setting PMF to <strong
+                                  >{pendingPmfValue === "required"
+                                    ? "Required"
+                                    : "Optional"}</strong
+                                > may cause connectivity issues with legacy IoT devices
+                                that do not support Protected Management Frames.
+                              </p>
+                              <div class="wifi-modal-actions">
+                                <button
+                                  class="wifi-btn wifi-btn-ghost"
+                                  type="button"
+                                  on:click={() => {
+                                    showPmfWarning = false;
+                                  }}>Cancel</button
+                                >
+                                <button
+                                  class="wifi-btn wifi-btn-primary"
+                                  type="button"
+                                  on:click={applyPmfChange}>Apply Anyway</button
+                                >
+                              </div>
+                            </div>
+                          </div>
+                        {/if}
+
+                        <!-- Speed Profile Create Modal -->
+                        {#if showSpeedProfileModal}
+                          <div
+                            class="wifi-modal-overlay"
+                            on:click|self={() => {
+                              showSpeedProfileModal = false;
+                            }}
+                            on:keydown={(e) => {
+                              if (e.key === "Escape")
+                                showSpeedProfileModal = false;
+                            }}
+                            role="dialog"
+                            tabindex="-1"
+                          >
+                            <div class="wifi-modal">
+                              <div class="wifi-modal-header">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="18"
+                                  height="18"
+                                  ><polyline
+                                    points="22 12 18 12 15 21 9 3 6 12 2 12"
+                                  /></svg
+                                >
+                                <span>Create Speed Profile</span>
+                              </div>
+                              <div class="wifi-modal-form">
+                                <label class="wifi-modal-field">
+                                  <span>Name</span>
+                                  <input
+                                    type="text"
+                                    class="wifi-field-input"
+                                    bind:value={speedProfileName}
+                                    placeholder="e.g. Guest 10Mbps"
+                                  />
+                                </label>
+                                <label class="wifi-modal-field">
+                                  <span>Download Limit (Kbps)</span>
+                                  <input
+                                    type="number"
+                                    class="wifi-field-input"
+                                    bind:value={speedProfileDown}
+                                    placeholder="Unlimited if empty"
+                                  />
+                                </label>
+                                <label class="wifi-modal-field">
+                                  <span>Upload Limit (Kbps)</span>
+                                  <input
+                                    type="number"
+                                    class="wifi-field-input"
+                                    bind:value={speedProfileUp}
+                                    placeholder="Unlimited if empty"
+                                  />
+                                </label>
+                              </div>
+                              <div class="wifi-modal-actions">
+                                <button
+                                  class="wifi-btn wifi-btn-ghost"
+                                  type="button"
+                                  on:click={() => {
+                                    showSpeedProfileModal = false;
+                                  }}>Cancel</button
+                                >
+                                <button
+                                  class="wifi-btn wifi-btn-primary"
+                                  type="button"
+                                  on:click={createSpeedProfile}
+                                  disabled={!speedProfileName.trim() ||
+                                    isCreatingSpeedProfile}
+                                  >{isCreatingSpeedProfile
+                                    ? "Creating…"
+                                    : "Create"}</button
+                                >
+                              </div>
+                            </div>
+                          </div>
+                        {/if}
+
+                        <div class="wifi-detail-form">
+                          <!-- Manual / Auto mode toggle -->
+                          {#if canEditWifi}
+                            <div class="wifi-mode-toggle-wrap">
+                              <span class="wifi-mode-label"
+                                >Configuration Mode</span
+                              >
+                              <div class="wifi-mode-toggle">
+                                <button
+                                  type="button"
+                                  class:active={wifiAdvancedMode === "auto"}
+                                  on:click={() => {
+                                    wifiAdvancedMode = "auto";
+                                    updateWifiField(
+                                      "settingPreference",
+                                      "auto",
+                                    );
+                                  }}>Auto</button
+                                >
+                                <button
+                                  type="button"
+                                  class:active={wifiAdvancedMode === "manual"}
+                                  on:click={() => {
+                                    wifiAdvancedMode = "manual";
+                                    updateWifiField(
+                                      "settingPreference",
+                                      "manual",
+                                    );
+                                  }}>Manual</button
+                                >
+                              </div>
+                              <span class="wifi-mode-hint">
+                                {wifiAdvancedMode === "auto"
+                                  ? "Only general settings are sent. Security and behavior controls are locked."
+                                  : "All settings are editable. Changes are saved when you click Save."}
+                              </span>
+                            </div>
+                          {/if}
+
+                          <!-- ═══════════════════════════════════ -->
+                          <!-- SECTION 1: GENERAL                 -->
+                          <!-- ═══════════════════════════════════ -->
+                          <div class="wifi-group-card">
+                            <div class="wifi-group-header">
+                              <div class="wifi-group-icon">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="16"
+                                  height="16"
+                                  ><path d="M5 12.55a11 11 0 0114.08 0" /><path
+                                    d="M1.42 9a16 16 0 0121.16 0"
+                                  /><path
+                                    d="M8.53 16.11a6 6 0 016.95 0"
+                                  /><circle cx="12" cy="20" r="1" /></svg
+                                >
+                              </div>
+                              <div class="wifi-group-title-wrap">
+                                <h4 class="wifi-group-title">General</h4>
+                                <span class="wifi-group-desc"
+                                  >Network name, password, and broadcasting</span
+                                >
+                              </div>
+                            </div>
+                            <div class="wifi-group-fields">
+                              <!-- Name (SSID) -->
+                              <div class="wifi-field">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Name (SSID)</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <input
+                                    type="text"
+                                    class="wifi-field-input"
+                                    value={wifiEditState.name ?? ""}
+                                    on:input={(e) =>
+                                      updateWifiField(
+                                        "name",
+                                        e.currentTarget.value,
+                                      )}
+                                  />
+                                {:else}
+                                  <span class="wifi-field-value"
+                                    >{wifiEditState.name ?? "—"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Password (Passphrase) -->
+                              {#if wifiEditState.security !== "open"}
+                                <div class="wifi-field">
+                                  <div class="wifi-field-label-row">
+                                    <span class="wifi-field-label"
+                                      >Password</span
+                                    >
+                                  </div>
+                                  <div class="wifi-passphrase-wrap">
+                                    {#if canEditWifi}
+                                      <input
+                                        type={revealedWifiPassphrases["detail"]
+                                          ? "text"
+                                          : "password"}
+                                        class="wifi-field-input mono"
+                                        value={wifiEditState.passphrase ?? ""}
+                                        on:input={(e) =>
+                                          updateWifiField(
+                                            "passphrase",
+                                            e.currentTarget.value,
+                                          )}
+                                      />
+                                    {:else}
+                                      <span class="wifi-field-value mono"
+                                        >{revealedWifiPassphrases["detail"]
+                                          ? wifiEditState.passphrase
+                                          : "••••••••"}</span
+                                      >
+                                    {/if}
+                                    <button
+                                      class="wifi-reveal-btn"
+                                      type="button"
+                                      on:click={() => {
+                                        revealedWifiPassphrases["detail"] =
+                                          !revealedWifiPassphrases["detail"];
+                                        revealedWifiPassphrases =
+                                          revealedWifiPassphrases;
+                                      }}
+                                    >
+                                      {#if revealedWifiPassphrases["detail"]}
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="14"
+                                          height="14"
+                                          ><path
+                                            d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                          /><path
+                                            d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                          /><path
+                                            d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                          /><line
+                                            x1="1"
+                                            y1="1"
+                                            x2="23"
+                                            y2="23"
+                                          /></svg
+                                        >
+                                      {:else}
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="14"
+                                          height="14"
+                                          ><path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                          /><circle
+                                            cx="12"
+                                            cy="12"
+                                            r="3"
+                                          /></svg
+                                        >
+                                      {/if}
+                                    </button>
+                                  </div>
+                                </div>
+                              {/if}
+
+                              <!-- Network (dropdown) -->
+                              <div class="wifi-field">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label">Network</span>
+                                  <span class="wifi-field-hint"
+                                    >VLAN / network assignment for this SSID</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <select
+                                    class="wifi-field-select"
+                                    value={String(
+                                      wifiEditState.networkconfId ?? "",
+                                    )}
+                                    on:change={(e) =>
+                                      updateWifiField(
+                                        "networkconfId",
+                                        e.currentTarget.value,
+                                      )}
+                                  >
+                                    <option value="">— Select Network —</option>
+                                    {#each unifiSiteNetworks as net}
+                                      <option value={net.id}
+                                        >{net.name}{net.vlanId
+                                          ? ` (VLAN ${net.vlanId})`
+                                          : ""}</option
+                                      >
+                                    {/each}
+                                  </select>
+                                {:else}
+                                  {@const net = unifiSiteNetworks.find(
+                                    (n) =>
+                                      n.id ===
+                                      String(wifiEditState.networkconfId),
+                                  )}
+                                  <span class="wifi-field-value"
+                                    >{net
+                                      ? `${net.name}${net.vlanId ? ` (VLAN ${net.vlanId})` : ""}`
+                                      : "—"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Broadcasting APs (bubble select) -->
+                              <div class="wifi-field">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Broadcasting APs</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Which access points broadcast this network</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <div class="wifi-bubble-select">
+                                    <button
+                                      type="button"
+                                      class="wifi-bubble"
+                                      class:active={wifiEditState.apGroupMode ===
+                                        "all"}
+                                      on:click={() =>
+                                        updateWifiField("apGroupMode", "all")}
+                                      >All</button
+                                    >
+                                    <button
+                                      type="button"
+                                      class="wifi-bubble"
+                                      class:active={wifiEditState.apGroupMode ===
+                                        "group"}
+                                      on:click={() =>
+                                        updateWifiField("apGroupMode", "group")}
+                                      >Group</button
+                                    >
+                                    <button
+                                      type="button"
+                                      class="wifi-bubble"
+                                      class:active={wifiEditState.apGroupMode ===
+                                        "devices"}
+                                      on:click={() =>
+                                        updateWifiField(
+                                          "apGroupMode",
+                                          "devices",
+                                        )}>Specific</button
+                                    >
+                                  </div>
+                                {:else}
+                                  <span class="wifi-field-value"
+                                    >{wifiEditState.apGroupMode === "all"
+                                      ? "All APs"
+                                      : wifiEditState.apGroupMode === "group"
+                                        ? "Group"
+                                        : "Specific Devices"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Application -->
+                              <div class="wifi-field">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Application</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Network purpose</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <div class="wifi-bubble-select">
+                                    <button
+                                      type="button"
+                                      class="wifi-bubble"
+                                      class:active={!wifiEditState.isGuest}
+                                      on:click={() =>
+                                        updateWifiField("isGuest", false)}
+                                      >Standard</button
+                                    >
+                                    <button
+                                      type="button"
+                                      class="wifi-bubble"
+                                      class:active={!!wifiEditState.isGuest}
+                                      on:click={() =>
+                                        updateWifiField("isGuest", true)}
+                                      >Guest / IoT</button
+                                    >
+                                  </div>
+                                {:else}
+                                  <span class="wifi-field-value"
+                                    >{wifiEditState.isGuest
+                                      ? "Guest / IoT"
+                                      : "Standard"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Radio Band (checkboxes) -->
+                              <div class="wifi-field">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Radio Band</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Which frequencies to broadcast on</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <div class="wifi-radio-band-checks">
+                                    <label class="wifi-radio-check">
+                                      <input
+                                        type="checkbox"
+                                        checked={wifiEditState.band === "2g" ||
+                                          wifiEditState.band === "both"}
+                                        on:change={(e) => {
+                                          const has5g =
+                                            wifiEditState.band === "5g" ||
+                                            wifiEditState.band === "both";
+                                          if (e.currentTarget.checked) {
+                                            updateWifiField(
+                                              "band",
+                                              has5g ? "both" : "2g",
+                                            );
+                                          } else {
+                                            updateWifiField(
+                                              "band",
+                                              has5g ? "5g" : "2g",
+                                            );
+                                          }
+                                        }}
+                                      />
+                                      <span>2.4 GHz</span>
+                                    </label>
+                                    <label class="wifi-radio-check">
+                                      <input
+                                        type="checkbox"
+                                        checked={wifiEditState.band === "5g" ||
+                                          wifiEditState.band === "both"}
+                                        on:change={(e) => {
+                                          const has2g =
+                                            wifiEditState.band === "2g" ||
+                                            wifiEditState.band === "both";
+                                          if (e.currentTarget.checked) {
+                                            updateWifiField(
+                                              "band",
+                                              has2g ? "both" : "5g",
+                                            );
+                                          } else {
+                                            updateWifiField(
+                                              "band",
+                                              has2g ? "2g" : "5g",
+                                            );
+                                          }
+                                        }}
+                                      />
+                                      <span>5 GHz</span>
+                                    </label>
+                                    <label
+                                      class="wifi-radio-check wifi-radio-disabled"
+                                      title="6 GHz support coming soon"
+                                    >
+                                      <input type="checkbox" disabled />
+                                      <span>6 GHz</span>
+                                      <!-- TODO: Enable 6 GHz when controller supports it -->
+                                      <span class="wifi-todo-badge">TODO</span>
+                                    </label>
+                                  </div>
+                                {:else}
+                                  <span class="wifi-field-value"
+                                    >{wifiEditState.band === "both"
+                                      ? "2.4 / 5 GHz"
+                                      : wifiEditState.band === "2g"
+                                        ? "2.4 GHz"
+                                        : wifiEditState.band === "5g"
+                                          ? "5 GHz"
+                                          : String(wifiEditState.band)}</span
+                                  >
+                                {/if}
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- ═══════════════════════════════════ -->
+                          <!-- SECTION 2: SECURITY                -->
+                          <!-- ═══════════════════════════════════ -->
+                          <div
+                            class="wifi-group-card"
+                            class:wifi-section-disabled={wifiAdvancedMode ===
+                              "auto"}
+                          >
+                            <div class="wifi-group-header">
+                              <div class="wifi-group-icon">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="16"
+                                  height="16"
+                                  ><path
+                                    d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+                                  /></svg
+                                >
+                              </div>
+                              <div class="wifi-group-title-wrap">
+                                <h4 class="wifi-group-title">Security</h4>
+                                <span class="wifi-group-desc"
+                                  >Authentication, encryption, and access
+                                  control</span
+                                >
+                              </div>
+                            </div>
+                            <div class="wifi-group-fields">
+                              <!-- Security Protocol -->
+                              <div class="wifi-field">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Security Protocol</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <select
+                                    class="wifi-field-select"
+                                    value={String(
+                                      wifiEditState.security ?? "wpapsk",
+                                    )}
+                                    on:change={(e) =>
+                                      updateWifiField(
+                                        "security",
+                                        e.currentTarget.value,
+                                      )}
+                                  >
+                                    <option value="wpapsk">WPA Personal</option>
+                                    <option value="wpaeap"
+                                      >WPA Enterprise</option
+                                    >
+                                    <option value="open"
+                                      >Open (No Security)</option
+                                    >
+                                  </select>
+                                {:else}
+                                  <span class="wifi-field-value"
+                                    >{wifiEditState.security === "wpapsk"
+                                      ? "WPA Personal"
+                                      : wifiEditState.security === "wpaeap"
+                                        ? "WPA Enterprise"
+                                        : wifiEditState.security === "open"
+                                          ? "Open"
+                                          : String(
+                                              wifiEditState.security,
+                                            )}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- WPA Mode (shown if not open) -->
+                              {#if wifiEditState.security !== "open"}
+                                <div class="wifi-field">
+                                  <div class="wifi-field-label-row">
+                                    <span class="wifi-field-label"
+                                      >WPA Version</span
+                                    >
+                                  </div>
+                                  {#if canEditWifi}
+                                    <select
+                                      class="wifi-field-select"
+                                      value={String(
+                                        wifiEditState.wpaMode ?? "wpa2",
+                                      )}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "wpaMode",
+                                          e.currentTarget.value,
+                                        )}
+                                    >
+                                      <option value="wpa2">WPA2</option>
+                                      <option value="wpa3">WPA3</option>
+                                      <option value="wpa2wpa3"
+                                        >WPA2 / WPA3 Mixed</option
+                                      >
+                                    </select>
+                                  {:else}
+                                    <span class="wifi-field-value"
+                                      >{wifiEditState.wpaMode === "wpa2"
+                                        ? "WPA2"
+                                        : wifiEditState.wpaMode === "wpa3"
+                                          ? "WPA3"
+                                          : "WPA2/WPA3"}</span
+                                    >
+                                  {/if}
+                                </div>
+                              {/if}
+
+                              <!-- PMF Mode (bubble select with warning) -->
+                              {#if wifiEditState.security !== "open"}
+                                <div class="wifi-field">
+                                  <div class="wifi-field-label-row">
+                                    <span class="wifi-field-label"
+                                      >PMF (Protected Management Frames)</span
+                                    >
+                                    <span class="wifi-field-hint"
+                                      >Protects management frames from forgery</span
+                                    >
+                                  </div>
+                                  {#if canEditWifi}
+                                    <div class="wifi-bubble-select">
+                                      <button
+                                        type="button"
+                                        class="wifi-bubble"
+                                        class:active={wifiEditState.pmfMode ===
+                                          "required"}
+                                        on:click={() =>
+                                          confirmPmfChange("required")}
+                                        >Required</button
+                                      >
+                                      <button
+                                        type="button"
+                                        class="wifi-bubble"
+                                        class:active={wifiEditState.pmfMode ===
+                                          "optional"}
+                                        on:click={() =>
+                                          confirmPmfChange("optional")}
+                                        >Optional</button
+                                      >
+                                      <button
+                                        type="button"
+                                        class="wifi-bubble"
+                                        class:active={wifiEditState.pmfMode ===
+                                          "disabled"}
+                                        on:click={() =>
+                                          updateWifiField(
+                                            "pmfMode",
+                                            "disabled",
+                                          )}>Disabled</button
+                                      >
+                                    </div>
+                                  {:else}
+                                    <span class="wifi-field-value"
+                                      >{wifiEditState.pmfMode === "required"
+                                        ? "Required"
+                                        : wifiEditState.pmfMode === "optional"
+                                          ? "Optional"
+                                          : "Disabled"}</span
+                                    >
+                                  {/if}
+                                </div>
+                              {/if}
+
+                              <!-- Private Pre-Shared Keys -->
+                              {#if wifiEditState.security === "wpapsk"}
+                                <div class="wifi-field wifi-field-inline">
+                                  <div class="wifi-field-label-row">
+                                    <span class="wifi-field-label"
+                                      >Private Pre-Shared Keys</span
+                                    >
+                                    <span class="wifi-field-hint"
+                                      >Unique per-device passwords</span
+                                    >
+                                  </div>
+                                  {#if canEditWifi}
+                                    <label class="wifi-toggle">
+                                      <input
+                                        type="checkbox"
+                                        checked={!!wifiEditState.privatePreSharedKeysEnabled}
+                                        on:change={(e) => {
+                                          updateWifiField(
+                                            "privatePreSharedKeysEnabled",
+                                            e.currentTarget.checked,
+                                          );
+                                          if (
+                                            e.currentTarget.checked &&
+                                            selectedUnifiSite &&
+                                            selectedWifi
+                                          ) {
+                                            loadPPSKs(
+                                              selectedUnifiSite.id,
+                                              selectedWifi.id,
+                                            );
+                                          }
+                                        }}
+                                      />
+                                      <span class="wifi-toggle-slider"></span>
+                                    </label>
+                                  {:else}
+                                    <span
+                                      class="wifi-field-value wifi-bool"
+                                      class:yes={!!wifiEditState.privatePreSharedKeysEnabled}
+                                      >{wifiEditState.privatePreSharedKeysEnabled
+                                        ? "Yes"
+                                        : "No"}</span
+                                    >
+                                  {/if}
+                                </div>
+                                {#if wifiEditState.privatePreSharedKeysEnabled}
+                                  <div class="wifi-ppsk-section">
+                                    {#if isLoadingPPSKs}
+                                      <div class="wifi-ppsk-loading">
+                                        Loading keys…
+                                      </div>
+                                    {:else if wifiPPSKs.length === 0}
+                                      <div class="wifi-ppsk-empty">
+                                        No private PSKs configured
+                                      </div>
+                                    {:else}
+                                      <div class="wifi-ppsk-list">
+                                        {#each wifiPPSKs as psk, i (psk.name + i)}
+                                          <div class="wifi-ppsk-item">
+                                            <div class="wifi-ppsk-info">
+                                              <span class="wifi-ppsk-name"
+                                                >{psk.name}</span
+                                              >
+                                              {#if psk.vlanId}
+                                                <span class="wifi-ppsk-vlan"
+                                                  >VLAN {psk.vlanId}</span
+                                                >
+                                              {/if}
+                                              {#if psk.mac}
+                                                <span class="wifi-ppsk-mac"
+                                                  >{psk.mac}</span
+                                                >
+                                              {/if}
+                                            </div>
+                                            <div class="wifi-passphrase-wrap">
+                                              <span
+                                                class="wifi-field-value mono"
+                                                >{revealedWifiPassphrases[
+                                                  `ppsk-${i}`
+                                                ]
+                                                  ? psk.key
+                                                  : "••••••••"}</span
+                                              >
+                                              <button
+                                                class="wifi-reveal-btn"
+                                                type="button"
+                                                on:click={() => {
+                                                  revealedWifiPassphrases[
+                                                    `ppsk-${i}`
+                                                  ] =
+                                                    !revealedWifiPassphrases[
+                                                      `ppsk-${i}`
+                                                    ];
+                                                  revealedWifiPassphrases =
+                                                    revealedWifiPassphrases;
+                                                }}
+                                              >
+                                                {#if revealedWifiPassphrases[`ppsk-${i}`]}
+                                                  <svg
+                                                    viewBox="0 0 24 24"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    stroke-width="2"
+                                                    width="14"
+                                                    height="14"
+                                                    ><path
+                                                      d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                                    /><path
+                                                      d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                                    /><path
+                                                      d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                                    /><line
+                                                      x1="1"
+                                                      y1="1"
+                                                      x2="23"
+                                                      y2="23"
+                                                    /></svg
+                                                  >
+                                                {:else}
+                                                  <svg
+                                                    viewBox="0 0 24 24"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    stroke-width="2"
+                                                    width="14"
+                                                    height="14"
+                                                    ><path
+                                                      d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                                    /><circle
+                                                      cx="12"
+                                                      cy="12"
+                                                      r="3"
+                                                    /></svg
+                                                  >
+                                                {/if}
+                                              </button>
+                                            </div>
+                                          </div>
+                                        {/each}
+                                      </div>
+                                    {/if}
+                                    {#if canEditWifi}
+                                      <div class="wifi-ppsk-add">
+                                        <input
+                                          type="text"
+                                          class="wifi-field-input"
+                                          bind:value={ppskNewName}
+                                          placeholder="Name (e.g. John's Laptop)"
+                                        />
+                                        <input
+                                          type="password"
+                                          class="wifi-field-input mono"
+                                          bind:value={ppskNewKey}
+                                          placeholder="Password (min 8 chars)"
+                                        />
+                                        <input
+                                          type="text"
+                                          class="wifi-field-input"
+                                          bind:value={ppskNewVlanId}
+                                          placeholder="VLAN (optional)"
+                                        />
+                                        <button
+                                          class="wifi-btn wifi-btn-primary"
+                                          type="button"
+                                          on:click={addPPSK}
+                                          disabled={!ppskNewName.trim() ||
+                                            ppskNewKey.trim().length < 8 ||
+                                            isAddingPPSK}
+                                          >{isAddingPPSK
+                                            ? "Adding…"
+                                            : "Add PSK"}</button
+                                        >
+                                      </div>
+                                    {/if}
+                                  </div>
+                                {/if}
+                              {/if}
+
+                              <!-- Hide WiFi Name -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Hide WiFi Name</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Network won't appear in scan results</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.hideSSID}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "hideSSID",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.hideSSID}
+                                    >{wifiEditState.hideSSID
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Client Device Isolation -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Client Device Isolation</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Prevent clients from communicating with
+                                    each other</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.l2Isolation}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "l2Isolation",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.l2Isolation}
+                                    >{wifiEditState.l2Isolation
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- ═══════════════════════════════════ -->
+                          <!-- SECTION 3: BEHAVIOR CONTROLS       -->
+                          <!-- ═══════════════════════════════════ -->
+                          <div
+                            class="wifi-group-card"
+                            class:wifi-section-disabled={wifiAdvancedMode ===
+                              "auto"}
+                          >
+                            <div class="wifi-group-header">
+                              <div class="wifi-group-icon">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="16"
+                                  height="16"
+                                  ><circle cx="12" cy="12" r="3" /><path
+                                    d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+                                  /></svg
+                                >
+                              </div>
+                              <div class="wifi-group-title-wrap">
+                                <h4 class="wifi-group-title">
+                                  Behavior Controls
+                                </h4>
+                                <span class="wifi-group-desc"
+                                  >Advanced wireless features and optimizations</span
+                                >
+                              </div>
+                            </div>
+                            <div class="wifi-group-fields">
+                              <!-- Band Steering -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Band Steering</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Prefer 5 GHz for dual-band clients</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.no2ghzOui}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "no2ghzOui",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.no2ghzOui}
+                                    >{wifiEditState.no2ghzOui
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Proxy ARP -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label">Proxy ARP</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >AP answers ARP requests on behalf of
+                                    clients</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.proxyArp}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "proxyArp",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.proxyArp}
+                                    >{wifiEditState.proxyArp
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- BSS Transition -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >BSS Transition (802.11v)</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Helps clients find a better AP</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.bssTransition}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "bssTransition",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.bssTransition}
+                                    >{wifiEditState.bssTransition
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- UAPSD -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >U-APSD (Power Save)</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Reduces power consumption on mobile devices</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.uapsdEnabled}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "uapsdEnabled",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.uapsdEnabled}
+                                    >{wifiEditState.uapsdEnabled
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Fast Roaming -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Fast Roaming (802.11r)</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Faster transitions between access points</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.fastRoamingEnabled}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "fastRoamingEnabled",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.fastRoamingEnabled}
+                                    >{wifiEditState.fastRoamingEnabled
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- MAC Address Filter -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >MAC Address Filter</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Allow or deny specific devices</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.macFilterEnabled}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "macFilterEnabled",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.macFilterEnabled}
+                                    >{wifiEditState.macFilterEnabled
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+                              {#if wifiEditState.macFilterEnabled}
+                                <div class="wifi-sub-section">
+                                  <!-- Filter Type -->
+                                  <div class="wifi-field">
+                                    <div class="wifi-field-label-row">
+                                      <span class="wifi-field-label"
+                                        >Filter Type</span
+                                      >
+                                    </div>
+                                    {#if canEditWifi}
+                                      <div class="wifi-bubble-select">
+                                        <button
+                                          type="button"
+                                          class="wifi-bubble"
+                                          class:active={wifiEditState.macFilterPolicy ===
+                                            "allow"}
+                                          on:click={() =>
+                                            updateWifiField(
+                                              "macFilterPolicy",
+                                              "allow",
+                                            )}>Allow</button
+                                        >
+                                        <button
+                                          type="button"
+                                          class="wifi-bubble"
+                                          class:active={wifiEditState.macFilterPolicy ===
+                                            "deny"}
+                                          on:click={() =>
+                                            updateWifiField(
+                                              "macFilterPolicy",
+                                              "deny",
+                                            )}>Deny</button
+                                        >
+                                      </div>
+                                    {:else}
+                                      <span class="wifi-field-value"
+                                        >{wifiEditState.macFilterPolicy ===
+                                        "allow"
+                                          ? "Allow List"
+                                          : "Deny List"}</span
+                                      >
+                                    {/if}
+                                  </div>
+                                  <!-- MAC Address List -->
+                                  {#if canEditWifi}
+                                    <div class="wifi-mac-add">
+                                      <input
+                                        type="text"
+                                        class="wifi-field-input mono"
+                                        bind:value={macFilterNewMac}
+                                        placeholder="AA:BB:CC:DD:EE:FF"
+                                        on:keydown={(e) => {
+                                          if (e.key === "Enter")
+                                            addMacToFilterList();
+                                        }}
+                                      />
+                                      <button
+                                        class="wifi-btn wifi-btn-primary"
+                                        type="button"
+                                        on:click={addMacToFilterList}
+                                        disabled={!macFilterNewMac.trim()}
+                                        >Add</button
+                                      >
+                                    </div>
+                                  {/if}
+                                  {#if Array.isArray(wifiEditState.macFilterList) && (wifiEditState.macFilterList as string[]).length > 0}
+                                    <div class="wifi-mac-list">
+                                      {#each wifiEditState.macFilterList as string[] as mac}
+                                        <div class="wifi-mac-item">
+                                          <span class="mono">{mac}</span>
+                                          {#if canEditWifi}
+                                            <button
+                                              class="wifi-mac-remove"
+                                              type="button"
+                                              on:click={() =>
+                                                removeMacFromFilterList(mac)}
+                                              title="Remove">×</button
+                                            >
+                                          {/if}
+                                        </div>
+                                      {/each}
+                                    </div>
+                                  {:else}
+                                    <div class="wifi-ppsk-empty">
+                                      No MAC addresses added
+                                    </div>
+                                  {/if}
+                                </div>
+                              {/if}
+
+                              <!-- RADIUS MAC Authentication -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >RADIUS MAC Authentication</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Authenticate clients by MAC address via
+                                    RADIUS</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.radiusMacAuthEnabled}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "radiusMacAuthEnabled",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.radiusMacAuthEnabled}
+                                    >{wifiEditState.radiusMacAuthEnabled
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+                              {#if wifiEditState.radiusMacAuthEnabled}
+                                <div class="wifi-sub-section">
+                                  <div class="wifi-field">
+                                    <div class="wifi-field-label-row">
+                                      <span class="wifi-field-label"
+                                        >MAC Address Format</span
+                                      >
+                                      <span class="wifi-field-hint"
+                                        >Format used when sending MAC to RADIUS</span
+                                      >
+                                    </div>
+                                    {#if canEditWifi}
+                                      <select
+                                        class="wifi-field-select"
+                                        value={String(
+                                          wifiEditState.radiusMacaclFormat ??
+                                            "none_lower",
+                                        )}
+                                        on:change={(e) =>
+                                          updateWifiField(
+                                            "radiusMacaclFormat",
+                                            e.currentTarget.value,
+                                          )}
+                                      >
+                                        <option value="none_lower"
+                                          >aabbccddeeff</option
+                                        >
+                                        <option value="colon_lower"
+                                          >aa:bb:cc:dd:ee:ff</option
+                                        >
+                                        <option value="dash_lower"
+                                          >aa-bb-cc-dd-ee-ff</option
+                                        >
+                                        <option value="colon_upper"
+                                          >AA:BB:CC:DD:EE:FF</option
+                                        >
+                                        <option value="dash_upper"
+                                          >AA-BB-CC-DD-EE-FF</option
+                                        >
+                                      </select>
+                                    {:else}
+                                      <span class="wifi-field-value mono"
+                                        >{wifiEditState.radiusMacaclFormat ??
+                                          "—"}</span
+                                      >
+                                    {/if}
+                                  </div>
+                                </div>
+                              {/if}
+
+                              <!-- WiFi Speed Limit -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >WiFi Speed Limit</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Apply a bandwidth profile to clients on
+                                    this network</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.usergroupId &&
+                                        wifiEditState.usergroupId !==
+                                          unifiSpeedProfiles.find(
+                                            (p) => p.downloadLimitKbps === -1,
+                                          )?.id}
+                                      on:change={(e) => {
+                                        if (!e.currentTarget.checked) {
+                                          const defaultProfile =
+                                            unifiSpeedProfiles.find(
+                                              (p) => p.downloadLimitKbps === -1,
+                                            );
+                                          updateWifiField(
+                                            "usergroupId",
+                                            defaultProfile?.id ?? "",
+                                          );
+                                        } else {
+                                          const firstLimited =
+                                            unifiSpeedProfiles.find(
+                                              (p) => p.downloadLimitKbps !== -1,
+                                            );
+                                          if (firstLimited)
+                                            updateWifiField(
+                                              "usergroupId",
+                                              firstLimited.id,
+                                            );
+                                        }
+                                      }}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  {@const profile = unifiSpeedProfiles.find(
+                                    (p) =>
+                                      p.id ===
+                                      String(wifiEditState.usergroupId),
+                                  )}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={profile &&
+                                      profile.downloadLimitKbps !== -1}
+                                    >{profile &&
+                                    profile.downloadLimitKbps !== -1
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+                              {#if wifiEditState.usergroupId && wifiEditState.usergroupId !== unifiSpeedProfiles.find((p) => p.downloadLimitKbps === -1)?.id}
+                                <div class="wifi-sub-section">
+                                  <div class="wifi-field">
+                                    <div class="wifi-field-label-row">
+                                      <span class="wifi-field-label"
+                                        >Speed Profile</span
+                                      >
+                                    </div>
+                                    {#if canEditWifi}
+                                      <div class="wifi-speed-row">
+                                        <select
+                                          class="wifi-field-select"
+                                          value={String(
+                                            wifiEditState.usergroupId ?? "",
+                                          )}
+                                          on:change={(e) =>
+                                            updateWifiField(
+                                              "usergroupId",
+                                              e.currentTarget.value,
+                                            )}
+                                        >
+                                          {#each unifiSpeedProfiles.filter((p) => p.downloadLimitKbps !== -1) as profile}
+                                            <option value={profile.id}
+                                              >{profile.name} (↓{profile.downloadLimitKbps}
+                                              / ↑{profile.uploadLimitKbps} Kbps)</option
+                                            >
+                                          {/each}
+                                        </select>
+                                        <button
+                                          class="wifi-btn wifi-btn-ghost"
+                                          type="button"
+                                          on:click={() => {
+                                            showSpeedProfileModal = true;
+                                          }}
+                                          title="Create new speed profile"
+                                          >+</button
+                                        >
+                                      </div>
+                                    {:else}
+                                      {@const profile = unifiSpeedProfiles.find(
+                                        (p) =>
+                                          p.id ===
+                                          String(wifiEditState.usergroupId),
+                                      )}
+                                      <span class="wifi-field-value"
+                                        >{profile ? profile.name : "—"}</span
+                                      >
+                                    {/if}
+                                  </div>
+                                </div>
+                              {/if}
+
+                              <!-- Auto 802.11 DTIM Period -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Auto DTIM Period</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >When enabled, DTIM is automatically managed</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={wifiEditState.dtimMode ===
+                                        "default"}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "dtimMode",
+                                          e.currentTarget.checked
+                                            ? "default"
+                                            : "custom",
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={wifiEditState.dtimMode ===
+                                      "default"}
+                                    >{wifiEditState.dtimMode === "default"
+                                      ? "Auto"
+                                      : "Custom"}</span
+                                  >
+                                {/if}
+                              </div>
+                              {#if wifiEditState.dtimMode !== "default"}
+                                <div class="wifi-sub-section">
+                                  <div class="wifi-dtim-inline">
+                                    <label class="wifi-dtim-field">
+                                      <span>2.4 GHz</span>
+                                      <input
+                                        type="number"
+                                        class="wifi-field-input"
+                                        value={wifiEditState.dtimNg ?? 1}
+                                        on:input={(e) =>
+                                          updateWifiField(
+                                            "dtimNg",
+                                            Number(e.currentTarget.value),
+                                          )}
+                                        min="1"
+                                      />
+                                    </label>
+                                    <label class="wifi-dtim-field">
+                                      <span>5 GHz</span>
+                                      <input
+                                        type="number"
+                                        class="wifi-field-input"
+                                        value={wifiEditState.dtimNa ?? 3}
+                                        on:input={(e) =>
+                                          updateWifiField(
+                                            "dtimNa",
+                                            Number(e.currentTarget.value),
+                                          )}
+                                        min="1"
+                                      />
+                                    </label>
+                                    <label class="wifi-dtim-field">
+                                      <span>6 GHz</span>
+                                      <input
+                                        type="number"
+                                        class="wifi-field-input"
+                                        value={wifiEditState.dtim6e ?? 3}
+                                        on:input={(e) =>
+                                          updateWifiField(
+                                            "dtim6e",
+                                            Number(e.currentTarget.value),
+                                          )}
+                                        min="1"
+                                      />
+                                    </label>
+                                  </div>
+                                </div>
+                              {/if}
+
+                              <!-- Group Key Interval -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Group Key Interval</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Periodic group key rotation for enhanced
+                                    security</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  {@const gkiValue =
+                                    Number(wifiEditState.groupRekey) || 0}
+                                  <div class="wifi-gki-row">
+                                    {#if gkiValue > 0}
+                                      <div class="wifi-inline-number">
+                                        <input
+                                          type="number"
+                                          class="wifi-field-input"
+                                          value={wifiEditState.groupRekey}
+                                          on:input={(e) =>
+                                            updateWifiField(
+                                              "groupRekey",
+                                              Number(e.currentTarget.value),
+                                            )}
+                                          min="1"
+                                        />
+                                        <span class="wifi-inline-unit">sec</span
+                                        >
+                                      </div>
+                                    {/if}
+                                    <label class="wifi-toggle">
+                                      <input
+                                        type="checkbox"
+                                        checked={gkiValue > 0}
+                                        on:change={(e) => {
+                                          updateWifiField(
+                                            "groupRekey",
+                                            e.currentTarget.checked ? 3600 : 0,
+                                          );
+                                        }}
+                                      />
+                                      <span class="wifi-toggle-slider"></span>
+                                    </label>
+                                  </div>
+                                {:else}
+                                  {@const gkiValue =
+                                    Number(wifiEditState.groupRekey) || 0}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={gkiValue > 0}
+                                    >{gkiValue > 0
+                                      ? `${wifiEditState.groupRekey}s`
+                                      : "Off"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- Show AP Name in Beacon -->
+                              <div class="wifi-field wifi-field-inline">
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >Multicast Enhancement</span
+                                  >
+                                  <span class="wifi-field-hint"
+                                    >Converts multicast to unicast for better
+                                    performance</span
+                                  >
+                                </div>
+                                {#if canEditWifi}
+                                  <label class="wifi-toggle">
+                                    <input
+                                      type="checkbox"
+                                      checked={!!wifiEditState.mcastenhanceEnabled}
+                                      on:change={(e) =>
+                                        updateWifiField(
+                                          "mcastenhanceEnabled",
+                                          e.currentTarget.checked,
+                                        )}
+                                    />
+                                    <span class="wifi-toggle-slider"></span>
+                                  </label>
+                                {:else}
+                                  <span
+                                    class="wifi-field-value wifi-bool"
+                                    class:yes={!!wifiEditState.mcastenhanceEnabled}
+                                    >{wifiEditState.mcastenhanceEnabled
+                                      ? "Yes"
+                                      : "No"}</span
+                                  >
+                                {/if}
+                              </div>
+
+                              <!-- WiFi Blackout Schedule (greyed out / not implemented) -->
+                              <div
+                                class="wifi-field wifi-field-inline wifi-field-disabled"
+                                title="WiFi Blackout Schedule is not yet implemented"
+                              >
+                                <div class="wifi-field-label-row">
+                                  <span class="wifi-field-label"
+                                    >WiFi Blackout Schedule</span
+                                  >
+                                  <span class="wifi-field-hint">
+                                    Schedule times when this network is disabled
+                                    <span
+                                      class="wifi-info-bubble"
+                                      title="This feature is not yet implemented in the UI. Contact your administrator to configure via the UniFi controller."
+                                      >ℹ️</span
+                                    >
+                                  </span>
+                                </div>
+                                <!-- TODO: Implement WiFi blackout schedule UI -->
+                                <span class="wifi-todo-badge">TODO</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      {:else}
+                        <div class="wifi-detail-placeholder">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            width="40"
+                            height="40"
+                          >
+                            <path d="M5 12.55a11 11 0 0114.08 0" />
+                            <path d="M1.42 9a16 16 0 0121.16 0" />
+                            <path d="M8.53 16.11a6 6 0 016.95 0" />
+                            <line x1="12" y1="20" x2="12.01" y2="20" />
+                          </svg>
+                          <p>Select a network to view and edit settings</p>
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                {/if}
+              {:else if unifiManagementTab === "networks"}
+                {#if isLoadingUnifiNetworks}
+                  <div class="unifi-loading">
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="20"
+                      height="20"
+                      class="spin-icon"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        opacity="0.25"
+                      />
+                      <path
+                        d="M12 2a10 10 0 0 1 10 10"
+                        stroke="currentColor"
+                        stroke-width="3"
+                        fill="none"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Loading networks…</span>
+                  </div>
+                {:else if unifiSiteNetworks.length === 0}
+                  <div class="unifi-empty-state">
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      width="32"
+                      height="32"
+                    >
+                      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+                      <line x1="1" y1="10" x2="23" y2="10" />
+                    </svg>
+                    <p>No networks found</p>
+                  </div>
+                {:else}
+                  <div class="unifi-networks-list">
+                    {#each unifiSiteNetworks as network (network.id)}
+                      <div class="unifi-network-card">
+                        <div class="unifi-network-header">
+                          <span class="unifi-network-name">{network.name}</span>
+                          <div class="unifi-network-badges">
+                            <span class="unifi-wifi-badge"
+                              >{network.purpose}</span
+                            >
+                            {#if network.vlanId}
+                              <span class="unifi-wifi-badge"
+                                >VLAN {network.vlanId}</span
+                              >
+                            {/if}
+                            {#if !network.enabled}
+                              <span class="unifi-wifi-badge disabled-badge"
+                                >Disabled</span
+                              >
+                            {/if}
+                          </div>
+                        </div>
+                        <div class="unifi-network-details">
+                          {#if network.subnet}
+                            <div class="unifi-device-detail">
+                              <span class="unifi-device-label">Subnet</span>
+                              <span class="unifi-device-value mono"
+                                >{network.subnet}</span
+                              >
+                            </div>
+                          {/if}
+                          {#if network.dhcpEnabled}
+                            <div class="unifi-device-detail">
+                              <span class="unifi-device-label">DHCP Range</span>
+                              <span class="unifi-device-value mono"
+                                >{network.dhcpStart} – {network.dhcpStop}</span
+                              >
+                            </div>
+                          {/if}
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              {/if}
+            </div>
+          </div>
+        {:else}
+          <!-- Site cards grid -->
+          {#if unifiSites.length === 0}
+            <div class="tab-empty">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                class="tab-empty-icon"
+              >
+                <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                <path d="M2 17l10 5 10-5" />
+                <path d="M2 12l10 5 10-5" />
+              </svg>
+              <p>No UniFi sites linked to this company</p>
+              <button
+                type="button"
+                class="create-credential-btn"
+                on:click={() => (isLinkUnifiOpen = true)}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="14"
+                  height="14"
+                >
+                  <path
+                    d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+                  />
+                  <path
+                    d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+                  />
+                </svg>
+                Link Site
+              </button>
+            </div>
+          {:else}
+            <div class="unifi-sites-grid">
+              {#each unifiSites as site (site.id)}
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div
+                  class="unifi-site-card"
+                  on:click={() => selectUnifiSite(site)}
+                  on:keydown={(e) => e.key === "Enter" && selectUnifiSite(site)}
+                  role="button"
+                  tabindex="0"
+                >
+                  <div class="unifi-site-card-top">
+                    <div class="unifi-site-card-info">
+                      <span class="unifi-site-card-name">{site.name}</span>
+                      <span class="unifi-site-card-id">{site.siteId}</span>
+                    </div>
+                    {#if siteOverviews[site.id]}
+                      {@const health = getCardHealthStatus(site.id)}
+                      <span
+                        class="unifi-site-card-status"
+                        class:status-ok={health === "ok"}
+                        class:status-warn={health === "warn"}
+                        class:status-error={health === "error"}
+                        class:status-unknown={health === "unknown"}
+                      >
+                        <span class="status-dot"></span>
+                        {health === "ok"
+                          ? "Healthy"
+                          : health === "warn"
+                            ? "Warning"
+                            : health === "error"
+                              ? "Error"
+                              : "Unknown"}
+                      </span>
+                    {:else}
+                      <span class="unifi-site-card-status status-loading">
+                        <svg
+                          viewBox="0 0 24 24"
+                          width="12"
+                          height="12"
+                          class="spin-icon"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            stroke-width="3"
+                            fill="none"
+                            opacity="0.25"
+                          />
+                          <path
+                            d="M12 2a10 10 0 0 1 10 10"
+                            stroke="currentColor"
+                            stroke-width="3"
+                            fill="none"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="unifi-site-card-stats">
+                    {#if siteOverviews[site.id]}
+                      <div class="unifi-card-stat">
+                        <span class="unifi-card-stat-value"
+                          >{getCardDeviceCount(site.id)}</span
+                        >
+                        <span class="unifi-card-stat-label">Devices</span>
+                      </div>
+                      <div class="unifi-card-stat">
+                        <span class="unifi-card-stat-value"
+                          >{getCardGatewayCount(site.id)}</span
+                        >
+                        <span class="unifi-card-stat-label">Gateways</span>
+                      </div>
+                      <div class="unifi-card-stat">
+                        <span class="unifi-card-stat-value"
+                          >{siteOverviews[site.id]?.health?.length ?? 0}</span
+                        >
+                        <span class="unifi-card-stat-label">Subsystems</span>
+                      </div>
+                    {:else}
+                      <div class="unifi-card-stats-loading">
+                        <span class="unifi-card-stat-placeholder"></span>
+                        <span class="unifi-card-stat-placeholder"></span>
+                        <span class="unifi-card-stat-placeholder"></span>
+                      </div>
+                    {/if}
+                  </div>
+                  <div class="unifi-site-card-arrow">
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      width="14"
+                      height="14"
+                    >
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        {/if}
+      {:else if activeTab === "Activity"}
+        <p class="tab-placeholder">Activity content</p>
+      {/if}
+    </div>
+  </div>
+</div>
diff --git a/src/routes/companies/[id]/components/ActivityTab.svelte b/src/routes/companies/[id]/components/ActivityTab.svelte
new file mode 100644
index 0000000..c48bf40
--- /dev/null
+++ b/src/routes/companies/[id]/components/ActivityTab.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  // Activity tab — placeholder for future implementation
+</script>
+
+<p class="tab-placeholder">Activity content</p>
diff --git a/src/routes/companies/[id]/components/CompanySidebar.svelte b/src/routes/companies/[id]/components/CompanySidebar.svelte
new file mode 100644
index 0000000..84cf98a
--- /dev/null
+++ b/src/routes/companies/[id]/components/CompanySidebar.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import {
+    type CompanyData,
+    companyInitials,
+    statusClass,
+    formatDate,
+    formatPhone,
+    formatAddress,
+  } from "../types";
+  import type { PermissionMap } from "$lib/permissions";
+
+  export let company: CompanyData | null;
+  export let permissions: PermissionMap;
+  export let isMobile: boolean;
+  export let mobileActiveTab: string | null;
+</script>
+
+<div
+  class="company-detail-left"
+  class:mobile-collapsed={isMobile && mobileActiveTab !== null}
+>
+  <div class="detail-pane-body">
+    <button
+      class="back-btn"
+      on:click={() => goto("/companies")}
+      aria-label="Back to companies"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        width="16"
+        height="16"
+      >
+        <path d="M19 12H5M12 19l-7-7 7-7" />
+      </svg>
+    </button>
+    {#if company}
+      <!-- Avatar + name + status -->
+      <div class="profile-header">
+        <div class="profile-avatar">
+          <span class="profile-initials">{companyInitials(company.name)}</span>
+        </div>
+        <h3 class="profile-name">{company.name}</h3>
+        {#if company.status}
+          <span class="profile-status {statusClass(company.status)}"
+            >{company.status}</span
+          >
+        {/if}
+      </div>
+
+      <!-- Info rows -->
+      <div class="profile-info">
+        {#if company.cw_Data?.primaryContact}
+          {@const contact = company.cw_Data.primaryContact}
+          <div class="primary-contact-section">
+            <div class="primary-contact-header">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                width="14"
+                height="14"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+              <span class="primary-contact-label">Primary Contact</span>
+            </div>
+            <div class="primary-contact-card">
+              <div class="primary-contact-name">
+                {[contact.firstName, contact.lastName]
+                  .filter(Boolean)
+                  .join(" ")}
+                {#if contact.inactive}
+                  <span class="primary-contact-inactive">Inactive</span>
+                {/if}
+              </div>
+              {#if contact.title}
+                <div class="primary-contact-title">{contact.title}</div>
+              {/if}
+              {#if contact.email}
+                <div class="primary-contact-detail">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    width="12"
+                    height="12"
+                  >
+                    <rect x="2" y="4" width="20" height="16" rx="2" />
+                    <path d="M22 7l-10 7L2 7" />
+                  </svg>
+                  <a
+                    href="mailto:{contact.email}"
+                    class="primary-contact-link"
+                    on:click|stopPropagation>{contact.email}</a
+                  >
+                </div>
+              {/if}
+              {#if contact.phone}
+                <div class="primary-contact-detail">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    width="12"
+                    height="12"
+                  >
+                    <path
+                      d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                    />
+                  </svg>
+                  <span>{formatPhone(contact.phone)}</span>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+
+        {#if company.type}
+          <div class="info-row">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="info-icon"
+            >
+              <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
+              <path d="M16 3h-8l-2 4h12z" />
+            </svg>
+            <div class="info-content">
+              <span class="info-label">Type</span>
+              <span class="info-value">{company.type}</span>
+            </div>
+          </div>
+        {/if}
+
+        {#if company.contactEmail}
+          <div class="info-row">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="info-icon"
+            >
+              <rect x="2" y="4" width="20" height="16" rx="2" />
+              <path d="M22 7l-10 7L2 7" />
+            </svg>
+            <div class="info-content">
+              <span class="info-label">Email</span>
+              <span class="info-value">{company.contactEmail}</span>
+            </div>
+          </div>
+        {/if}
+
+        {#if company.contactPhone}
+          <div class="info-row">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="info-icon"
+            >
+              <path
+                d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+              />
+            </svg>
+            <div class="info-content">
+              <span class="info-label">Phone</span>
+              <span class="info-value">{formatPhone(company.contactPhone)}</span
+              >
+            </div>
+          </div>
+        {/if}
+
+        {#if permissions["company.fetch.address"] && formatAddress(company).length > 0}
+          <div class="info-row">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="info-icon"
+            >
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
+            <div class="info-content">
+              <span class="info-label">Address</span>
+              <span class="info-value address-multiline">
+                {#each formatAddress(company) as line}
+                  {line}<br />
+                {/each}
+              </span>
+            </div>
+          </div>
+        {/if}
+
+        {#if formatDate(company.createdAt)}
+          <div class="info-row">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="info-icon"
+            >
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+              <line x1="16" y1="2" x2="16" y2="6" />
+              <line x1="8" y1="2" x2="8" y2="6" />
+              <line x1="3" y1="10" x2="21" y2="10" />
+            </svg>
+            <div class="info-content">
+              <span class="info-label">Created</span>
+              <span class="info-value">{formatDate(company.createdAt)}</span>
+            </div>
+          </div>
+        {/if}
+
+        {#if formatDate(company.updatedAt)}
+          <div class="info-row">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="info-icon"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 14" />
+            </svg>
+            <div class="info-content">
+              <span class="info-label">Updated</span>
+              <span class="info-value">{formatDate(company.updatedAt)}</span>
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      {#if company.identifier || company.id}
+        <div class="side-pane-identifier">
+          {company.identifier || company.id}
+        </div>
+      {/if}
+    {:else}
+      <div class="profile-empty">
+        <p>Company not found.</p>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/routes/companies/[id]/components/ConfigurationsTab.svelte b/src/routes/companies/[id]/components/ConfigurationsTab.svelte
new file mode 100644
index 0000000..d85d7f6
--- /dev/null
+++ b/src/routes/companies/[id]/components/ConfigurationsTab.svelte
@@ -0,0 +1,376 @@
+<script lang="ts">
+  import type { ConfigurationData } from "../types";
+  import { formatDate, configStatusClass } from "../types";
+
+  export let configurations: ConfigurationData[];
+  export let isMobile: boolean;
+
+  // Configurations split-view state
+  let selectedConfig: ConfigurationData | null = null;
+  let configFadeKey = 0;
+
+  // Track which password fields are revealed (by question id)
+  let revealedPasswords: Record<number, boolean> = {};
+
+  function togglePassword(questionId: number) {
+    revealedPasswords[questionId] = !revealedPasswords[questionId];
+    revealedPasswords = revealedPasswords;
+  }
+
+  function selectConfig(config: ConfigurationData) {
+    if (selectedConfig?.id === config.id) {
+      selectedConfig = null;
+    } else {
+      selectedConfig = config;
+      configFadeKey++;
+      revealedPasswords = {};
+    }
+  }
+</script>
+
+{#if configurations.length === 0}
+  <div class="tab-empty">
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      class="tab-empty-icon"
+    >
+      <path
+        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+      />
+    </svg>
+    <p>No configurations found</p>
+  </div>
+{:else}
+  <div
+    class="config-split"
+    class:expanded={selectedConfig !== null && !isMobile}
+  >
+    <!-- Left side: config buttons -->
+    <div
+      class="config-list"
+      class:collapsed={selectedConfig !== null && !isMobile}
+    >
+      {#each configurations as config (config.id)}
+        <button
+          class="config-item"
+          class:selected={selectedConfig?.id === config.id}
+          class:config-inactive={config.status?.name === "Inactive" ||
+            config.status?.name === "Automate Inactive"}
+          on:click={() => selectConfig(config)}
+          type="button"
+        >
+          <div class="config-item-header">
+            <div class="config-name-group">
+              <span
+                class="config-status-dot dot-{configStatusClass(
+                  config.status?.name,
+                )}"
+                title={config.status?.name ?? "Unknown"}
+              ></span>
+              <span class="config-name">{config.name}</span>
+            </div>
+            <div class="config-header-badges">
+              {#if config.status?.name && (!selectedConfig || isMobile)}
+                <span
+                  class="config-status-badge status-{configStatusClass(
+                    config.status.name,
+                  )}">{config.status.name}</span
+                >
+              {/if}
+              {#if config.type?.name && (!selectedConfig || isMobile)}
+                <span class="config-type-badge">{config.type.name}</span>
+              {/if}
+            </div>
+          </div>
+          {#if !selectedConfig || isMobile}
+            {#if config.description}
+              <p class="config-description">{config.description}</p>
+            {/if}
+            {#if config.key}
+              <div class="config-kv">
+                <span class="config-key">{config.key}</span>
+                {#if config.value}
+                  <span class="config-value">{config.value}</span>
+                {/if}
+              </div>
+            {/if}
+            {#if formatDate(config.updatedAt) || formatDate(config.createdAt) || formatDate(config.info?.lastUpdated) || formatDate(config.info?.dateEntered)}
+              <span class="config-date">
+                {#if formatDate(config.updatedAt)}
+                  Updated {formatDate(config.updatedAt)}
+                {:else if formatDate(config.info?.lastUpdated)}
+                  Updated {formatDate(config.info?.lastUpdated)}
+                {:else if formatDate(config.createdAt)}
+                  Created {formatDate(config.createdAt)}
+                {:else if formatDate(config.info?.dateEntered)}
+                  Created {formatDate(config.info?.dateEntered)}
+                {/if}
+              </span>
+            {/if}
+          {/if}
+        </button>
+      {/each}
+    </div>
+
+    <!-- Right side: config detail panel -->
+    {#if selectedConfig}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div
+        class="bottom-sheet-overlay"
+        class:active={selectedConfig !== null}
+        on:click={() => {
+          selectedConfig = null;
+        }}
+      >
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div class="bottom-sheet-panel" on:click|stopPropagation>
+          <div class="bottom-sheet-handle"></div>
+          <div class="bottom-sheet-body">
+            <div class="config-detail-panel">
+              {#key configFadeKey}
+                <div class="config-detail-content">
+                  <div class="config-detail-header">
+                    <div class="config-detail-header-left">
+                      <h3 class="config-detail-title">
+                        {selectedConfig.name}
+                      </h3>
+                      <div class="config-detail-meta-badges">
+                        {#if selectedConfig.type?.name}
+                          <span class="config-badge type"
+                            >{selectedConfig.type.name}</span
+                          >
+                        {/if}
+                        {#if selectedConfig.status?.name}
+                          <span
+                            class="config-badge status-{configStatusClass(
+                              selectedConfig.status.name,
+                            )}"
+                          >
+                            {selectedConfig.status.name}
+                          </span>
+                        {/if}
+                      </div>
+                    </div>
+                    <button
+                      class="config-detail-close"
+                      on:click={() => (selectedConfig = null)}
+                      aria-label="Close detail view"
+                      type="button"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        width="16"
+                        height="16"
+                      >
+                        <path d="M18 6L6 18M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {#if selectedConfig.serialNumber}
+                    <div class="config-serial">
+                      <span class="config-serial-label">Serial #</span>
+                      <span class="config-serial-value"
+                        >{selectedConfig.serialNumber}</span
+                      >
+                    </div>
+                  {/if}
+
+                  <!-- Questions / Fields -->
+                  {#if (selectedConfig.questions && selectedConfig.questions.length > 0) || selectedConfig.notes}
+                    <div class="config-questions">
+                      {#if selectedConfig.notes}
+                        <div class="config-notes">
+                          <h4 class="config-section-title">
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="16"
+                              height="16"
+                            >
+                              <path
+                                d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
+                              />
+                              <polyline points="14 2 14 8 20 8" />
+                              <line x1="16" y1="13" x2="8" y2="13" />
+                              <line x1="16" y1="17" x2="8" y2="17" />
+                              <polyline points="10 9 9 9 8 9" />
+                            </svg>
+                            Notes
+                          </h4>
+                          <p class="config-notes-text">
+                            {selectedConfig.notes}
+                          </p>
+                        </div>
+                      {/if}
+                      <h4 class="config-section-title">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="16"
+                          height="16"
+                        >
+                          <path
+                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
+                          />
+                          <rect x="9" y="3" width="6" height="4" rx="1" />
+                        </svg>
+                        Configuration Details
+                      </h4>
+                      <div class="questions-grid">
+                        {#each selectedConfig.questions as q (q.id)}
+                          <div
+                            class="question-row"
+                            class:has-answer={!!q.answer}
+                          >
+                            <span class="question-label">{q.question}</span>
+                            <div class="question-value-wrap">
+                              {#if q.fieldType === "Password"}
+                                <span class="question-value password-value">
+                                  {#if revealedPasswords[q.id]}
+                                    {q.answer || "—"}
+                                  {:else}
+                                    {q.answer ? "••••••••" : "—"}
+                                  {/if}
+                                </span>
+                                {#if q.answer}
+                                  <button
+                                    class="password-toggle"
+                                    on:click={() => togglePassword(q.id)}
+                                    type="button"
+                                    aria-label={revealedPasswords[q.id]
+                                      ? "Hide password"
+                                      : "Show password"}
+                                  >
+                                    {#if revealedPasswords[q.id]}
+                                      <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        width="14"
+                                        height="14"
+                                      >
+                                        <path
+                                          d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                        />
+                                        <path
+                                          d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                        />
+                                        <path
+                                          d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                        />
+                                        <line x1="1" y1="1" x2="23" y2="23" />
+                                      </svg>
+                                    {:else}
+                                      <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        width="14"
+                                        height="14"
+                                      >
+                                        <path
+                                          d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                        />
+                                        <circle cx="12" cy="12" r="3" />
+                                      </svg>
+                                    {/if}
+                                  </button>
+                                {/if}
+                              {:else if q.fieldType === "TextArea"}
+                                <span class="question-value textarea-value"
+                                  >{q.answer || "—"}</span
+                                >
+                              {:else}
+                                <span class="question-value"
+                                  >{q.answer || "—"}</span
+                                >
+                              {/if}
+                            </div>
+                          </div>
+                        {/each}
+                      </div>
+                    </div>
+                  {:else if !selectedConfig.notes}
+                    <div class="config-no-questions">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        width="32"
+                        height="32"
+                      >
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+                        <line x1="12" y1="17" x2="12.01" y2="17" />
+                      </svg>
+                      <p>No configuration fields available</p>
+                    </div>
+                  {/if}
+
+                  <!-- Footer metadata -->
+                  {#if selectedConfig.info}
+                    <div class="config-info-footer">
+                      {#if selectedConfig.info.enteredBy || selectedConfig.info.dateEntered}
+                        <div class="config-info-item">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                          >
+                            <path d="M12 5v14M5 12h14" />
+                          </svg>
+                          Created{#if selectedConfig.info.enteredBy}&nbsp;by
+                            <strong>{selectedConfig.info.enteredBy}</strong
+                            >{/if}{#if selectedConfig.info.dateEntered}&nbsp;on
+                            {formatDate(selectedConfig.info.dateEntered)}{/if}
+                        </div>
+                      {/if}
+                      {#if selectedConfig.info.updatedBy || selectedConfig.info.lastUpdated}
+                        <div class="config-info-item">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="13"
+                            height="13"
+                          >
+                            <circle cx="12" cy="12" r="10" />
+                            <polyline points="12 6 12 12 16 14" />
+                          </svg>
+                          Updated{#if selectedConfig.info.updatedBy}&nbsp;by
+                            <strong>{selectedConfig.info.updatedBy}</strong
+                            >{/if}{#if selectedConfig.info.lastUpdated}&nbsp;on
+                            {formatDate(selectedConfig.info.lastUpdated)}{/if}
+                        </div>
+                      {/if}
+                    </div>
+                  {/if}
+                </div>
+              {/key}
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/src/routes/companies/[id]/components/ContactsTab.svelte b/src/routes/companies/[id]/components/ContactsTab.svelte
new file mode 100644
index 0000000..185e48b
--- /dev/null
+++ b/src/routes/companies/[id]/components/ContactsTab.svelte
@@ -0,0 +1,211 @@
+<script lang="ts">
+  import type { CompanyData } from "../types";
+  import { formatPhone } from "../types";
+
+  export let company: CompanyData | null;
+</script>
+
+{#if !company?.cw_Data?.allContacts || company.cw_Data.allContacts.length === 0}
+  <div class="tab-empty">
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      class="tab-empty-icon"
+    >
+      <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 00-3-3.87" />
+      <path d="M16 3.13a4 4 0 010 7.75" />
+    </svg>
+    <p>No contacts found</p>
+  </div>
+{:else}
+  {@const activeContacts = company.cw_Data.allContacts.filter(
+    (c) => !c.inactive,
+  )}
+  {@const inactiveContacts = company.cw_Data.allContacts.filter(
+    (c) => c.inactive,
+  )}
+
+  <!-- Active contacts -->
+  {#if activeContacts.length > 0}
+    <div class="contacts-section">
+      <div class="contacts-section-header">
+        <h3 class="contacts-section-title">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-muted)"
+            stroke-width="2"
+            width="16"
+            height="16"
+          >
+            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 00-3-3.87" />
+            <path d="M16 3.13a4 4 0 010 7.75" />
+          </svg>
+          Active
+        </h3>
+        <span class="contacts-section-count">{activeContacts.length}</span>
+      </div>
+      <div class="contacts-grid">
+        {#each activeContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+          <div class="contact-card">
+            <div class="contact-card-header">
+              <div class="contact-avatar">
+                <span class="contact-initials">
+                  {contact.firstName?.[0] ?? ""}{contact.lastName?.[0] ?? ""}
+                </span>
+              </div>
+              <div class="contact-card-info">
+                <div class="contact-name">
+                  {[contact.firstName, contact.lastName]
+                    .filter(Boolean)
+                    .join(" ")}
+                </div>
+                {#if contact.title}
+                  <div class="contact-title">{contact.title}</div>
+                {/if}
+              </div>
+            </div>
+            <div class="contact-card-details">
+              {#if contact.email}
+                <div class="contact-detail-row">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-secondary)"
+                    stroke-width="2"
+                    width="13"
+                    height="13"
+                    style="min-width:13px;min-height:13px;"
+                  >
+                    <rect x="2" y="4" width="20" height="16" rx="2" />
+                    <path d="M22 7l-10 7L2 7" />
+                  </svg>
+                  <a
+                    href="mailto:{contact.email}"
+                    class="contact-link"
+                    on:click|stopPropagation>{contact.email}</a
+                  >
+                </div>
+              {/if}
+              {#if contact.phone}
+                <div class="contact-detail-row">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-secondary)"
+                    stroke-width="2"
+                    width="13"
+                    height="13"
+                    style="min-width:13px;min-height:13px;"
+                  >
+                    <path
+                      d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                    />
+                  </svg>
+                  <span>{formatPhone(contact.phone)}</span>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Inactive contacts -->
+  {#if inactiveContacts.length > 0}
+    <div class="contacts-section contacts-section-inactive">
+      <div class="contacts-section-header">
+        <h3 class="contacts-section-title">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-muted)"
+            stroke-width="2"
+            width="16"
+            height="16"
+          >
+            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <line x1="23" y1="13" x2="17" y2="13" />
+          </svg>
+          Inactive
+        </h3>
+        <span class="contacts-section-count inactive"
+          >{inactiveContacts.length}</span
+        >
+      </div>
+      <div class="contacts-grid">
+        {#each inactiveContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+          <div class="contact-card contact-inactive">
+            <div class="contact-card-header">
+              <div class="contact-avatar contact-avatar-inactive">
+                <span class="contact-initials">
+                  {contact.firstName?.[0] ?? ""}{contact.lastName?.[0] ?? ""}
+                </span>
+              </div>
+              <div class="contact-card-info">
+                <div class="contact-name">
+                  {[contact.firstName, contact.lastName]
+                    .filter(Boolean)
+                    .join(" ")}
+                  <span class="contact-inactive-badge">Inactive</span>
+                </div>
+                {#if contact.title}
+                  <div class="contact-title">{contact.title}</div>
+                {/if}
+              </div>
+            </div>
+            <div class="contact-card-details">
+              {#if contact.email}
+                <div class="contact-detail-row">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-secondary)"
+                    stroke-width="2"
+                    width="13"
+                    height="13"
+                    style="min-width:13px;min-height:13px;"
+                  >
+                    <rect x="2" y="4" width="20" height="16" rx="2" />
+                    <path d="M22 7l-10 7L2 7" />
+                  </svg>
+                  <a
+                    href="mailto:{contact.email}"
+                    class="contact-link"
+                    on:click|stopPropagation>{contact.email}</a
+                  >
+                </div>
+              {/if}
+              {#if contact.phone}
+                <div class="contact-detail-row">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-secondary)"
+                    stroke-width="2"
+                    width="13"
+                    height="13"
+                    style="min-width:13px;min-height:13px;"
+                  >
+                    <path
+                      d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
+                    />
+                  </svg>
+                  <span>{formatPhone(contact.phone)}</span>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+{/if}
diff --git a/src/routes/companies/[id]/components/CredentialsTab.svelte b/src/routes/companies/[id]/components/CredentialsTab.svelte
new file mode 100644
index 0000000..f9c2451
--- /dev/null
+++ b/src/routes/companies/[id]/components/CredentialsTab.svelte
@@ -0,0 +1,1544 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import CreateCredentialModal from "../../../../components/CreateCredentialModal.svelte";
+  import { credential as credentialApi } from "$lib/optima-api/modules/credentials";
+  import type { Credential } from "$lib/optima-api/modules/credentials";
+  import type {
+    CredentialType,
+    CredentialTypeField,
+  } from "$lib/optima-api/modules/credentialTypes";
+  import type { PermissionMap } from "$lib/permissions";
+  import { formatDate } from "../types";
+
+  export let companyId: string;
+  export let credentials: Credential[];
+  export let credentialTypes: CredentialType[];
+  export let accessToken: string | null;
+  export let permissions: PermissionMap;
+  export let isMobile: boolean;
+  export let isCreateCredentialOpen: boolean;
+
+  // Credential actions state
+  let openCredMenuId: string | null = null;
+  let credToDelete: Credential | null = null;
+  let isDeleting = false;
+  let deleteError = "";
+
+  // Edit mode state
+  let isEditingCredential = false;
+  let editCredName = "";
+  let editCredNotes = "";
+  let editCredFields: Record<string, string> = {};
+  let isSavingCredential = false;
+  let saveCredError = "";
+
+  // Credentials split-view state
+  let selectedCredential: Credential | null = null;
+  let credFadeKey = 0;
+  let revealedCredFields: Record<string, boolean> = {};
+  let loadingCredFields: Record<string, boolean> = {};
+  let fetchedSecureValues: Record<string, string> = {};
+  let credFieldTimers: Record<string, ReturnType<typeof setTimeout>> = {};
+
+  // Sub-credentials state
+  let subCredentials: Credential[] = [];
+  let isLoadingSubCreds = false;
+  let addingSubCred: string | null = null;
+  let newSubCredName = "";
+  let newSubCredFields: Record<string, string> = {};
+  let isSubmittingSubCred = false;
+  let subCredError = "";
+  let deletingSubCredId: string | null = null;
+
+  function toggleCredMenu(id: string) {
+    openCredMenuId = openCredMenuId === id ? null : id;
+  }
+
+  function handleEditCredential(cred: Credential | null) {
+    if (!cred) return;
+    openCredMenuId = null;
+    if (selectedCredential?.id !== cred.id) {
+      selectedCredential = cred;
+      credFadeKey++;
+      revealedCredFields = {};
+      loadingCredFields = {};
+    }
+    editCredName = cred.name;
+    editCredNotes = cred.notes ?? "";
+    const newFields: Record<string, string> = {};
+    cred.fields.forEach((f) => {
+      newFields[f.id] = f.secure ? "" : (f.value ?? "");
+    });
+    editCredFields = newFields;
+    saveCredError = "";
+    isEditingCredential = true;
+  }
+
+  function cancelEditCredential() {
+    isEditingCredential = false;
+    editCredName = "";
+    editCredNotes = "";
+    editCredFields = {};
+    saveCredError = "";
+  }
+
+  async function saveEditCredential() {
+    if (!selectedCredential || !accessToken) return;
+    isSavingCredential = true;
+    saveCredError = "";
+    try {
+      const updates: { name?: string; notes?: string } = {};
+      if (editCredName.trim() !== selectedCredential.name) {
+        updates.name = editCredName.trim();
+      }
+      if (editCredNotes !== (selectedCredential.notes ?? "")) {
+        updates.notes = editCredNotes;
+      }
+      if (Object.keys(updates).length > 0) {
+        await credentialApi.update(accessToken, selectedCredential.id, updates);
+      }
+      const fieldsToUpdate = selectedCredential.fields
+        .filter((f) => {
+          const newVal = editCredFields[f.id];
+          if (f.secure)
+            return typeof newVal === "string" && newVal.trim().length > 0;
+          return true;
+        })
+        .map((f) => ({
+          fieldId: f.id,
+          value: editCredFields[f.id] ?? "",
+        }));
+
+      if (fieldsToUpdate.length > 0) {
+        await credentialApi.updateFields(
+          accessToken,
+          selectedCredential.id,
+          fieldsToUpdate as unknown as import("$lib/optima-api/modules/credentials").CredentialField[],
+        );
+      }
+      isEditingCredential = false;
+      revealedCredFields = {};
+      fetchedSecureValues = {};
+      await invalidateAll();
+      const updated = credentials.find((c) => c.id === selectedCredential?.id);
+      if (updated) {
+        selectedCredential = updated;
+        credFadeKey++;
+      }
+    } catch (err) {
+      saveCredError =
+        err instanceof Error ? err.message : "Failed to save changes";
+      console.error("Failed to save credential:", err);
+    } finally {
+      isSavingCredential = false;
+    }
+  }
+
+  function handleDeleteCredential(cred: Credential | null) {
+    if (!cred) return;
+    openCredMenuId = null;
+    credToDelete = cred;
+    deleteError = "";
+  }
+
+  function cancelDelete() {
+    credToDelete = null;
+    deleteError = "";
+  }
+
+  async function confirmDelete() {
+    if (!credToDelete || !accessToken) return;
+    isDeleting = true;
+    deleteError = "";
+    try {
+      await credentialApi.delete(accessToken, credToDelete.id);
+      if (selectedCredential?.id === credToDelete.id) {
+        selectedCredential = null;
+      }
+      credToDelete = null;
+      await invalidateAll();
+    } catch (err) {
+      deleteError =
+        err instanceof Error ? err.message : "Failed to delete credential";
+      console.error("Failed to delete credential:", err);
+    } finally {
+      isDeleting = false;
+    }
+  }
+
+  function selectCredential(cred: Credential) {
+    if (selectedCredential?.id === cred.id) {
+      selectedCredential = null;
+      isEditingCredential = false;
+      subCredentials = [];
+    } else {
+      selectedCredential = cred;
+      credFadeKey++;
+      revealedCredFields = {};
+      loadingCredFields = {};
+      isEditingCredential = false;
+      subCredentials = [];
+      cancelAddSubCred();
+      Object.values(credFieldTimers).forEach(clearTimeout);
+      credFieldTimers = {};
+      const hasMultiCredFields = getMultiCredFields(cred).length > 0;
+      if (hasMultiCredFields) {
+        loadSubCredentials(cred.id);
+      }
+    }
+  }
+
+  function getMultiCredFields(cred: Credential): CredentialTypeField[] {
+    const ct = credentialTypes.find((t) => t.id === cred.typeId);
+    if (!ct) return [];
+    return ct.fields.filter((f) => f.valueType === "multi_credential");
+  }
+
+  function subCredKey(subCredId: string, fieldId: string): string {
+    return `sc:${subCredId}:${fieldId}`;
+  }
+
+  function autoHideCredField(fieldId: string) {
+    if (credFieldTimers[fieldId]) clearTimeout(credFieldTimers[fieldId]);
+    credFieldTimers[fieldId] = setTimeout(() => {
+      revealedCredFields[fieldId] = false;
+      revealedCredFields = revealedCredFields;
+      delete fetchedSecureValues[fieldId];
+      fetchedSecureValues = fetchedSecureValues;
+      delete credFieldTimers[fieldId];
+    }, 30_000);
+  }
+
+  async function toggleCredField(
+    credentialId: string,
+    fieldId: string,
+    isSecure: boolean,
+    plaintextValue?: string,
+    stateKey?: string,
+  ) {
+    const key = stateKey ?? fieldId;
+    if (revealedCredFields[key]) {
+      revealedCredFields[key] = false;
+      revealedCredFields = revealedCredFields;
+      delete fetchedSecureValues[key];
+      fetchedSecureValues = fetchedSecureValues;
+      if (credFieldTimers[key]) {
+        clearTimeout(credFieldTimers[key]);
+        delete credFieldTimers[key];
+      }
+      return;
+    }
+    loadingCredFields[key] = true;
+    loadingCredFields = loadingCredFields;
+    const minDelay = new Promise((r) => setTimeout(r, 500));
+    try {
+      if (isSecure) {
+        const [response] = await Promise.all([
+          fetch(
+            `/companies/${companyId}/secure-value?credentialId=${encodeURIComponent(credentialId)}&fieldId=${encodeURIComponent(fieldId)}`,
+          ),
+          minDelay,
+        ]);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const result = await response.json();
+        fetchedSecureValues[key] =
+          result?.data?.value ?? result?.data ?? result?.value ?? result ?? "";
+      } else {
+        await minDelay;
+        fetchedSecureValues[key] = plaintextValue ?? "";
+      }
+      fetchedSecureValues = fetchedSecureValues;
+      revealedCredFields[key] = true;
+      revealedCredFields = revealedCredFields;
+      autoHideCredField(key);
+    } catch (err) {
+      console.error("Failed to fetch secure value:", err);
+      fetchedSecureValues[key] = "Error loading value";
+      fetchedSecureValues = fetchedSecureValues;
+      revealedCredFields[key] = true;
+      revealedCredFields = revealedCredFields;
+    } finally {
+      loadingCredFields[key] = false;
+      loadingCredFields = loadingCredFields;
+    }
+  }
+
+  async function loadSubCredentials(credentialId: string) {
+    if (!accessToken) return;
+    isLoadingSubCreds = true;
+    try {
+      const result = await credentialApi.fetchSubCredentials(
+        accessToken,
+        credentialId,
+      );
+      subCredentials = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to fetch sub-credentials:", err);
+      subCredentials = [];
+    } finally {
+      isLoadingSubCreds = false;
+    }
+  }
+
+  function openAddSubCred(fieldId: string, subFields: CredentialTypeField[]) {
+    addingSubCred = fieldId;
+    newSubCredName = "";
+    newSubCredFields = {};
+    subCredError = "";
+    (subFields ?? []).forEach((sf) => {
+      newSubCredFields[sf.id] = "";
+    });
+  }
+
+  function cancelAddSubCred() {
+    addingSubCred = null;
+    newSubCredName = "";
+    newSubCredFields = {};
+    subCredError = "";
+  }
+
+  async function submitSubCred(fieldId: string) {
+    if (!selectedCredential || !accessToken || !newSubCredName.trim()) return;
+    isSubmittingSubCred = true;
+    subCredError = "";
+    try {
+      await credentialApi.addSubCredential(accessToken, selectedCredential.id, {
+        fieldId,
+        name: newSubCredName.trim(),
+        fields: Object.entries(newSubCredFields).map(([fid, val]) => ({
+          fieldId: fid,
+          value: val,
+        })),
+      });
+      cancelAddSubCred();
+      await loadSubCredentials(selectedCredential.id);
+    } catch (err) {
+      subCredError =
+        err instanceof Error ? err.message : "Failed to add sub-credential";
+      console.error("Failed to add sub-credential:", err);
+    } finally {
+      isSubmittingSubCred = false;
+    }
+  }
+
+  async function deleteSubCred(subId: string) {
+    if (!selectedCredential || !accessToken) return;
+    deletingSubCredId = subId;
+    try {
+      await credentialApi.removeSubCredential(
+        accessToken,
+        selectedCredential.id,
+        subId,
+      );
+      await loadSubCredentials(selectedCredential.id);
+    } catch (err) {
+      console.error("Failed to delete sub-credential:", err);
+    } finally {
+      deletingSubCredId = null;
+    }
+  }
+</script>
+
+<svelte:window
+  on:click={() => {
+    openCredMenuId = null;
+  }}
+/>
+
+<CreateCredentialModal
+  bind:isOpen={isCreateCredentialOpen}
+  {companyId}
+  accessToken={accessToken ?? ""}
+  {credentialTypes}
+  onSuccess={() => {
+    isCreateCredentialOpen = false;
+    invalidateAll();
+  }}
+/>
+
+<!-- Delete confirmation dialog -->
+{#if credToDelete}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="delete-overlay" on:click={cancelDelete}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="delete-dialog" on:click|stopPropagation>
+      <div class="delete-dialog-icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          width="28"
+          height="28"
+        >
+          <polyline points="3 6 5 6 21 6" />
+          <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
+          <path d="M10 11v6M14 11v6" />
+          <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+        </svg>
+      </div>
+      <h3 class="delete-dialog-title">Delete Credential</h3>
+      <p class="delete-dialog-msg">
+        Are you sure you want to delete
+        <strong>{credToDelete.name}</strong>? This action cannot be undone.
+      </p>
+      {#if deleteError}
+        <p class="delete-dialog-error">{deleteError}</p>
+      {/if}
+      <div class="delete-dialog-actions">
+        <button
+          type="button"
+          class="delete-dialog-btn cancel"
+          on:click={cancelDelete}
+          disabled={isDeleting}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="delete-dialog-btn confirm"
+          on:click={confirmDelete}
+          disabled={isDeleting}
+        >
+          {#if isDeleting}
+            Deleting…
+          {:else}
+            Delete
+          {/if}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if credentials.length === 0}
+  <div class="tab-empty">
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      class="tab-empty-icon"
+    >
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+    <p>No credentials found for this company</p>
+    <button
+      type="button"
+      class="create-credential-btn"
+      on:click={() => (isCreateCredentialOpen = true)}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        width="14"
+        height="14"
+      >
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+      Create Credential
+    </button>
+  </div>
+{:else}
+  <div
+    class="config-split"
+    class:expanded={selectedCredential !== null && !isMobile}
+  >
+    <!-- Left side: credential buttons -->
+    <div
+      class="config-list"
+      class:collapsed={selectedCredential !== null && !isMobile}
+    >
+      {#each credentials as cred (cred.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="config-item"
+          class:selected={selectedCredential?.id === cred.id}
+          on:click={() => selectCredential(cred)}
+          on:keydown={(e) => e.key === "Enter" && selectCredential(cred)}
+          role="button"
+          tabindex="0"
+        >
+          <div class="config-item-header">
+            <div class="config-name-group">
+              <span class="config-status-dot dot-active" title="Active"></span>
+              <span class="config-name">{cred.name}</span>
+            </div>
+            <div class="config-header-badges">
+              {#if cred.type?.name && (!selectedCredential || isMobile)}
+                <span class="config-type-badge">{cred.type.name}</span>
+              {/if}
+              {#if !selectedCredential || isMobile}
+                <div class="cred-menu-wrap">
+                  <button
+                    type="button"
+                    class="cred-menu-btn"
+                    aria-label="Credential actions"
+                    on:click|stopPropagation={() => toggleCredMenu(cred.id)}
+                  >
+                    <svg
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                      width="14"
+                      height="14"
+                    >
+                      <circle cx="8" cy="2.5" r="1.5" />
+                      <circle cx="8" cy="8" r="1.5" />
+                      <circle cx="8" cy="13.5" r="1.5" />
+                    </svg>
+                  </button>
+                  {#if openCredMenuId === cred.id}
+                    <!-- svelte-ignore a11y_no_static_element_interactions -->
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <div class="cred-dropdown-menu" on:click|stopPropagation>
+                      <button
+                        type="button"
+                        class="cred-dropdown-item"
+                        on:click|stopPropagation={() =>
+                          handleEditCredential(cred)}
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="13"
+                          height="13"
+                        >
+                          <path
+                            d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"
+                          />
+                          <path
+                            d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
+                          />
+                        </svg>
+                        Edit
+                      </button>
+                      <div class="cred-dropdown-sep"></div>
+                      <button
+                        type="button"
+                        class="cred-dropdown-item cred-dropdown-item-danger"
+                        on:click|stopPropagation={() =>
+                          handleDeleteCredential(cred)}
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="13"
+                          height="13"
+                        >
+                          <polyline points="3 6 5 6 21 6" />
+                          <path
+                            d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                          />
+                          <path d="M10 11v6M14 11v6" />
+                          <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+                        </svg>
+                        Delete
+                      </button>
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          </div>
+          {#if !selectedCredential || isMobile}
+            {#if cred.type?.name}
+              <p class="config-description">{cred.type.name}</p>
+            {/if}
+            {#if cred.fields.length > 0}
+              <span class="config-date">
+                {cred.fields.length} field{cred.fields.length === 1 ? "" : "s"}
+              </span>
+            {/if}
+            {#if formatDate(cred.updatedAt) || formatDate(cred.createdAt)}
+              <span class="config-date">
+                {#if formatDate(cred.updatedAt)}
+                  Updated {formatDate(cred.updatedAt)}
+                {:else}
+                  Created {formatDate(cred.createdAt)}
+                {/if}
+              </span>
+            {/if}
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    <!-- Right side: credential detail panel -->
+    {#if selectedCredential}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div
+        class="bottom-sheet-overlay"
+        class:active={selectedCredential !== null}
+        on:click={() => {
+          selectedCredential = null;
+          isEditingCredential = false;
+        }}
+      >
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div class="bottom-sheet-panel" on:click|stopPropagation>
+          <div class="bottom-sheet-handle"></div>
+          <div class="bottom-sheet-body">
+            <div class="config-detail-panel">
+              {#key credFadeKey}
+                <div class="config-detail-content">
+                  <div class="config-detail-header">
+                    <div class="config-detail-header-left">
+                      {#if isEditingCredential}
+                        <input
+                          class="cred-edit-name-input"
+                          type="text"
+                          bind:value={editCredName}
+                          placeholder="Credential name"
+                        />
+                      {:else}
+                        <h3 class="config-detail-title">
+                          {selectedCredential.name}
+                        </h3>
+                      {/if}
+                      <div class="config-detail-meta-badges">
+                        {#if selectedCredential.type?.name}
+                          <span class="config-badge type">
+                            {selectedCredential.type.name}
+                          </span>
+                        {/if}
+                      </div>
+                    </div>
+                    <div class="config-detail-header-actions">
+                      {#if isEditingCredential}
+                        <button
+                          class="cred-action-btn cred-action-save"
+                          on:click={saveEditCredential}
+                          disabled={isSavingCredential || !editCredName.trim()}
+                          aria-label="Save changes"
+                          type="button"
+                          title="Save changes"
+                        >
+                          {#if isSavingCredential}
+                            <svg
+                              viewBox="0 0 24 24"
+                              width="14"
+                              height="14"
+                              class="spin-icon"
+                            >
+                              <circle
+                                cx="12"
+                                cy="12"
+                                r="10"
+                                stroke="currentColor"
+                                stroke-width="3"
+                                fill="none"
+                                opacity="0.25"
+                              />
+                              <path
+                                d="M12 2a10 10 0 0 1 10 10"
+                                stroke="currentColor"
+                                stroke-width="3"
+                                fill="none"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          {:else}
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="14"
+                              height="14"
+                            >
+                              <polyline points="20 6 9 17 4 12" />
+                            </svg>
+                          {/if}
+                        </button>
+                      {:else}
+                        <button
+                          class="cred-action-btn cred-action-edit"
+                          on:click={() =>
+                            handleEditCredential(selectedCredential)}
+                          aria-label="Edit credential"
+                          type="button"
+                          title="Edit credential"
+                        >
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="14"
+                            height="14"
+                          >
+                            <path
+                              d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"
+                            />
+                            <path
+                              d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
+                            />
+                          </svg>
+                        </button>
+                        <button
+                          class="cred-action-btn cred-action-delete"
+                          on:click={() =>
+                            handleDeleteCredential(selectedCredential)}
+                          aria-label="Delete credential"
+                          type="button"
+                          title="Delete credential"
+                        >
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="14"
+                            height="14"
+                          >
+                            <polyline points="3 6 5 6 21 6" />
+                            <path
+                              d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                            />
+                            <path d="M10 11v6M14 11v6" />
+                            <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+                          </svg>
+                        </button>
+                      {/if}
+                      <button
+                        class="config-detail-close"
+                        on:click={() => {
+                          if (isEditingCredential) {
+                            cancelEditCredential();
+                          } else {
+                            selectedCredential = null;
+                          }
+                        }}
+                        aria-label={isEditingCredential
+                          ? "Cancel editing"
+                          : "Close detail view"}
+                        type="button"
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="16"
+                          height="16"
+                        >
+                          <path d="M18 6L6 18M6 6l12 12" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+
+                  <!-- Credential fields -->
+                  {#if (selectedCredential.fields && selectedCredential.fields.length > 0) || isEditingCredential || selectedCredential.notes}
+                    <div class="config-questions">
+                      <!-- Notes -->
+                      {#if isEditingCredential || selectedCredential.notes}
+                        <div class="cred-notes-section">
+                          <h4 class="config-section-title">
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              width="16"
+                              height="16"
+                            >
+                              <path
+                                d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
+                              />
+                              <polyline points="14 2 14 8 20 8" />
+                              <line x1="16" y1="13" x2="8" y2="13" />
+                              <line x1="16" y1="17" x2="8" y2="17" />
+                              <polyline points="10 9 9 9 8 9" />
+                            </svg>
+                            Notes
+                          </h4>
+                          {#if isEditingCredential}
+                            <textarea
+                              class="cred-edit-notes-input"
+                              bind:value={editCredNotes}
+                              placeholder="Add notes…"
+                              rows="3"
+                            ></textarea>
+                          {:else}
+                            <p class="cred-notes-text">
+                              {selectedCredential.notes}
+                            </p>
+                          {/if}
+                        </div>
+                      {/if}
+                      <h4 class="config-section-title">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="16"
+                          height="16"
+                        >
+                          <path
+                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
+                          />
+                          <rect x="9" y="3" width="6" height="4" rx="1" />
+                        </svg>
+                        Credential Fields
+                      </h4>
+                      <div class="questions-grid">
+                        {#each selectedCredential.fields as field (field.id)}
+                          {#if field.valueType === "multi_credential"}
+                            <!-- Skip multi_credential fields in the regular grid -->
+                          {:else}
+                            <div
+                              class="question-row"
+                              class:has-answer={!!field.value}
+                            >
+                              <div class="cred-field-label-row">
+                                <span class="question-label">{field.name}</span>
+                                {#if field.required && isEditingCredential}
+                                  <span
+                                    class="cred-required-star"
+                                    title="Required">*</span
+                                  >
+                                {/if}
+                                {#if field.secure}
+                                  <svg
+                                    class="cred-lock-icon"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="11"
+                                    height="11"
+                                    aria-label="Secure"
+                                  >
+                                    <title>Secure</title>
+                                    <rect
+                                      x="3"
+                                      y="11"
+                                      width="18"
+                                      height="11"
+                                      rx="2"
+                                      ry="2"
+                                    />
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                                  </svg>
+                                {/if}
+                              </div>
+                              <div class="question-value-wrap">
+                                {#if isEditingCredential}
+                                  <input
+                                    class="cred-edit-field-input"
+                                    type={field.valueType === "email"
+                                      ? "email"
+                                      : field.valueType === "url"
+                                        ? "url"
+                                        : "text"}
+                                    bind:value={editCredFields[field.id]}
+                                    placeholder={field.secure
+                                      ? "Leave blank to keep existing"
+                                      : `Enter ${field.name}`}
+                                  />
+                                {:else if field.secure || field.valueType === "password" || field.valueType === "generic_secret" || field.valueType === "bitlocker_key"}
+                                  <span class="question-value password-value">
+                                    {#if loadingCredFields[field.id]}
+                                      <span
+                                        class="cred-secure-spinner"
+                                        aria-label="Loading"
+                                      >
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          width="14"
+                                          height="14"
+                                          class="spin-icon"
+                                        >
+                                          <circle
+                                            cx="12"
+                                            cy="12"
+                                            r="10"
+                                            stroke="currentColor"
+                                            stroke-width="3"
+                                            fill="none"
+                                            opacity="0.25"
+                                          />
+                                          <path
+                                            d="M12 2a10 10 0 0 1 10 10"
+                                            stroke="currentColor"
+                                            stroke-width="3"
+                                            fill="none"
+                                            stroke-linecap="round"
+                                          />
+                                        </svg>
+                                      </span>
+                                    {:else if revealedCredFields[field.id]}
+                                      <span
+                                        class="cred-revealed-value {field.valueType ===
+                                          'bitlocker_key' ||
+                                        field.valueType === 'license_key'
+                                          ? 'mono'
+                                          : ''}"
+                                      >
+                                        {fetchedSecureValues[field.id] || "—"}
+                                      </span>
+                                    {:else}
+                                      ••••••••
+                                    {/if}
+                                  </span>
+                                  {#if (!field.secure || permissions["credential.secure_values.read"]) && !loadingCredFields[field.id]}
+                                    {#if revealedCredFields[field.id]}
+                                      <span
+                                        class="cred-countdown-wrap"
+                                        title="Auto-hides in 30 seconds"
+                                      >
+                                        <svg
+                                          class="cred-countdown-ring"
+                                          viewBox="0 0 20 20"
+                                          width="20"
+                                          height="20"
+                                        >
+                                          <circle
+                                            cx="10"
+                                            cy="10"
+                                            r="8"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            opacity="0.1"
+                                          />
+                                          <circle
+                                            cx="10"
+                                            cy="10"
+                                            r="8"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            stroke-linecap="round"
+                                            stroke-dasharray="50.265"
+                                            stroke-dashoffset="0"
+                                            class="cred-countdown-arc"
+                                          />
+                                        </svg>
+                                      </span>
+                                    {/if}
+                                    <button
+                                      class="password-toggle"
+                                      on:click={() =>
+                                        toggleCredField(
+                                          selectedCredential?.id ?? "",
+                                          field.id,
+                                          field.secure,
+                                          field.value,
+                                        )}
+                                      type="button"
+                                      aria-label={revealedCredFields[field.id]
+                                        ? "Hide value"
+                                        : "Show value"}
+                                    >
+                                      {#if revealedCredFields[field.id]}
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="14"
+                                          height="14"
+                                        >
+                                          <path
+                                            d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                          />
+                                          <path
+                                            d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                          />
+                                          <path
+                                            d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                          />
+                                          <line x1="1" y1="1" x2="23" y2="23" />
+                                        </svg>
+                                      {:else}
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          stroke-width="2"
+                                          width="14"
+                                          height="14"
+                                        >
+                                          <path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                          />
+                                          <circle cx="12" cy="12" r="3" />
+                                        </svg>
+                                      {/if}
+                                    </button>
+                                  {/if}
+                                {:else if field.valueType === "url" && field.value}
+                                  <a
+                                    class="question-value cred-url-value"
+                                    href={field.value}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    on:click|stopPropagation
+                                  >
+                                    {field.value}
+                                  </a>
+                                {:else if field.valueType === "email" && field.value}
+                                  <a
+                                    class="question-value cred-email-value"
+                                    href="mailto:{field.value}"
+                                    on:click|stopPropagation
+                                  >
+                                    {field.value}
+                                  </a>
+                                {:else if field.valueType === "ip_address" && field.value}
+                                  <span class="question-value mono"
+                                    >{field.value}</span
+                                  >
+                                {:else if field.valueType === "license_key" && field.value}
+                                  <span class="question-value mono"
+                                    >{field.value}</span
+                                  >
+                                {:else}
+                                  <span class="question-value"
+                                    >{field.value || "—"}</span
+                                  >
+                                {/if}
+                              </div>
+                            </div>
+                          {/if}
+                        {/each}
+                      </div>
+
+                      <!-- Sub-credentials for multi_credential fields -->
+                      {#if selectedCredential && getMultiCredFields(selectedCredential).length > 0}
+                        {#each getMultiCredFields(selectedCredential) as mcField (mcField.id)}
+                          <div class="sub-creds-section">
+                            <div class="sub-creds-header">
+                              <h4 class="sub-creds-title">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="14"
+                                  height="14"
+                                >
+                                  <rect
+                                    x="2"
+                                    y="3"
+                                    width="20"
+                                    height="6"
+                                    rx="1"
+                                  />
+                                  <rect
+                                    x="2"
+                                    y="15"
+                                    width="20"
+                                    height="6"
+                                    rx="1"
+                                  />
+                                  <path d="M12 9v6" />
+                                </svg>
+                                {mcField.name}
+                                {#if subCredentials.length > 0}
+                                  <span class="sub-creds-count"
+                                    >{subCredentials.length}</span
+                                  >
+                                {/if}
+                              </h4>
+                              {#if !isEditingCredential && addingSubCred !== mcField.id}
+                                <button
+                                  type="button"
+                                  class="sub-cred-add-btn"
+                                  on:click={() =>
+                                    openAddSubCred(
+                                      mcField.id,
+                                      mcField.subFields ?? [],
+                                    )}
+                                >
+                                  <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    width="12"
+                                    height="12"
+                                  >
+                                    <line x1="12" y1="5" x2="12" y2="19" /><line
+                                      x1="5"
+                                      y1="12"
+                                      x2="19"
+                                      y2="12"
+                                    />
+                                  </svg>
+                                  Add
+                                </button>
+                              {/if}
+                            </div>
+
+                            {#if isLoadingSubCreds}
+                              <div class="sub-creds-loading">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  width="14"
+                                  height="14"
+                                  class="spin-icon"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                    fill="none"
+                                    opacity="0.25"
+                                  />
+                                  <path
+                                    d="M12 2a10 10 0 0 1 10 10"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                    fill="none"
+                                    stroke-linecap="round"
+                                  />
+                                </svg>
+                                <span>Loading…</span>
+                              </div>
+                            {:else if subCredentials.length === 0 && addingSubCred !== mcField.id}
+                              <p class="sub-creds-empty">No entries yet.</p>
+                            {:else}
+                              <table class="sub-creds-table">
+                                <thead>
+                                  <tr>
+                                    <th>Name</th>
+                                    {#each mcField.subFields ?? [] as sf (sf.id)}
+                                      <th>
+                                        {sf.name}
+                                        {#if sf.secure}
+                                          <svg
+                                            class="cred-lock-icon"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="9"
+                                            height="9"
+                                          >
+                                            <rect
+                                              x="3"
+                                              y="11"
+                                              width="18"
+                                              height="11"
+                                              rx="2"
+                                              ry="2"
+                                            />
+                                            <path
+                                              d="M7 11V7a5 5 0 0 1 10 0v4"
+                                            />
+                                          </svg>
+                                        {/if}
+                                      </th>
+                                    {/each}
+                                    {#if !isEditingCredential}
+                                      <th class="sub-creds-th-actions"></th>
+                                    {/if}
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {#each subCredentials as subCred (subCred.id)}
+                                    <tr class="sub-cred-row">
+                                      <td class="sub-cred-name-cell"
+                                        >{subCred.name}</td
+                                      >
+                                      {#each subCred.fields as sf (sf.id)}
+                                        <td
+                                          class:mono={sf.valueType ===
+                                            "ip_address" ||
+                                            sf.valueType === "license_key"}
+                                        >
+                                          {#if sf.secure}
+                                            <span class="sub-cred-secure-cell">
+                                              {#if loadingCredFields[subCredKey(subCred.id, sf.id)]}
+                                                <svg
+                                                  viewBox="0 0 24 24"
+                                                  width="12"
+                                                  height="12"
+                                                  class="spin-icon sub-cred-spinner"
+                                                >
+                                                  <circle
+                                                    cx="12"
+                                                    cy="12"
+                                                    r="10"
+                                                    stroke="currentColor"
+                                                    stroke-width="3"
+                                                    fill="none"
+                                                    opacity="0.25"
+                                                  />
+                                                  <path
+                                                    d="M12 2a10 10 0 0 1 10 10"
+                                                    stroke="currentColor"
+                                                    stroke-width="3"
+                                                    fill="none"
+                                                    stroke-linecap="round"
+                                                  />
+                                                </svg>
+                                              {:else if revealedCredFields[subCredKey(subCred.id, sf.id)]}
+                                                <span class="sub-cred-revealed"
+                                                  >{fetchedSecureValues[
+                                                    subCredKey(
+                                                      subCred.id,
+                                                      sf.id,
+                                                    )
+                                                  ] || "—"}</span
+                                                >
+                                              {:else}
+                                                <span class="sub-cred-masked"
+                                                  >••••••••</span
+                                                >
+                                              {/if}
+                                              {#if permissions["credential.secure_values.read"] && !loadingCredFields[subCredKey(subCred.id, sf.id)]}
+                                                {#if revealedCredFields[subCredKey(subCred.id, sf.id)]}
+                                                  <span
+                                                    class="cred-countdown-wrap"
+                                                    title="Auto-hides in 30 seconds"
+                                                  >
+                                                    <svg
+                                                      class="cred-countdown-ring"
+                                                      viewBox="0 0 20 20"
+                                                      width="16"
+                                                      height="16"
+                                                    >
+                                                      <circle
+                                                        cx="10"
+                                                        cy="10"
+                                                        r="8"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        opacity="0.1"
+                                                      />
+                                                      <circle
+                                                        cx="10"
+                                                        cy="10"
+                                                        r="8"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        stroke-linecap="round"
+                                                        stroke-dasharray="50.265"
+                                                        stroke-dashoffset="0"
+                                                        class="cred-countdown-arc"
+                                                      />
+                                                    </svg>
+                                                  </span>
+                                                {/if}
+                                                <button
+                                                  type="button"
+                                                  class="sub-cred-eye-btn"
+                                                  on:click|stopPropagation={() =>
+                                                    toggleCredField(
+                                                      subCred.id,
+                                                      sf.id,
+                                                      true,
+                                                      undefined,
+                                                      subCredKey(
+                                                        subCred.id,
+                                                        sf.id,
+                                                      ),
+                                                    )}
+                                                  aria-label={revealedCredFields[
+                                                    subCredKey(
+                                                      subCred.id,
+                                                      sf.id,
+                                                    )
+                                                  ]
+                                                    ? "Hide value"
+                                                    : "Show value"}
+                                                  title={revealedCredFields[
+                                                    subCredKey(
+                                                      subCred.id,
+                                                      sf.id,
+                                                    )
+                                                  ]
+                                                    ? "Hide"
+                                                    : "Reveal"}
+                                                >
+                                                  {#if revealedCredFields[subCredKey(subCred.id, sf.id)]}
+                                                    <svg
+                                                      viewBox="0 0 24 24"
+                                                      fill="none"
+                                                      stroke="currentColor"
+                                                      stroke-width="2"
+                                                      width="13"
+                                                      height="13"
+                                                    >
+                                                      <path
+                                                        d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                                      />
+                                                      <path
+                                                        d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                                      />
+                                                      <path
+                                                        d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                                      />
+                                                      <line
+                                                        x1="1"
+                                                        y1="1"
+                                                        x2="23"
+                                                        y2="23"
+                                                      />
+                                                    </svg>
+                                                  {:else}
+                                                    <svg
+                                                      viewBox="0 0 24 24"
+                                                      fill="none"
+                                                      stroke="currentColor"
+                                                      stroke-width="2"
+                                                      width="13"
+                                                      height="13"
+                                                    >
+                                                      <path
+                                                        d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                                      />
+                                                      <circle
+                                                        cx="12"
+                                                        cy="12"
+                                                        r="3"
+                                                      />
+                                                    </svg>
+                                                  {/if}
+                                                </button>
+                                              {/if}
+                                            </span>
+                                          {:else}
+                                            {sf.value || "—"}
+                                          {/if}
+                                        </td>
+                                      {/each}
+                                      {#if !isEditingCredential}
+                                        <td class="sub-cred-actions-cell">
+                                          <button
+                                            type="button"
+                                            class="sub-cred-remove-btn"
+                                            on:click|stopPropagation={() =>
+                                              deleteSubCred(subCred.id)}
+                                            disabled={deletingSubCredId ===
+                                              subCred.id}
+                                            aria-label="Remove"
+                                            title="Remove"
+                                          >
+                                            {#if deletingSubCredId === subCred.id}
+                                              <svg
+                                                viewBox="0 0 24 24"
+                                                width="12"
+                                                height="12"
+                                                class="spin-icon"
+                                              >
+                                                <circle
+                                                  cx="12"
+                                                  cy="12"
+                                                  r="10"
+                                                  stroke="currentColor"
+                                                  stroke-width="3"
+                                                  fill="none"
+                                                  opacity="0.25"
+                                                />
+                                                <path
+                                                  d="M12 2a10 10 0 0 1 10 10"
+                                                  stroke="currentColor"
+                                                  stroke-width="3"
+                                                  fill="none"
+                                                  stroke-linecap="round"
+                                                />
+                                              </svg>
+                                            {:else}
+                                              <svg
+                                                viewBox="0 0 24 24"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-width="2"
+                                                width="12"
+                                                height="12"
+                                              >
+                                                <polyline
+                                                  points="3 6 5 6 21 6"
+                                                />
+                                                <path
+                                                  d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                                                />
+                                                <path d="M10 11v6M14 11v6" />
+                                                <path
+                                                  d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"
+                                                />
+                                              </svg>
+                                            {/if}
+                                          </button>
+                                        </td>
+                                      {/if}
+                                    </tr>
+                                  {/each}
+                                </tbody>
+                              </table>
+                            {/if}
+
+                            <!-- Inline add form -->
+                            {#if addingSubCred === mcField.id}
+                              <div class="sub-cred-add-row">
+                                <div class="sub-cred-add-row-fields">
+                                  <input
+                                    type="text"
+                                    class="sub-cred-add-input"
+                                    bind:value={newSubCredName}
+                                    placeholder="Name"
+                                    disabled={isSubmittingSubCred}
+                                  />
+                                  {#each mcField.subFields ?? [] as sf (sf.id)}
+                                    <input
+                                      type="text"
+                                      class="sub-cred-add-input"
+                                      bind:value={newSubCredFields[sf.id]}
+                                      placeholder={sf.name}
+                                      disabled={isSubmittingSubCred}
+                                    />
+                                  {/each}
+                                </div>
+                                <div class="sub-cred-add-row-actions">
+                                  {#if subCredError}
+                                    <span
+                                      class="sub-cred-add-error"
+                                      title={subCredError}
+                                    >
+                                      <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        width="13"
+                                        height="13"
+                                      >
+                                        <circle cx="12" cy="12" r="10" /><line
+                                          x1="12"
+                                          y1="8"
+                                          x2="12"
+                                          y2="12"
+                                        /><line
+                                          x1="12"
+                                          y1="16"
+                                          x2="12.01"
+                                          y2="16"
+                                        />
+                                      </svg>
+                                    </span>
+                                  {/if}
+                                  <button
+                                    type="button"
+                                    class="sub-cred-btn-save"
+                                    on:click={() => submitSubCred(mcField.id)}
+                                    disabled={isSubmittingSubCred ||
+                                      !newSubCredName.trim()}
+                                  >
+                                    {isSubmittingSubCred ? "…" : "Add"}
+                                  </button>
+                                  <button
+                                    type="button"
+                                    class="sub-cred-btn-cancel"
+                                    on:click={cancelAddSubCred}
+                                    disabled={isSubmittingSubCred}
+                                  >
+                                    Cancel
+                                  </button>
+                                </div>
+                              </div>
+                            {/if}
+                          </div>
+                        {/each}
+                      {/if}
+
+                      {#if isEditingCredential && saveCredError}
+                        <div class="cred-edit-error">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            width="14"
+                            height="14"
+                          >
+                            <circle cx="12" cy="12" r="10" />
+                            <line x1="12" y1="8" x2="12" y2="12" />
+                            <line x1="12" y1="16" x2="12.01" y2="16" />
+                          </svg>
+                          {saveCredError}
+                        </div>
+                      {/if}
+                    </div>
+                  {:else}
+                    <div class="config-no-questions">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        width="32"
+                        height="32"
+                      >
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+                        <line x1="12" y1="17" x2="12.01" y2="17" />
+                      </svg>
+                      <p>No credential fields available</p>
+                    </div>
+                  {/if}
+
+                  <!-- Footer metadata -->
+                  <div class="config-info-footer">
+                    {#if formatDate(selectedCredential.createdAt)}
+                      <div class="config-info-item">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="13"
+                          height="13"
+                        >
+                          <path d="M12 5v14M5 12h14" />
+                        </svg>
+                        Created on {formatDate(selectedCredential.createdAt)}
+                      </div>
+                    {/if}
+                    {#if formatDate(selectedCredential.updatedAt)}
+                      <div class="config-info-item">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="13"
+                          height="13"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <polyline points="12 6 12 12 16 14" />
+                        </svg>
+                        Updated on {formatDate(selectedCredential.updatedAt)}
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+              {/key}
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/src/routes/companies/[id]/components/OverviewTab.svelte b/src/routes/companies/[id]/components/OverviewTab.svelte
new file mode 100644
index 0000000..324b09b
--- /dev/null
+++ b/src/routes/companies/[id]/components/OverviewTab.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { CompanyData, ConfigurationData } from "../types";
+  import type { Credential } from "$lib/optima-api/modules/credentials";
+  import type { UnifiSite } from "$lib/optima-api/modules/unifi";
+
+  export let company: CompanyData | null;
+  export let credentials: Credential[];
+  export let configurations: ConfigurationData[];
+  export let unifiSites: UnifiSite[];
+</script>
+
+<div class="overview-tab">
+  <div class="overview-section">
+    <h3 class="overview-section-title">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        width="16"
+        height="16"
+      >
+        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+      Company Details
+    </h3>
+    <div class="overview-details-grid">
+      <div class="overview-detail-item">
+        <span class="overview-detail-label">Name</span>
+        <span class="overview-detail-value">{company?.name ?? "—"}</span>
+      </div>
+      <div class="overview-detail-item">
+        <span class="overview-detail-label">ID</span>
+        <span class="overview-detail-value mono">{company?.id ?? "—"}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="overview-section">
+    <h3 class="overview-section-title">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        width="16"
+        height="16"
+      >
+        <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+      </svg>
+      At a Glance
+    </h3>
+    <div class="overview-stats-grid">
+      <div class="overview-stat-card">
+        <span class="overview-stat-value">{credentials.length}</span>
+        <span class="overview-stat-label">Credentials</span>
+      </div>
+      <div class="overview-stat-card">
+        <span class="overview-stat-value">{configurations.length}</span>
+        <span class="overview-stat-label">Configurations</span>
+      </div>
+      <div class="overview-stat-card">
+        <span class="overview-stat-value">{unifiSites.length}</span>
+        <span class="overview-stat-label">UniFi Sites</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="overview-section">
+    <h3 class="overview-section-title">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        width="16"
+        height="16"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 6v6l4 2" />
+      </svg>
+      Recent Activity
+    </h3>
+    <p class="overview-placeholder">Activity feed coming soon.</p>
+  </div>
+</div>
diff --git a/src/routes/companies/[id]/components/UniFiTab.svelte b/src/routes/companies/[id]/components/UniFiTab.svelte
new file mode 100644
index 0000000..d928a23
--- /dev/null
+++ b/src/routes/companies/[id]/components/UniFiTab.svelte
@@ -0,0 +1,3017 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import LinkUnifiSiteModal from "../../../../components/LinkUnifiSiteModal.svelte";
+  import {
+    unifi as unifiApi,
+    type UnifiSite,
+    type UnifiSiteOverview,
+    type UnifiDevice,
+    type UnifiWifiNetwork,
+    type UnifiNetwork,
+    type UnifiWlanGroup,
+    type UnifiApGroup,
+    type UnifiAccessPoint,
+    type UnifiSpeedProfile,
+    type UnifiPPSK,
+  } from "$lib/optima-api/modules/unifi";
+  import type { PermissionMap } from "$lib/permissions";
+  import { formatUptime } from "../types";
+
+  export let companyId: string;
+  export let unifiSites: UnifiSite[];
+  export let accessToken: string | null;
+  export let permissions: PermissionMap;
+  export let isLinkUnifiOpen: boolean;
+
+  // UniFi state
+  let selectedUnifiSite: UnifiSite | null = null;
+  let unifiSiteOverview: UnifiSiteOverview | null = null;
+  let unifiSiteDevices: UnifiDevice[] = [];
+  let unifiSiteWifi: UnifiWifiNetwork[] = [];
+  let unifiSiteNetworks: UnifiNetwork[] = [];
+  let unifiWlanGroups: UnifiWlanGroup[] = [];
+  let unifiApGroups: UnifiApGroup[] = [];
+  let unifiAccessPoints: UnifiAccessPoint[] = [];
+  let unifiSpeedProfiles: UnifiSpeedProfile[] = [];
+  let wifiPPSKs: UnifiPPSK[] = [];
+  let isLoadingUnifiOverview = false;
+  let isLoadingUnifiDevices = false;
+  let isLoadingUnifiWifi = false;
+  let isLoadingUnifiNetworks = false;
+  let isLoadingSpeedProfiles = false;
+  let isLoadingWlanGroups = false;
+  let isLoadingApGroups = false;
+  let isLoadingAccessPoints = false;
+  let isLoadingPPSKs = false;
+  let unifiManagementTab: "overview" | "devices" | "wifi" | "networks" =
+    "overview";
+  let isUnlinkingSite = false;
+  let isUnifiSiteMenuOpen = false;
+  let revealedWifiPassphrases: Record<string, boolean> = {};
+
+  // WiFi split-view state
+  let selectedWifi: UnifiWifiNetwork | null = null;
+  let wifiEditState: Record<string, unknown> = {};
+  let wifiOriginalState: Record<string, unknown> = {};
+  let isWifiDirty = false;
+  let isSavingWifi = false;
+  let wifiSaveError: string | null = null;
+  let wifiAdvancedMode: "auto" | "manual" = "auto";
+  // PPSK add form state
+  let ppskNewName = "";
+  let ppskNewKey = "";
+  let ppskNewVlanId = "";
+  let ppskNewMac = "";
+  let isAddingPPSK = false;
+  // MAC filter add form state
+  let macFilterNewMac = "";
+  // Speed profile create modal state
+  let showSpeedProfileModal = false;
+  let speedProfileName = "";
+  let speedProfileDown = "";
+  let speedProfileUp = "";
+  let isCreatingSpeedProfile = false;
+  // PMF warning state
+  let showPmfWarning = false;
+  let pendingPmfValue = "";
+  $: canEditWifi = permissions["unifi.site.wifi.update"] === true;
+
+  // Card-level overview stats
+  let siteOverviews: Record<string, UnifiSiteOverview> = {};
+  let loadedOverviewIds = new Set<string>();
+  let isLoadingCardStats = false;
+
+  async function loadCardOverviews() {
+    if (!accessToken || unifiSites.length === 0) return;
+    const toLoad = unifiSites.filter((s) => !loadedOverviewIds.has(s.id));
+    if (toLoad.length === 0) return;
+    isLoadingCardStats = true;
+    try {
+      const results = await Promise.allSettled(
+        toLoad.map((s) =>
+          unifiApi
+            .fetchSiteOverview(accessToken!, s.id)
+            .then((r) => ({ id: s.id, data: r?.data })),
+        ),
+      );
+      for (const r of results) {
+        if (r.status === "fulfilled" && r.value?.data) {
+          siteOverviews[r.value.id] = r.value.data;
+          loadedOverviewIds.add(r.value.id);
+        }
+      }
+      siteOverviews = siteOverviews;
+    } catch (err) {
+      console.error("Failed to load card overviews:", err);
+    } finally {
+      isLoadingCardStats = false;
+    }
+  }
+
+  // Preload overviews when sites are visible
+  $: if (!selectedUnifiSite && unifiSites.length > 0) {
+    loadCardOverviews();
+  }
+
+  function getCardHealthStatus(
+    siteId: string,
+  ): "ok" | "warn" | "error" | "unknown" {
+    const overview = siteOverviews[siteId];
+    if (!overview?.health) return "unknown";
+    const statuses = overview.health.map((h) => h.status);
+    if (statuses.some((s) => s === "error" || s === "critical")) return "error";
+    if (statuses.some((s) => s === "warn" || s === "warning")) return "warn";
+    if (statuses.every((s) => s === "ok")) return "ok";
+    return "unknown";
+  }
+
+  function getCardDeviceCount(siteId: string): number {
+    const overview = siteOverviews[siteId];
+    if (!overview?.health) return 0;
+    return overview.health.reduce((sum, h) => sum + (h.numAdopted ?? 0), 0);
+  }
+
+  function getCardGatewayCount(siteId: string): number {
+    const overview = siteOverviews[siteId];
+    if (!overview?.health) return 0;
+    return overview.health.reduce((sum, h) => sum + (h.numGateway ?? 0), 0);
+  }
+
+  async function selectUnifiSite(site: UnifiSite) {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedUnifiSite = site;
+    unifiManagementTab = "overview";
+    unifiSiteOverview = null;
+    unifiSiteDevices = [];
+    unifiSiteWifi = [];
+    unifiSiteNetworks = [];
+    revealedWifiPassphrases = {};
+    selectedWifi = null;
+    wifiEditState = {};
+    wifiOriginalState = {};
+    isWifiDirty = false;
+    wifiSaveError = null;
+    await loadUnifiOverview(site.id);
+  }
+
+  function backToUnifiSites() {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedUnifiSite = null;
+    unifiSiteOverview = null;
+    revealedWifiPassphrases = {};
+    unifiSiteDevices = [];
+    unifiSiteWifi = [];
+    unifiSiteNetworks = [];
+    selectedWifi = null;
+    wifiEditState = {};
+    wifiOriginalState = {};
+    isWifiDirty = false;
+    wifiSaveError = null;
+  }
+
+  async function loadUnifiOverview(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiOverview = true;
+    try {
+      const result = await unifiApi.fetchSiteOverview(accessToken, siteId);
+      unifiSiteOverview = result?.data ?? null;
+    } catch (err) {
+      console.error("Failed to load UniFi overview:", err);
+    } finally {
+      isLoadingUnifiOverview = false;
+    }
+  }
+
+  async function loadUnifiDevices(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiDevices = true;
+    try {
+      const result = await unifiApi.fetchSiteDevices(accessToken, siteId);
+      unifiSiteDevices = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load UniFi devices:", err);
+    } finally {
+      isLoadingUnifiDevices = false;
+    }
+  }
+
+  async function loadUnifiWifi(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiWifi = true;
+    try {
+      const result = await unifiApi.fetchSiteWifi(accessToken, siteId);
+      unifiSiteWifi = Array.isArray(result?.data)
+        ? result.data
+        : Array.isArray(result)
+          ? result
+          : [];
+    } catch (err) {
+      console.error("Failed to load UniFi WiFi:", err);
+    } finally {
+      isLoadingUnifiWifi = false;
+    }
+  }
+
+  async function loadUnifiNetworks(siteId: string) {
+    if (!accessToken) return;
+    isLoadingUnifiNetworks = true;
+    try {
+      const result = await unifiApi.fetchSiteNetworks(accessToken, siteId);
+      unifiSiteNetworks = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load UniFi networks:", err);
+    } finally {
+      isLoadingUnifiNetworks = false;
+    }
+  }
+
+  async function loadSpeedProfiles(siteId: string) {
+    if (!accessToken) return;
+    isLoadingSpeedProfiles = true;
+    try {
+      const result = await unifiApi.fetchSpeedProfiles(accessToken, siteId);
+      unifiSpeedProfiles = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load speed profiles:", err);
+    } finally {
+      isLoadingSpeedProfiles = false;
+    }
+  }
+
+  async function loadWlanGroups(siteId: string) {
+    if (!accessToken) return;
+    isLoadingWlanGroups = true;
+    try {
+      const result = await unifiApi.fetchWlanGroups(accessToken, siteId);
+      unifiWlanGroups = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load WLAN groups:", err);
+    } finally {
+      isLoadingWlanGroups = false;
+    }
+  }
+
+  async function loadApGroups(siteId: string) {
+    if (!accessToken) return;
+    isLoadingApGroups = true;
+    try {
+      const result = await unifiApi.fetchApGroups(accessToken, siteId);
+      unifiApGroups = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load AP groups:", err);
+    } finally {
+      isLoadingApGroups = false;
+    }
+  }
+
+  async function loadAccessPoints(siteId: string) {
+    if (!accessToken) return;
+    isLoadingAccessPoints = true;
+    try {
+      const result = await unifiApi.fetchAccessPoints(accessToken, siteId);
+      unifiAccessPoints = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load access points:", err);
+    } finally {
+      isLoadingAccessPoints = false;
+    }
+  }
+
+  async function loadPPSKs(siteId: string, wlanId: string) {
+    if (!accessToken) return;
+    isLoadingPPSKs = true;
+    try {
+      const result = await unifiApi.fetchPPSKs(accessToken, siteId, wlanId);
+      wifiPPSKs = result?.data ?? [];
+    } catch (err) {
+      console.error("Failed to load PPSKs:", err);
+    } finally {
+      isLoadingPPSKs = false;
+    }
+  }
+
+  async function addPPSK() {
+    if (!accessToken || !selectedUnifiSite || !selectedWifi) return;
+    if (!ppskNewName.trim() || !ppskNewKey.trim()) return;
+    isAddingPPSK = true;
+    try {
+      const data: { key: string; name: string; mac?: string; vlanId?: number } =
+        {
+          key: ppskNewKey.trim(),
+          name: ppskNewName.trim(),
+        };
+      if (ppskNewMac.trim()) data.mac = ppskNewMac.trim();
+      if (ppskNewVlanId && Number(ppskNewVlanId) > 0)
+        data.vlanId = Number(ppskNewVlanId);
+      const result = await unifiApi.createPPSK(
+        accessToken,
+        selectedUnifiSite.id,
+        selectedWifi.id,
+        data,
+      );
+      wifiPPSKs = result?.data ?? [...wifiPPSKs, data as UnifiPPSK];
+      ppskNewName = "";
+      ppskNewKey = "";
+      ppskNewMac = "";
+      ppskNewVlanId = "";
+    } catch (err) {
+      console.error("Failed to add PPSK:", err);
+      wifiSaveError = err instanceof Error ? err.message : "Failed to add PPSK";
+    } finally {
+      isAddingPPSK = false;
+    }
+  }
+
+  async function addMacToFilterList() {
+    const mac = macFilterNewMac.trim().toUpperCase();
+    if (!mac) return;
+    const current = Array.isArray(wifiEditState.macFilterList)
+      ? (wifiEditState.macFilterList as string[])
+      : [];
+    if (!current.includes(mac)) {
+      updateWifiField("macFilterList", [...current, mac]);
+    }
+    macFilterNewMac = "";
+  }
+
+  function removeMacFromFilterList(mac: string) {
+    const current = Array.isArray(wifiEditState.macFilterList)
+      ? (wifiEditState.macFilterList as string[])
+      : [];
+    updateWifiField(
+      "macFilterList",
+      current.filter((m) => m !== mac),
+    );
+  }
+
+  async function createSpeedProfile() {
+    if (!accessToken || !selectedUnifiSite || !speedProfileName.trim()) return;
+    isCreatingSpeedProfile = true;
+    try {
+      const data: {
+        name: string;
+        downloadLimitKbps?: number;
+        uploadLimitKbps?: number;
+      } = {
+        name: speedProfileName.trim(),
+      };
+      if (speedProfileDown && Number(speedProfileDown) > 0)
+        data.downloadLimitKbps = Number(speedProfileDown);
+      if (speedProfileUp && Number(speedProfileUp) > 0)
+        data.uploadLimitKbps = Number(speedProfileUp);
+      await unifiApi.createSpeedProfile(
+        accessToken,
+        selectedUnifiSite.id,
+        data,
+      );
+      await loadSpeedProfiles(selectedUnifiSite.id);
+      showSpeedProfileModal = false;
+      speedProfileName = "";
+      speedProfileDown = "";
+      speedProfileUp = "";
+    } catch (err) {
+      console.error("Failed to create speed profile:", err);
+    } finally {
+      isCreatingSpeedProfile = false;
+    }
+  }
+
+  function confirmPmfChange(value: string) {
+    if (value === "required" || value === "optional") {
+      pendingPmfValue = value;
+      showPmfWarning = true;
+    } else {
+      updateWifiField("pmfMode", value);
+    }
+  }
+
+  function applyPmfChange() {
+    updateWifiField("pmfMode", pendingPmfValue);
+    showPmfWarning = false;
+    pendingPmfValue = "";
+  }
+
+  async function switchUnifiManagementTab(tab: typeof unifiManagementTab) {
+    if (unifiManagementTab === "wifi" && tab !== "wifi" && isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+      selectedWifi = null;
+      wifiEditState = {};
+      wifiOriginalState = {};
+      isWifiDirty = false;
+      wifiSaveError = null;
+    }
+    unifiManagementTab = tab;
+    if (!selectedUnifiSite) return;
+    if (tab === "overview" && !unifiSiteOverview) {
+      await loadUnifiOverview(selectedUnifiSite.id);
+    } else if (tab === "devices" && unifiSiteDevices.length === 0) {
+      await loadUnifiDevices(selectedUnifiSite.id);
+    } else if (tab === "wifi") {
+      const loads: Promise<void>[] = [];
+      if (unifiSiteWifi.length === 0)
+        loads.push(loadUnifiWifi(selectedUnifiSite.id));
+      if (unifiSiteNetworks.length === 0)
+        loads.push(loadUnifiNetworks(selectedUnifiSite.id));
+      if (unifiSpeedProfiles.length === 0)
+        loads.push(loadSpeedProfiles(selectedUnifiSite.id));
+      if (unifiWlanGroups.length === 0)
+        loads.push(loadWlanGroups(selectedUnifiSite.id));
+      if (unifiApGroups.length === 0)
+        loads.push(loadApGroups(selectedUnifiSite.id));
+      if (unifiAccessPoints.length === 0)
+        loads.push(loadAccessPoints(selectedUnifiSite.id));
+      if (loads.length > 0) await Promise.all(loads);
+    } else if (tab === "networks" && unifiSiteNetworks.length === 0) {
+      await loadUnifiNetworks(selectedUnifiSite.id);
+    }
+  }
+
+  async function unlinkUnifiSite(siteId: string) {
+    if (!accessToken) return;
+    isUnlinkingSite = true;
+    try {
+      await unifiApi.unlinkSite(accessToken, siteId);
+      selectedUnifiSite = null;
+      await invalidateAll();
+    } catch (err) {
+      console.error("Failed to unlink UniFi site:", err);
+    } finally {
+      isUnlinkingSite = false;
+    }
+  }
+
+  function selectWifiNetwork(wifi: UnifiWifiNetwork) {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedWifi = wifi;
+    const editState: Record<string, unknown> = { ...wifi };
+    const origState: Record<string, unknown> = { ...wifi };
+    // Default apGroupMode to "all" if not provided by the API
+    if (!editState.apGroupMode) {
+      editState.apGroupMode = "all";
+      origState.apGroupMode = "all";
+    }
+    if (!Array.isArray(editState.apGroupIds)) {
+      editState.apGroupIds = [];
+      origState.apGroupIds = [];
+    }
+    // For "devices" mode, resolve the hidden AP group to get the actual device MACs
+    if (
+      editState.apGroupMode === "devices" &&
+      Array.isArray(editState.apGroupIds)
+    ) {
+      const groupId = (editState.apGroupIds as string[])[0];
+      const hiddenGroup = groupId
+        ? unifiApGroups.find((g) => g.id === groupId)
+        : null;
+      const macs = hiddenGroup ? [...hiddenGroup.deviceMacs] : [];
+      editState.deviceMacs = macs;
+      origState.deviceMacs = [...macs];
+    } else {
+      editState.deviceMacs = [];
+      origState.deviceMacs = [];
+    }
+    wifiEditState = editState;
+    wifiOriginalState = origState;
+    isWifiDirty = false;
+    wifiSaveError = null;
+    wifiAdvancedMode = wifi.settingPreference === "manual" ? "manual" : "auto";
+    revealedWifiPassphrases = {};
+    ppskNewName = "";
+    ppskNewKey = "";
+    ppskNewMac = "";
+    ppskNewVlanId = "";
+    wifiPPSKs = [];
+    macFilterNewMac = "";
+    if (wifi.privatePreSharedKeysEnabled && selectedUnifiSite) {
+      loadPPSKs(selectedUnifiSite.id, wifi.id);
+    }
+  }
+
+  function backToWifiList() {
+    if (isWifiDirty) {
+      const confirmed = confirm("You have unsaved WiFi changes. Discard them?");
+      if (!confirmed) return;
+    }
+    selectedWifi = null;
+    wifiEditState = {};
+    wifiOriginalState = {};
+    isWifiDirty = false;
+    wifiSaveError = null;
+    wifiAdvancedMode = "auto";
+  }
+
+  function updateWifiField(field: string, value: unknown) {
+    wifiEditState[field] = value;
+    wifiEditState = wifiEditState;
+    checkWifiDirty();
+  }
+
+  function checkWifiDirty() {
+    const allEditableFields = [
+      "name",
+      "passphrase",
+      "enabled",
+      "networkconfId",
+      "band",
+      "apGroupMode",
+      "apGroupIds",
+      "deviceMacs",
+      "security",
+      "wpaMode",
+      "wpaEnc",
+      "pmfMode",
+      "privatePreSharedKeysEnabled",
+      "hideSSID",
+      "l2Isolation",
+      "fastRoamingEnabled",
+      "proxyArp",
+      "bssTransition",
+      "uapsdEnabled",
+      "macFilterEnabled",
+      "macFilterPolicy",
+      "macFilterList",
+      "radiusMacAuthEnabled",
+      "radiusMacaclFormat",
+      "usergroupId",
+      "dtimMode",
+      "dtimNg",
+      "dtimNa",
+      "dtim6e",
+      "groupRekey",
+      "no2ghzOui",
+      "settingPreference",
+      "wpa3Support",
+      "wpa3Transition",
+      "wpa3FastRoaming",
+      "wpa3Enhanced192",
+      "iappEnabled",
+      "mcastenhanceEnabled",
+      "isGuest",
+      "passphraseAutogenerated",
+      "radiusDasEnabled",
+      "minrateSettingPreference",
+      "minrateNgEnabled",
+      "minrateNgDataRateKbps",
+      "minrateNgAdvertisingRates",
+      "minrateNaEnabled",
+      "minrateNaDataRateKbps",
+      "minrateNaAdvertisingRates",
+    ];
+    isWifiDirty = allEditableFields.some((f) => {
+      if (!(f in wifiEditState)) return false;
+      const a = wifiEditState[f];
+      const b = wifiOriginalState[f];
+      if (Array.isArray(a) || Array.isArray(b)) {
+        return JSON.stringify(a) !== JSON.stringify(b);
+      }
+      return a !== b;
+    });
+  }
+
+  function discardWifiChanges() {
+    wifiEditState = { ...wifiOriginalState };
+    isWifiDirty = false;
+    wifiSaveError = null;
+    wifiAdvancedMode =
+      wifiOriginalState.settingPreference === "manual" ? "manual" : "auto";
+  }
+
+  async function saveWifiChanges() {
+    if (!accessToken || !selectedUnifiSite || !selectedWifi) return;
+    isSavingWifi = true;
+    wifiSaveError = null;
+    try {
+      // Fields that are allowed in "auto" mode (basic settings only)
+      const autoOnlyFields = new Set([
+        "name",
+        "passphrase",
+        "enabled",
+        "band",
+        "security",
+        "wpaMode",
+        "hideSSID",
+        "isGuest",
+        "settingPreference",
+        "networkconfId",
+        "apGroupMode",
+        "apGroupIds",
+        "deviceMacs",
+      ]);
+      const payload: Record<string, unknown> = {};
+      for (const field of Object.keys(wifiEditState)) {
+        const a = wifiEditState[field];
+        const b = wifiOriginalState[field];
+        const changed =
+          Array.isArray(a) || Array.isArray(b)
+            ? JSON.stringify(a) !== JSON.stringify(b)
+            : a !== b;
+        if (changed) {
+          if (wifiAdvancedMode === "auto" && !autoOnlyFields.has(field))
+            continue;
+          payload[field] = wifiEditState[field];
+        }
+      }
+      if (Object.keys(payload).length === 0) return;
+      // For "devices" mode, send deviceMacs and let the API handle apGroupIds
+      if (wifiEditState.apGroupMode === "devices") {
+        delete payload.apGroupIds;
+        if (!payload.deviceMacs) {
+          payload.deviceMacs = wifiEditState.deviceMacs;
+        }
+      } else {
+        delete payload.deviceMacs;
+      }
+      const result = await unifiApi.updateWifi(
+        accessToken,
+        selectedUnifiSite.id,
+        selectedWifi.id,
+        payload,
+      );
+      const updated = result?.data ?? wifiEditState;
+      selectedWifi = { ...selectedWifi, ...updated } as UnifiWifiNetwork;
+      // Preserve deviceMacs for "devices" mode since the API doesn't return it
+      const savedDeviceMacs = wifiEditState.apGroupMode === "devices"
+        ? (wifiEditState.deviceMacs as string[] ?? [])
+        : [];
+      wifiEditState = { ...updated, deviceMacs: savedDeviceMacs };
+      wifiOriginalState = { ...updated, deviceMacs: [...savedDeviceMacs] };
+      isWifiDirty = false;
+      unifiSiteWifi = unifiSiteWifi.map((w) =>
+        w.id === selectedWifi!.id
+          ? ({ ...w, ...updated } as UnifiWifiNetwork)
+          : w,
+      );
+      // Re-fetch AP groups so the newly created hidden group is available
+      if (wifiEditState.apGroupMode === "devices" && selectedUnifiSite) {
+        loadApGroups(selectedUnifiSite.id);
+      }
+    } catch (err) {
+      console.error("Failed to save WiFi changes:", err);
+      wifiSaveError =
+        err instanceof Error ? err.message : "Failed to save changes";
+    } finally {
+      isSavingWifi = false;
+    }
+  }
+</script>
+
+<svelte:window
+  on:click={() => {
+    isUnifiSiteMenuOpen = false;
+  }}
+/>
+
+<LinkUnifiSiteModal
+  bind:isOpen={isLinkUnifiOpen}
+  {companyId}
+  accessToken={accessToken ?? ""}
+  linkedSiteIds={unifiSites.map((s) => s.id)}
+  onSuccess={() => {
+    isLinkUnifiOpen = false;
+    invalidateAll();
+  }}
+/>
+
+{#if selectedUnifiSite}
+  <!-- Management view for a selected UniFi site -->
+  <div class="unifi-management">
+    <div class="unifi-management-header">
+      <button
+        class="unifi-back-btn"
+        on:click={backToUnifiSites}
+        type="button"
+        aria-label="Back to sites"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          width="16"
+          height="16"
+        >
+          <path d="M19 12H5M12 19l-7-7 7-7" />
+        </svg>
+      </button>
+      <div class="unifi-management-title-group">
+        <h3 class="unifi-management-title">{selectedUnifiSite.name}</h3>
+        <span class="unifi-management-site-id">{selectedUnifiSite.siteId}</span>
+      </div>
+      <div class="unifi-site-menu-wrap">
+        <button
+          type="button"
+          class="unifi-site-menu-btn"
+          aria-label="Site actions"
+          on:click|stopPropagation={() =>
+            (isUnifiSiteMenuOpen = !isUnifiSiteMenuOpen)}
+        >
+          <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+            <circle cx="8" cy="2.5" r="1.5" /><circle
+              cx="8"
+              cy="8"
+              r="1.5"
+            /><circle cx="8" cy="13.5" r="1.5" />
+          </svg>
+        </button>
+        {#if isUnifiSiteMenuOpen}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <div class="unifi-site-dropdown-menu" on:click|stopPropagation>
+            <button
+              type="button"
+              class="unifi-site-dropdown-item unifi-site-dropdown-item-danger"
+              disabled={isUnlinkingSite}
+              on:click|stopPropagation={() => {
+                isUnifiSiteMenuOpen = false;
+                unlinkUnifiSite(selectedUnifiSite?.id ?? "");
+              }}
+            >
+              {#if isUnlinkingSite}
+                <svg
+                  viewBox="0 0 24 24"
+                  width="13"
+                  height="13"
+                  class="spin-icon"
+                  ><circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    fill="none"
+                    opacity="0.25"
+                  /><path
+                    d="M12 2a10 10 0 0 1 10 10"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    fill="none"
+                    stroke-linecap="round"
+                  /></svg
+                >
+              {:else}
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  width="13"
+                  height="13"><path d="M18 6L6 18M6 6l12 12" /></svg
+                >
+              {/if}
+              Unlink Site
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Management sub-tabs -->
+    <div class="unifi-mgmt-tabs">
+      <button
+        class="unifi-mgmt-tab"
+        class:active={unifiManagementTab === "overview"}
+        on:click={() => switchUnifiManagementTab("overview")}
+        type="button">Overview</button
+      >
+      <button
+        class="unifi-mgmt-tab"
+        class:active={unifiManagementTab === "devices"}
+        on:click={() => switchUnifiManagementTab("devices")}
+        type="button">Devices</button
+      >
+      {#if permissions["unifi.site.wifi"] && permissions["unifi.site.wifi.read.name"]}
+        <button
+          class="unifi-mgmt-tab"
+          class:active={unifiManagementTab === "wifi"}
+          on:click={() => switchUnifiManagementTab("wifi")}
+          type="button">WiFi</button
+        >
+      {/if}
+      <button
+        class="unifi-mgmt-tab"
+        class:active={unifiManagementTab === "networks"}
+        on:click={() => switchUnifiManagementTab("networks")}
+        type="button">Networks</button
+      >
+    </div>
+
+    <div class="unifi-mgmt-content">
+      {#if unifiManagementTab === "overview"}
+        {#if isLoadingUnifiOverview}
+          <div class="unifi-loading">
+            <svg viewBox="0 0 24 24" width="20" height="20" class="spin-icon"
+              ><circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                opacity="0.25"
+              /><path
+                d="M12 2a10 10 0 0 1 10 10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                stroke-linecap="round"
+              /></svg
+            >
+            <span>Loading overview…</span>
+          </div>
+        {:else if unifiSiteOverview}
+          <div class="unifi-overview-grid">
+            {#if unifiSiteOverview.health && unifiSiteOverview.health.length > 0}
+              <div class="unifi-overview-section">
+                <h4 class="unifi-section-title">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    width="14"
+                    height="14"><path d="M22 12h-4l-3 9L9 3l-3 9H2" /></svg
+                  >
+                  Health
+                </h4>
+                <div class="unifi-health-cards">
+                  {#each unifiSiteOverview.health as h}
+                    <div class="unifi-health-card">
+                      <span
+                        class="unifi-health-status"
+                        class:healthy={h.status === "ok"}
+                        class:unhealthy={h.status !== "ok"}
+                      >
+                        {h.status === "ok" ? "●" : "○"}
+                      </span>
+                      <span class="unifi-health-subsystem">{h.subsystem}</span>
+                      <span class="unifi-health-status-text">{h.status}</span>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            {/if}
+            {#if unifiSiteOverview.sysInfo}
+              <div class="unifi-overview-section">
+                <h4 class="unifi-section-title">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    width="14"
+                    height="14"
+                    ><rect
+                      x="2"
+                      y="3"
+                      width="20"
+                      height="14"
+                      rx="2"
+                      ry="2"
+                    /><line x1="8" y1="21" x2="16" y2="21" /><line
+                      x1="12"
+                      y1="17"
+                      x2="12"
+                      y2="21"
+                    /></svg
+                  >
+                  System Info
+                </h4>
+                <div class="unifi-info-grid">
+                  {#if unifiSiteOverview.sysInfo.hostname}
+                    <div class="unifi-info-item">
+                      <span class="unifi-info-label">Hostname</span><span
+                        class="unifi-info-value"
+                        >{unifiSiteOverview.sysInfo.hostname}</span
+                      >
+                    </div>
+                  {/if}
+                  {#if unifiSiteOverview.sysInfo.version}
+                    <div class="unifi-info-item">
+                      <span class="unifi-info-label">Version</span><span
+                        class="unifi-info-value mono"
+                        >{unifiSiteOverview.sysInfo.version}</span
+                      >
+                    </div>
+                  {/if}
+                  {#if unifiSiteOverview.sysInfo.timezone}
+                    <div class="unifi-info-item">
+                      <span class="unifi-info-label">Timezone</span><span
+                        class="unifi-info-value"
+                        >{unifiSiteOverview.sysInfo.timezone}</span
+                      >
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <div class="unifi-empty-state"><p>No overview data available</p></div>
+        {/if}
+      {:else if unifiManagementTab === "devices"}
+        {#if isLoadingUnifiDevices}
+          <div class="unifi-loading">
+            <svg viewBox="0 0 24 24" width="20" height="20" class="spin-icon"
+              ><circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                opacity="0.25"
+              /><path
+                d="M12 2a10 10 0 0 1 10 10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                stroke-linecap="round"
+              /></svg
+            >
+            <span>Loading devices…</span>
+          </div>
+        {:else if unifiSiteDevices.length === 0}
+          <div class="unifi-empty-state">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              width="32"
+              height="32"
+              ><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line
+                x1="8"
+                y1="21"
+                x2="16"
+                y2="21"
+              /><line x1="12" y1="17" x2="12" y2="21" /></svg
+            >
+            <p>No devices found</p>
+          </div>
+        {:else}
+          <div class="unifi-devices-table-wrap">
+            <table class="unifi-devices-table">
+              <thead
+                ><tr
+                  ><th>Status</th><th>Name</th><th>Model</th><th>IP</th><th
+                    >MAC</th
+                  ><th>Version</th><th>Uptime</th></tr
+                ></thead
+              >
+              <tbody>
+                {#each unifiSiteDevices as device (device.id)}
+                  <tr class="unifi-device-row">
+                    <td class="unifi-device-status-cell"
+                      ><span
+                        class="unifi-device-status-dot"
+                        class:online={device.state === "connected" ||
+                          device.state === 1}
+                        class:offline={device.state !== "connected" &&
+                          device.state !== 1}
+                      ></span></td
+                    >
+                    <td class="unifi-device-name-cell"
+                      >{device.name || device.mac}</td
+                    >
+                    <td class="unifi-device-model-cell">{device.model}</td>
+                    <td class="unifi-device-mono-cell">{device.ip || "—"}</td>
+                    <td class="unifi-device-mono-cell">{device.mac}</td>
+                    <td class="unifi-device-mono-cell"
+                      >{device.version || "—"}</td
+                    >
+                    <td class="unifi-device-uptime-cell"
+                      >{#if device.uptime}{formatUptime(
+                          device.uptime,
+                        )}{:else}—{/if}</td
+                    >
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        {/if}
+      {:else if unifiManagementTab === "wifi"}
+        {#if isLoadingUnifiWifi}
+          <div class="unifi-loading">
+            <svg viewBox="0 0 24 24" width="20" height="20" class="spin-icon"
+              ><circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                opacity="0.25"
+              /><path
+                d="M12 2a10 10 0 0 1 10 10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                stroke-linecap="round"
+              /></svg
+            >
+            <span>Loading WiFi networks…</span>
+          </div>
+        {:else if unifiSiteWifi.length === 0}
+          <div class="unifi-empty-state">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              width="32"
+              height="32"
+              ><path d="M5 12.55a11 11 0 0114.08 0" /><path
+                d="M1.42 9a16 16 0 0121.16 0"
+              /><path d="M8.53 16.11a6 6 0 016.95 0" /><line
+                x1="12"
+                y1="20"
+                x2="12.01"
+                y2="20"
+              /></svg
+            >
+            <p>No WiFi networks found</p>
+          </div>
+        {:else}
+          <div
+            class="wifi-split-view"
+            class:detail-open={selectedWifi !== null}
+          >
+            <!-- Network list panel -->
+            <div class="wifi-list-panel">
+              <div class="wifi-table-header">
+                <span class="wifi-table-title">WiFi Networks</span><span
+                  class="wifi-list-count">{unifiSiteWifi.length}</span
+                >
+              </div>
+              <div class="wifi-table-head">
+                <span class="wifi-col wifi-col-status"></span>
+                <span class="wifi-col wifi-col-name">Name</span>
+                <span class="wifi-col wifi-col-vlan">Network</span>
+                <span class="wifi-col wifi-col-aps">Broadcasting AP's</span>
+                <span class="wifi-col wifi-col-band">Radio Band</span>
+                <span class="wifi-col wifi-col-clients">Clients</span>
+                <span class="wifi-col wifi-col-security">Security</span>
+              </div>
+              <div class="wifi-table-body">
+                {#each unifiSiteWifi as wifi, i (wifi.id ?? `wifi-${i}`)}
+                  <button
+                    class="wifi-table-row"
+                    class:active={selectedWifi === wifi ||
+                      (selectedWifi?.id && selectedWifi.id === wifi.id)}
+                    on:click={() => selectWifiNetwork(wifi)}
+                    type="button"
+                  >
+                    <span class="wifi-col wifi-col-status"
+                      ><span
+                        class="wifi-status-dot"
+                        class:enabled={wifi.enabled !== false}
+                        title={wifi.enabled !== false ? "Enabled" : "Disabled"}
+                      ></span></span
+                    >
+                    <span class="wifi-col wifi-col-name">
+                      <span class="wifi-network-name"
+                        >{wifi.name ?? wifi.id ?? "Unknown"}</span
+                      >
+                      {#if "hideSSID" in wifi && wifi.hideSSID}<span
+                          class="wifi-table-tag">Hidden</span
+                        >{/if}
+                      {#if "isGuest" in wifi && wifi.isGuest}<span
+                          class="wifi-table-tag wifi-table-tag-guest"
+                          >Guest</span
+                        >{/if}
+                    </span>
+                    <span class="wifi-col wifi-col-vlan">
+                      {#if "networkconfId" in wifi && wifi.networkconfId}
+                        {@const net = unifiSiteNetworks.find(
+                          (n) => n.id === wifi.networkconfId,
+                        )}
+                        {#if net}{net.name}{:else}—{/if}
+                      {:else}—{/if}
+                    </span>
+                    <span class="wifi-col wifi-col-aps">
+                      {#if wifi.apGroupMode === "all"}All
+                      {:else if wifi.apGroupMode === "groups" && Array.isArray(wifi.apGroupIds)}
+                        {@const names = wifi.apGroupIds
+                          .map(
+                            (gid) =>
+                              unifiApGroups.find((g) => g.id === gid)?.name,
+                          )
+                          .filter(Boolean)}
+                        {#if names.length > 0}{names.join(", ")}{:else}{wifi
+                            .apGroupIds.length}
+                          {wifi.apGroupIds.length === 1
+                            ? "group"
+                            : "groups"}{/if}
+                      {:else if wifi.apGroupMode === "devices" && Array.isArray(wifi.apGroupIds)}
+                        {@const groupId = wifi.apGroupIds[0]}
+                        {@const hiddenGroup = groupId
+                          ? unifiApGroups.find((g) => g.id === groupId)
+                          : null}
+                        {@const apCount = hiddenGroup
+                          ? hiddenGroup.deviceMacs.length
+                          : wifi.apGroupIds.length}
+                        {apCount}
+                        {apCount === 1 ? "AP" : "APs"}
+                      {:else}—{/if}
+                    </span>
+                    <span class="wifi-col wifi-col-band">
+                      {#if "band" in wifi}<span class="wifi-band-badge"
+                          >{wifi.band === "both"
+                            ? "2.4 / 5 GHz"
+                            : wifi.band === "2g"
+                              ? "2.4 GHz"
+                              : wifi.band === "5g"
+                                ? "5 GHz"
+                                : wifi.band}</span
+                        >{:else}—{/if}
+                    </span>
+                    <span class="wifi-col wifi-col-clients">—</span>
+                    <span class="wifi-col wifi-col-security">
+                      {#if "security" in wifi}
+                        {wifi.security === "wpapsk"
+                          ? "WPA Personal"
+                          : wifi.security === "wpaeap"
+                            ? "WPA Enterprise"
+                            : wifi.security === "open"
+                              ? "Open"
+                              : wifi.security}{#if "wpaMode" in wifi}&nbsp;({wifi.wpaMode ===
+                          "wpa2"
+                            ? "WPA2"
+                            : wifi.wpaMode === "wpa3"
+                              ? "WPA3"
+                              : wifi.wpaMode === "wpa2wpa3"
+                                ? "WPA2/3"
+                                : wifi.wpaMode}){/if}
+                      {:else}—{/if}
+                    </span>
+                  </button>
+                {/each}
+              </div>
+            </div>
+
+            <!-- Detail panel -->
+            <div class="wifi-detail-panel">
+              {#if selectedWifi}
+                <div class="wifi-detail-header">
+                  <button
+                    class="wifi-detail-back"
+                    type="button"
+                    on:click={backToWifiList}
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      width="16"
+                      height="16"><path d="M15 18l-6-6 6-6" /></svg
+                    >
+                    Back
+                  </button>
+                  {#if canEditWifi}
+                    <div class="wifi-detail-actions">
+                      {#if isWifiDirty}
+                        <button
+                          class="wifi-btn wifi-btn-ghost"
+                          type="button"
+                          on:click={discardWifiChanges}>Discard</button
+                        >
+                      {/if}
+                      <button
+                        class="wifi-btn wifi-btn-primary"
+                        type="button"
+                        on:click={saveWifiChanges}
+                        disabled={!isWifiDirty || isSavingWifi}
+                        >{isSavingWifi ? "Saving…" : "Save Changes"}</button
+                      >
+                    </div>
+                  {/if}
+                </div>
+
+                {#if wifiSaveError}
+                  <div class="wifi-save-error">{wifiSaveError}</div>
+                {/if}
+
+                <!-- PMF Warning Modal -->
+                {#if showPmfWarning}
+                  <div
+                    class="wifi-modal-overlay"
+                    on:click|self={() => {
+                      showPmfWarning = false;
+                    }}
+                    on:keydown={(e) => {
+                      if (e.key === "Escape") showPmfWarning = false;
+                    }}
+                    role="dialog"
+                    tabindex="-1"
+                  >
+                    <div class="wifi-modal">
+                      <div class="wifi-modal-header">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="#f59e0b"
+                          stroke-width="2"
+                          width="20"
+                          height="20"
+                          ><path
+                            d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+                          /><line x1="12" y1="9" x2="12" y2="13" /><line
+                            x1="12"
+                            y1="17"
+                            x2="12.01"
+                            y2="17"
+                          /></svg
+                        >
+                        <span>PMF Warning</span>
+                      </div>
+                      <p class="wifi-modal-body">
+                        Setting PMF to <strong
+                          >{pendingPmfValue === "required"
+                            ? "Required"
+                            : "Optional"}</strong
+                        > may cause connectivity issues with legacy IoT devices that
+                        do not support Protected Management Frames.
+                      </p>
+                      <div class="wifi-modal-actions">
+                        <button
+                          class="wifi-btn wifi-btn-ghost"
+                          type="button"
+                          on:click={() => {
+                            showPmfWarning = false;
+                          }}>Cancel</button
+                        >
+                        <button
+                          class="wifi-btn wifi-btn-primary"
+                          type="button"
+                          on:click={applyPmfChange}>Apply Anyway</button
+                        >
+                      </div>
+                    </div>
+                  </div>
+                {/if}
+
+                <!-- Speed Profile Create Modal -->
+                {#if showSpeedProfileModal}
+                  <div
+                    class="wifi-modal-overlay"
+                    on:click|self={() => {
+                      showSpeedProfileModal = false;
+                    }}
+                    on:keydown={(e) => {
+                      if (e.key === "Escape") showSpeedProfileModal = false;
+                    }}
+                    role="dialog"
+                    tabindex="-1"
+                  >
+                    <div class="wifi-modal">
+                      <div class="wifi-modal-header">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="18"
+                          height="18"
+                          ><polyline
+                            points="22 12 18 12 15 21 9 3 6 12 2 12"
+                          /></svg
+                        >
+                        <span>Create Speed Profile</span>
+                      </div>
+                      <div class="wifi-modal-form">
+                        <label class="wifi-modal-field"
+                          ><span>Name</span><input
+                            type="text"
+                            class="wifi-field-input"
+                            bind:value={speedProfileName}
+                            placeholder="e.g. Guest 10Mbps"
+                          /></label
+                        >
+                        <label class="wifi-modal-field"
+                          ><span>Download Limit (Kbps)</span><input
+                            type="number"
+                            class="wifi-field-input"
+                            bind:value={speedProfileDown}
+                            placeholder="Unlimited if empty"
+                          /></label
+                        >
+                        <label class="wifi-modal-field"
+                          ><span>Upload Limit (Kbps)</span><input
+                            type="number"
+                            class="wifi-field-input"
+                            bind:value={speedProfileUp}
+                            placeholder="Unlimited if empty"
+                          /></label
+                        >
+                      </div>
+                      <div class="wifi-modal-actions">
+                        <button
+                          class="wifi-btn wifi-btn-ghost"
+                          type="button"
+                          on:click={() => {
+                            showSpeedProfileModal = false;
+                          }}>Cancel</button
+                        >
+                        <button
+                          class="wifi-btn wifi-btn-primary"
+                          type="button"
+                          on:click={createSpeedProfile}
+                          disabled={!speedProfileName.trim() ||
+                            isCreatingSpeedProfile}
+                          >{isCreatingSpeedProfile
+                            ? "Creating…"
+                            : "Create"}</button
+                        >
+                      </div>
+                    </div>
+                  </div>
+                {/if}
+
+                <div class="wifi-detail-form">
+                  <!-- Manual / Auto mode toggle -->
+                  {#if canEditWifi}
+                    <div class="wifi-mode-toggle-wrap">
+                      <span class="wifi-mode-label">Configuration Mode</span>
+                      <div class="wifi-mode-toggle">
+                        <button
+                          type="button"
+                          class:active={wifiAdvancedMode === "auto"}
+                          on:click={() => {
+                            wifiAdvancedMode = "auto";
+                            updateWifiField("settingPreference", "auto");
+                          }}>Auto</button
+                        >
+                        <button
+                          type="button"
+                          class:active={wifiAdvancedMode === "manual"}
+                          on:click={() => {
+                            wifiAdvancedMode = "manual";
+                            updateWifiField("settingPreference", "manual");
+                          }}>Manual</button
+                        >
+                      </div>
+                      <span class="wifi-mode-hint"
+                        >{wifiAdvancedMode === "auto"
+                          ? "Only general settings are sent. Security and behavior controls are locked."
+                          : "All settings are editable. Changes are saved when you click Save."}</span
+                      >
+                    </div>
+                  {/if}
+
+                  <!-- SECTION 1: GENERAL -->
+                  <div class="wifi-group-card">
+                    <div class="wifi-group-header">
+                      <div class="wifi-group-icon">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="16"
+                          height="16"
+                          ><path d="M5 12.55a11 11 0 0114.08 0" /><path
+                            d="M1.42 9a16 16 0 0121.16 0"
+                          /><path d="M8.53 16.11a6 6 0 016.95 0" /><circle
+                            cx="12"
+                            cy="20"
+                            r="1"
+                          /></svg
+                        >
+                      </div>
+                      <div class="wifi-group-title-wrap">
+                        <h4 class="wifi-group-title">General</h4>
+                        <span class="wifi-group-desc"
+                          >Network name, password, and broadcasting</span
+                        >
+                      </div>
+                    </div>
+                    <div class="wifi-group-fields">
+                      <!-- Name (SSID) -->
+                      <div class="wifi-field">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Name (SSID)</span>
+                        </div>
+                        {#if canEditWifi}<input
+                            type="text"
+                            class="wifi-field-input"
+                            value={wifiEditState.name ?? ""}
+                            on:input={(e) =>
+                              updateWifiField("name", e.currentTarget.value)}
+                          />{:else}<span class="wifi-field-value"
+                            >{wifiEditState.name ?? "—"}</span
+                          >{/if}
+                      </div>
+                      <!-- Password -->
+                      {#if wifiEditState.security !== "open"}
+                        <div class="wifi-field">
+                          <div class="wifi-field-label-row">
+                            <span class="wifi-field-label">Password</span>
+                          </div>
+                          <div class="wifi-passphrase-wrap">
+                            {#if canEditWifi}<input
+                                type={revealedWifiPassphrases["detail"]
+                                  ? "text"
+                                  : "password"}
+                                class="wifi-field-input mono"
+                                value={wifiEditState.passphrase ?? ""}
+                                on:input={(e) =>
+                                  updateWifiField(
+                                    "passphrase",
+                                    e.currentTarget.value,
+                                  )}
+                              />{:else}<span class="wifi-field-value mono"
+                                >{revealedWifiPassphrases["detail"]
+                                  ? wifiEditState.passphrase
+                                  : "••••••••"}</span
+                              >{/if}
+                            <button
+                              class="wifi-reveal-btn"
+                              type="button"
+                              on:click={() => {
+                                revealedWifiPassphrases["detail"] =
+                                  !revealedWifiPassphrases["detail"];
+                                revealedWifiPassphrases =
+                                  revealedWifiPassphrases;
+                              }}
+                            >
+                              {#if revealedWifiPassphrases["detail"]}<svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="14"
+                                  height="14"
+                                  ><path
+                                    d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                  /><path
+                                    d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                  /><path
+                                    d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                  /><line x1="1" y1="1" x2="23" y2="23" /></svg
+                                >{:else}<svg
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  width="14"
+                                  height="14"
+                                  ><path
+                                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                  /><circle cx="12" cy="12" r="3" /></svg
+                                >{/if}
+                            </button>
+                          </div>
+                        </div>
+                      {/if}
+                      <!-- Network -->
+                      <div class="wifi-field">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Network</span><span
+                            class="wifi-field-hint"
+                            >VLAN / network assignment for this SSID</span
+                          >
+                        </div>
+                        {#if canEditWifi}<select
+                            class="wifi-field-select"
+                            value={String(wifiEditState.networkconfId ?? "")}
+                            on:change={(e) =>
+                              updateWifiField(
+                                "networkconfId",
+                                e.currentTarget.value,
+                              )}
+                            ><option value="">— Select Network —</option
+                            >{#each unifiSiteNetworks as net}<option
+                                value={net.id}
+                                >{net.name}{net.vlanId
+                                  ? ` (VLAN ${net.vlanId})`
+                                  : ""}</option
+                              >{/each}</select
+                          >{:else}{@const net = unifiSiteNetworks.find(
+                            (n) => n.id === String(wifiEditState.networkconfId),
+                          )}<span class="wifi-field-value"
+                            >{net
+                              ? `${net.name}${net.vlanId ? ` (VLAN ${net.vlanId})` : ""}`
+                              : "—"}</span
+                          >{/if}
+                      </div>
+                      <!-- Broadcasting APs -->
+                      <div class="wifi-field">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Broadcasting APs</span
+                          ><span class="wifi-field-hint"
+                            >Which access points broadcast this network</span
+                          >
+                        </div>
+                        {#if canEditWifi}<div class="wifi-bubble-select">
+                            <button
+                              type="button"
+                              class="wifi-bubble"
+                              class:active={wifiEditState.apGroupMode === "all"}
+                              on:click={() => {
+                                updateWifiField("apGroupMode", "all");
+                                updateWifiField("apGroupIds", []);
+                                updateWifiField("deviceMacs", []);
+                              }}>All</button
+                            ><button
+                              type="button"
+                              class="wifi-bubble"
+                              class:active={wifiEditState.apGroupMode ===
+                                "groups"}
+                              on:click={() => {
+                                updateWifiField("apGroupMode", "groups");
+                                updateWifiField("apGroupIds", []);
+                                updateWifiField("deviceMacs", []);
+                              }}>Group</button
+                            ><button
+                              type="button"
+                              class="wifi-bubble"
+                              class:active={wifiEditState.apGroupMode ===
+                                "devices"}
+                              on:click={() => {
+                                updateWifiField("apGroupMode", "devices");
+                                updateWifiField("apGroupIds", []);
+                                updateWifiField("deviceMacs", []);
+                              }}>Specific</button
+                            >
+                          </div>{:else}<span class="wifi-field-value"
+                            >{wifiEditState.apGroupMode === "all"
+                              ? "All APs"
+                              : wifiEditState.apGroupMode === "groups"
+                                ? "Groups"
+                                : "Specific Devices"}</span
+                          >{/if}
+                        {#if wifiEditState.apGroupMode === "groups"}
+                          <div class="wifi-group-checklist">
+                            {#if isLoadingApGroups}
+                              <div class="wifi-group-checklist-loading">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  height="16"
+                                  class="spin-icon"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                    fill="none"
+                                    opacity="0.25"
+                                  />
+                                  <path
+                                    d="M12 2a10 10 0 0 1 10 10"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                    fill="none"
+                                    stroke-linecap="round"
+                                  />
+                                </svg>
+                                <span>Loading AP groups…</span>
+                              </div>
+                            {:else if unifiApGroups.length === 0}
+                              <div class="wifi-group-checklist-empty">
+                                No AP groups found
+                              </div>
+                            {:else}
+                              <table class="wifi-group-table">
+                                <thead>
+                                  <tr>
+                                    <th class="wifi-group-th-check"></th>
+                                    <th class="wifi-group-th-name"
+                                      >Group Name</th
+                                    >
+                                    <th class="wifi-group-th-meta">APs</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {#each unifiApGroups.filter((g) => g.name !== "devices_ap_group") as group (group.id)}
+                                    {@const isChecked =
+                                      Array.isArray(wifiEditState.apGroupIds) &&
+                                      (
+                                        wifiEditState.apGroupIds as string[]
+                                      ).includes(group.id)}
+                                    {@const isEmpty =
+                                      group.deviceMacs.length === 0}
+                                    <tr
+                                      class="wifi-group-row"
+                                      class:checked={isChecked}
+                                      class:wifi-group-row-disabled={isEmpty}
+                                    >
+                                      <td class="wifi-group-td-check">
+                                        {#if canEditWifi}
+                                          <input
+                                            type="checkbox"
+                                            checked={isChecked}
+                                            disabled={isEmpty}
+                                            on:change={() => {
+                                              const validIds = new Set(
+                                                unifiApGroups.map((g) => g.id),
+                                              );
+                                              const current = Array.isArray(
+                                                wifiEditState.apGroupIds,
+                                              )
+                                                ? (
+                                                    wifiEditState.apGroupIds as string[]
+                                                  ).filter((id) =>
+                                                    validIds.has(id),
+                                                  )
+                                                : [];
+                                              if (isChecked) {
+                                                updateWifiField(
+                                                  "apGroupIds",
+                                                  current.filter(
+                                                    (id) => id !== group.id,
+                                                  ),
+                                                );
+                                              } else {
+                                                updateWifiField("apGroupIds", [
+                                                  ...current,
+                                                  group.id,
+                                                ]);
+                                              }
+                                            }}
+                                          />
+                                        {:else}
+                                          <input
+                                            type="checkbox"
+                                            checked={isChecked}
+                                            disabled
+                                          />
+                                        {/if}
+                                      </td>
+                                      <td class="wifi-group-td-name"
+                                        >{group.name}</td
+                                      >
+                                      <td class="wifi-group-td-meta"
+                                        >{group.deviceMacs.length}
+                                        {group.deviceMacs.length === 1
+                                          ? "AP"
+                                          : "APs"}</td
+                                      >
+                                    </tr>
+                                  {/each}
+                                </tbody>
+                              </table>
+                            {/if}
+                          </div>
+                        {:else if wifiEditState.apGroupMode === "devices"}
+                          <div class="wifi-group-checklist">
+                            {#if isLoadingAccessPoints}
+                              <div class="wifi-group-checklist-loading">
+                                <svg
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  height="16"
+                                  class="spin-icon"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                    fill="none"
+                                    opacity="0.25"
+                                  />
+                                  <path
+                                    d="M12 2a10 10 0 0 1 10 10"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                    fill="none"
+                                    stroke-linecap="round"
+                                  />
+                                </svg>
+                                <span>Loading access points…</span>
+                              </div>
+                            {:else if unifiAccessPoints.length === 0}
+                              <div class="wifi-group-checklist-empty">
+                                No access points found
+                              </div>
+                            {:else}
+                              <table class="wifi-group-table">
+                                <thead>
+                                  <tr>
+                                    <th class="wifi-group-th-check"></th>
+                                    <th class="wifi-group-th-name"
+                                      >Access Point</th
+                                    >
+                                    <th class="wifi-group-th-meta">Model</th>
+                                    <th class="wifi-group-th-meta">IP</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {#each unifiAccessPoints as ap (ap.id)}
+                                    {@const isChecked =
+                                      Array.isArray(wifiEditState.deviceMacs) &&
+                                      (
+                                        wifiEditState.deviceMacs as string[]
+                                      ).includes(ap.mac)}
+                                    <tr
+                                      class="wifi-group-row"
+                                      class:checked={isChecked}
+                                    >
+                                      <td class="wifi-group-td-check">
+                                        {#if canEditWifi}
+                                          <input
+                                            type="checkbox"
+                                            checked={isChecked}
+                                            on:change={() => {
+                                              const validMacs = new Set(
+                                                unifiAccessPoints.map(
+                                                  (a) => a.mac,
+                                                ),
+                                              );
+                                              const current = Array.isArray(
+                                                wifiEditState.deviceMacs,
+                                              )
+                                                ? (
+                                                    wifiEditState.deviceMacs as string[]
+                                                  ).filter((mac) =>
+                                                    validMacs.has(mac),
+                                                  )
+                                                : [];
+                                              if (isChecked) {
+                                                updateWifiField(
+                                                  "deviceMacs",
+                                                  current.filter(
+                                                    (mac) => mac !== ap.mac,
+                                                  ),
+                                                );
+                                              } else {
+                                                updateWifiField("deviceMacs", [
+                                                  ...current,
+                                                  ap.mac,
+                                                ]);
+                                              }
+                                            }}
+                                          />
+                                        {:else}
+                                          <input
+                                            type="checkbox"
+                                            checked={isChecked}
+                                            disabled
+                                          />
+                                        {/if}
+                                      </td>
+                                      <td class="wifi-group-td-name">
+                                        <span>{ap.name || ap.mac}</span>
+                                        {#if ap.name}<span
+                                            class="wifi-group-ap-mac"
+                                            >{ap.mac}</span
+                                          >{/if}
+                                      </td>
+                                      <td class="wifi-group-td-meta"
+                                        >{ap.model}</td
+                                      >
+                                      <td class="wifi-group-td-meta mono"
+                                        >{ap.ip}</td
+                                      >
+                                    </tr>
+                                  {/each}
+                                </tbody>
+                              </table>
+                            {/if}
+                          </div>
+                        {/if}
+                      </div>
+                      <!-- Application -->
+                      <div class="wifi-field">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Application</span><span
+                            class="wifi-field-hint">Network purpose</span
+                          >
+                        </div>
+                        {#if canEditWifi}<div class="wifi-bubble-select">
+                            <button
+                              type="button"
+                              class="wifi-bubble"
+                              class:active={!wifiEditState.isGuest}
+                              on:click={() => updateWifiField("isGuest", false)}
+                              >Standard</button
+                            ><button
+                              type="button"
+                              class="wifi-bubble"
+                              class:active={!!wifiEditState.isGuest}
+                              on:click={() => updateWifiField("isGuest", true)}
+                              >Guest / IoT</button
+                            >
+                          </div>{:else}<span class="wifi-field-value"
+                            >{wifiEditState.isGuest
+                              ? "Guest / IoT"
+                              : "Standard"}</span
+                          >{/if}
+                      </div>
+                      <!-- Radio Band -->
+                      <div class="wifi-field">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Radio Band</span><span
+                            class="wifi-field-hint"
+                            >Which frequencies to broadcast on</span
+                          >
+                        </div>
+                        {#if canEditWifi}<div class="wifi-radio-band-checks">
+                            <label class="wifi-radio-check"
+                              ><input
+                                type="checkbox"
+                                checked={wifiEditState.band === "2g" ||
+                                  wifiEditState.band === "both"}
+                                on:change={(e) => {
+                                  const has5g =
+                                    wifiEditState.band === "5g" ||
+                                    wifiEditState.band === "both";
+                                  if (e.currentTarget.checked) {
+                                    updateWifiField(
+                                      "band",
+                                      has5g ? "both" : "2g",
+                                    );
+                                  } else {
+                                    updateWifiField(
+                                      "band",
+                                      has5g ? "5g" : "2g",
+                                    );
+                                  }
+                                }}
+                              /><span>2.4 GHz</span></label
+                            ><label class="wifi-radio-check"
+                              ><input
+                                type="checkbox"
+                                checked={wifiEditState.band === "5g" ||
+                                  wifiEditState.band === "both"}
+                                on:change={(e) => {
+                                  const has2g =
+                                    wifiEditState.band === "2g" ||
+                                    wifiEditState.band === "both";
+                                  if (e.currentTarget.checked) {
+                                    updateWifiField(
+                                      "band",
+                                      has2g ? "both" : "5g",
+                                    );
+                                  } else {
+                                    updateWifiField(
+                                      "band",
+                                      has2g ? "2g" : "5g",
+                                    );
+                                  }
+                                }}
+                              /><span>5 GHz</span></label
+                            ><label
+                              class="wifi-radio-check wifi-radio-disabled"
+                              title="6 GHz support coming soon"
+                              ><input type="checkbox" disabled /><span
+                                >6 GHz</span
+                              ><span class="wifi-todo-badge">TODO</span></label
+                            >
+                          </div>{:else}<span class="wifi-field-value"
+                            >{wifiEditState.band === "both"
+                              ? "2.4 / 5 GHz"
+                              : wifiEditState.band === "2g"
+                                ? "2.4 GHz"
+                                : wifiEditState.band === "5g"
+                                  ? "5 GHz"
+                                  : String(wifiEditState.band)}</span
+                          >{/if}
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- SECTION 2: SECURITY -->
+                  <div
+                    class="wifi-group-card"
+                    class:wifi-section-disabled={wifiAdvancedMode === "auto"}
+                  >
+                    <div class="wifi-group-header">
+                      <div class="wifi-group-icon">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="16"
+                          height="16"
+                          ><path
+                            d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+                          /></svg
+                        >
+                      </div>
+                      <div class="wifi-group-title-wrap">
+                        <h4 class="wifi-group-title">Security</h4>
+                        <span class="wifi-group-desc"
+                          >Authentication, encryption, and access control</span
+                        >
+                      </div>
+                    </div>
+                    <div class="wifi-group-fields">
+                      <!-- Security Protocol -->
+                      <div class="wifi-field">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Security Protocol</span
+                          >
+                        </div>
+                        {#if canEditWifi}<select
+                            class="wifi-field-select"
+                            value={String(wifiEditState.security ?? "wpapsk")}
+                            on:change={(e) =>
+                              updateWifiField(
+                                "security",
+                                e.currentTarget.value,
+                              )}
+                            ><option value="wpapsk">WPA Personal</option><option
+                              value="wpaeap">WPA Enterprise</option
+                            ><option value="open">Open (No Security)</option
+                            ></select
+                          >{:else}<span class="wifi-field-value"
+                            >{wifiEditState.security === "wpapsk"
+                              ? "WPA Personal"
+                              : wifiEditState.security === "wpaeap"
+                                ? "WPA Enterprise"
+                                : wifiEditState.security === "open"
+                                  ? "Open"
+                                  : String(wifiEditState.security)}</span
+                          >{/if}
+                      </div>
+                      <!-- WPA Mode -->
+                      {#if wifiEditState.security !== "open"}<div
+                          class="wifi-field"
+                        >
+                          <div class="wifi-field-label-row">
+                            <span class="wifi-field-label">WPA Version</span>
+                          </div>
+                          {#if canEditWifi}<select
+                              class="wifi-field-select"
+                              value={String(wifiEditState.wpaMode ?? "wpa2")}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "wpaMode",
+                                  e.currentTarget.value,
+                                )}
+                              ><option value="wpa2">WPA2</option><option
+                                value="wpa3">WPA3</option
+                              ><option value="wpa2wpa3"
+                                >WPA2 / WPA3 Mixed</option
+                              ></select
+                            >{:else}<span class="wifi-field-value"
+                              >{wifiEditState.wpaMode === "wpa2"
+                                ? "WPA2"
+                                : wifiEditState.wpaMode === "wpa3"
+                                  ? "WPA3"
+                                  : "WPA2/WPA3"}</span
+                            >{/if}
+                        </div>{/if}
+                      <!-- PMF Mode -->
+                      {#if wifiEditState.security !== "open"}<div
+                          class="wifi-field"
+                        >
+                          <div class="wifi-field-label-row">
+                            <span class="wifi-field-label"
+                              >PMF (Protected Management Frames)</span
+                            ><span class="wifi-field-hint"
+                              >Protects management frames from forgery</span
+                            >
+                          </div>
+                          {#if canEditWifi}<div class="wifi-bubble-select">
+                              <button
+                                type="button"
+                                class="wifi-bubble"
+                                class:active={wifiEditState.pmfMode ===
+                                  "required"}
+                                on:click={() => confirmPmfChange("required")}
+                                >Required</button
+                              ><button
+                                type="button"
+                                class="wifi-bubble"
+                                class:active={wifiEditState.pmfMode ===
+                                  "optional"}
+                                on:click={() => confirmPmfChange("optional")}
+                                >Optional</button
+                              ><button
+                                type="button"
+                                class="wifi-bubble"
+                                class:active={wifiEditState.pmfMode ===
+                                  "disabled"}
+                                on:click={() =>
+                                  updateWifiField("pmfMode", "disabled")}
+                                >Disabled</button
+                              >
+                            </div>{:else}<span class="wifi-field-value"
+                              >{wifiEditState.pmfMode === "required"
+                                ? "Required"
+                                : wifiEditState.pmfMode === "optional"
+                                  ? "Optional"
+                                  : "Disabled"}</span
+                            >{/if}
+                        </div>{/if}
+                      <!-- Private Pre-Shared Keys -->
+                      {#if wifiEditState.security === "wpapsk"}
+                        <div class="wifi-field wifi-field-inline">
+                          <div class="wifi-field-label-row">
+                            <span class="wifi-field-label"
+                              >Private Pre-Shared Keys</span
+                            ><span class="wifi-field-hint"
+                              >Unique per-device passwords</span
+                            >
+                          </div>
+                          {#if canEditWifi}<label class="wifi-toggle"
+                              ><input
+                                type="checkbox"
+                                checked={!!wifiEditState.privatePreSharedKeysEnabled}
+                                on:change={(e) => {
+                                  updateWifiField(
+                                    "privatePreSharedKeysEnabled",
+                                    e.currentTarget.checked,
+                                  );
+                                  if (
+                                    e.currentTarget.checked &&
+                                    selectedUnifiSite &&
+                                    selectedWifi
+                                  ) {
+                                    loadPPSKs(
+                                      selectedUnifiSite.id,
+                                      selectedWifi.id,
+                                    );
+                                  }
+                                }}
+                              /><span class="wifi-toggle-slider"></span></label
+                            >{:else}<span
+                              class="wifi-field-value wifi-bool"
+                              class:yes={!!wifiEditState.privatePreSharedKeysEnabled}
+                              >{wifiEditState.privatePreSharedKeysEnabled
+                                ? "Yes"
+                                : "No"}</span
+                            >{/if}
+                        </div>
+                        {#if wifiEditState.privatePreSharedKeysEnabled}
+                          <div class="wifi-ppsk-section">
+                            {#if isLoadingPPSKs}<div class="wifi-ppsk-loading">
+                                Loading keys…
+                              </div>{:else if wifiPPSKs.length === 0}<div
+                                class="wifi-ppsk-empty"
+                              >
+                                No private PSKs configured
+                              </div>{:else}<div class="wifi-ppsk-list">
+                                {#each wifiPPSKs as psk, i (psk.name + i)}<div
+                                    class="wifi-ppsk-item"
+                                  >
+                                    <div class="wifi-ppsk-info">
+                                      <span class="wifi-ppsk-name"
+                                        >{psk.name}</span
+                                      >{#if psk.vlanId}<span
+                                          class="wifi-ppsk-vlan"
+                                          >VLAN {psk.vlanId}</span
+                                        >{/if}{#if psk.mac}<span
+                                          class="wifi-ppsk-mac">{psk.mac}</span
+                                        >{/if}
+                                    </div>
+                                    <div class="wifi-passphrase-wrap">
+                                      <span class="wifi-field-value mono"
+                                        >{revealedWifiPassphrases[`ppsk-${i}`]
+                                          ? psk.key
+                                          : "••••••••"}</span
+                                      ><button
+                                        class="wifi-reveal-btn"
+                                        type="button"
+                                        on:click={() => {
+                                          revealedWifiPassphrases[`ppsk-${i}`] =
+                                            !revealedWifiPassphrases[
+                                              `ppsk-${i}`
+                                            ];
+                                          revealedWifiPassphrases =
+                                            revealedWifiPassphrases;
+                                        }}
+                                        >{#if revealedWifiPassphrases[`ppsk-${i}`]}<svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="14"
+                                            height="14"
+                                            ><path
+                                              d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"
+                                            /><path
+                                              d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"
+                                            /><path
+                                              d="M14.12 14.12a3 3 0 11-4.24-4.24"
+                                            /><line
+                                              x1="1"
+                                              y1="1"
+                                              x2="23"
+                                              y2="23"
+                                            /></svg
+                                          >{:else}<svg
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                            width="14"
+                                            height="14"
+                                            ><path
+                                              d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                            /><circle
+                                              cx="12"
+                                              cy="12"
+                                              r="3"
+                                            /></svg
+                                          >{/if}</button
+                                      >
+                                    </div>
+                                  </div>{/each}
+                              </div>{/if}
+                            {#if canEditWifi}<div class="wifi-ppsk-add">
+                                <input
+                                  type="text"
+                                  class="wifi-field-input"
+                                  bind:value={ppskNewName}
+                                  placeholder="Name (e.g. John's Laptop)"
+                                /><input
+                                  type="password"
+                                  class="wifi-field-input mono"
+                                  bind:value={ppskNewKey}
+                                  placeholder="Password (min 8 chars)"
+                                /><input
+                                  type="text"
+                                  class="wifi-field-input"
+                                  bind:value={ppskNewVlanId}
+                                  placeholder="VLAN (optional)"
+                                /><button
+                                  class="wifi-btn wifi-btn-primary"
+                                  type="button"
+                                  on:click={addPPSK}
+                                  disabled={!ppskNewName.trim() ||
+                                    ppskNewKey.trim().length < 8 ||
+                                    isAddingPPSK}
+                                  >{isAddingPPSK
+                                    ? "Adding…"
+                                    : "Add PSK"}</button
+                                >
+                              </div>{/if}
+                          </div>
+                        {/if}
+                      {/if}
+                      <!-- Hide WiFi Name -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Hide WiFi Name</span
+                          ><span class="wifi-field-hint"
+                            >Network won't appear in scan results</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.hideSSID}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "hideSSID",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.hideSSID}
+                            >{wifiEditState.hideSSID ? "Yes" : "No"}</span
+                          >{/if}
+                      </div>
+                      <!-- Client Device Isolation -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >Client Device Isolation</span
+                          ><span class="wifi-field-hint"
+                            >Prevent clients from communicating with each other</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.l2Isolation}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "l2Isolation",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.l2Isolation}
+                            >{wifiEditState.l2Isolation ? "Yes" : "No"}</span
+                          >{/if}
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- SECTION 3: BEHAVIOR CONTROLS -->
+                  <div
+                    class="wifi-group-card"
+                    class:wifi-section-disabled={wifiAdvancedMode === "auto"}
+                  >
+                    <div class="wifi-group-header">
+                      <div class="wifi-group-icon">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          width="16"
+                          height="16"
+                          ><circle cx="12" cy="12" r="3" /><path
+                            d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+                          /></svg
+                        >
+                      </div>
+                      <div class="wifi-group-title-wrap">
+                        <h4 class="wifi-group-title">Behavior Controls</h4>
+                        <span class="wifi-group-desc"
+                          >Advanced wireless features and optimizations</span
+                        >
+                      </div>
+                    </div>
+                    <div class="wifi-group-fields">
+                      <div
+                        class="wifi-field wifi-field-inline"
+                        class:wifi-field-disabled={wifiEditState.band !==
+                          "both"}
+                      >
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Band Steering</span
+                          ><span class="wifi-field-hint"
+                            >{wifiEditState.band !== "both"
+                              ? "Requires both 2.4 GHz and 5 GHz bands"
+                              : "Prefer 5 GHz for dual-band clients"}</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.no2ghzOui}
+                              disabled={wifiEditState.band !== "both"}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "no2ghzOui",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.no2ghzOui}
+                            >{wifiEditState.no2ghzOui ? "Yes" : "No"}</span
+                          >{/if}
+                      </div>
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Proxy ARP</span><span
+                            class="wifi-field-hint"
+                            >AP answers ARP requests on behalf of clients</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.proxyArp}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "proxyArp",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.proxyArp}
+                            >{wifiEditState.proxyArp ? "Yes" : "No"}</span
+                          >{/if}
+                      </div>
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >BSS Transition (802.11v)</span
+                          ><span class="wifi-field-hint"
+                            >Helps clients find a better AP</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.bssTransition}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "bssTransition",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.bssTransition}
+                            >{wifiEditState.bssTransition ? "Yes" : "No"}</span
+                          >{/if}
+                      </div>
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >U-APSD (Power Save)</span
+                          ><span class="wifi-field-hint"
+                            >Reduces power consumption on mobile devices</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.uapsdEnabled}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "uapsdEnabled",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.uapsdEnabled}
+                            >{wifiEditState.uapsdEnabled ? "Yes" : "No"}</span
+                          >{/if}
+                      </div>
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >Fast Roaming (802.11r)</span
+                          ><span class="wifi-field-hint"
+                            >Faster transitions between access points</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.fastRoamingEnabled}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "fastRoamingEnabled",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.fastRoamingEnabled}
+                            >{wifiEditState.fastRoamingEnabled
+                              ? "Yes"
+                              : "No"}</span
+                          >{/if}
+                      </div>
+                      <!-- MAC Address Filter -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >MAC Address Filter</span
+                          ><span class="wifi-field-hint"
+                            >Allow or deny specific devices</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.macFilterEnabled}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "macFilterEnabled",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.macFilterEnabled}
+                            >{wifiEditState.macFilterEnabled
+                              ? "Yes"
+                              : "No"}</span
+                          >{/if}
+                      </div>
+                      {#if wifiEditState.macFilterEnabled}
+                        <div class="wifi-sub-section">
+                          <div class="wifi-field">
+                            <div class="wifi-field-label-row">
+                              <span class="wifi-field-label">Filter Type</span>
+                            </div>
+                            {#if canEditWifi}<div class="wifi-bubble-select">
+                                <button
+                                  type="button"
+                                  class="wifi-bubble"
+                                  class:active={wifiEditState.macFilterPolicy ===
+                                    "allow"}
+                                  on:click={() =>
+                                    updateWifiField("macFilterPolicy", "allow")}
+                                  >Allow</button
+                                ><button
+                                  type="button"
+                                  class="wifi-bubble"
+                                  class:active={wifiEditState.macFilterPolicy ===
+                                    "deny"}
+                                  on:click={() =>
+                                    updateWifiField("macFilterPolicy", "deny")}
+                                  >Deny</button
+                                >
+                              </div>{:else}<span class="wifi-field-value"
+                                >{wifiEditState.macFilterPolicy === "allow"
+                                  ? "Allow List"
+                                  : "Deny List"}</span
+                              >{/if}
+                          </div>
+                          {#if canEditWifi}<div class="wifi-mac-add">
+                              <input
+                                type="text"
+                                class="wifi-field-input mono"
+                                bind:value={macFilterNewMac}
+                                placeholder="AA:BB:CC:DD:EE:FF"
+                                on:keydown={(e) => {
+                                  if (e.key === "Enter") addMacToFilterList();
+                                }}
+                              /><button
+                                class="wifi-btn wifi-btn-primary"
+                                type="button"
+                                on:click={addMacToFilterList}
+                                disabled={!macFilterNewMac.trim()}>Add</button
+                              >
+                            </div>{/if}
+                          {#if Array.isArray(wifiEditState.macFilterList) && (wifiEditState.macFilterList as string[]).length > 0}<div
+                              class="wifi-mac-list"
+                            >
+                              {#each wifiEditState.macFilterList as string[] as mac}<div
+                                  class="wifi-mac-item"
+                                >
+                                  <span class="mono">{mac}</span
+                                  >{#if canEditWifi}<button
+                                      class="wifi-mac-remove"
+                                      type="button"
+                                      on:click={() =>
+                                        removeMacFromFilterList(mac)}
+                                      title="Remove">×</button
+                                    >{/if}
+                                </div>{/each}
+                            </div>{:else}<div class="wifi-ppsk-empty">
+                              No MAC addresses added
+                            </div>{/if}
+                        </div>
+                      {/if}
+                      <!-- RADIUS MAC Authentication -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >RADIUS MAC Authentication</span
+                          ><span class="wifi-field-hint"
+                            >Authenticate clients by MAC address via RADIUS</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.radiusMacAuthEnabled}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "radiusMacAuthEnabled",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.radiusMacAuthEnabled}
+                            >{wifiEditState.radiusMacAuthEnabled
+                              ? "Yes"
+                              : "No"}</span
+                          >{/if}
+                      </div>
+                      {#if wifiEditState.radiusMacAuthEnabled}<div
+                          class="wifi-sub-section"
+                        >
+                          <div class="wifi-field">
+                            <div class="wifi-field-label-row">
+                              <span class="wifi-field-label"
+                                >MAC Address Format</span
+                              ><span class="wifi-field-hint"
+                                >Format used when sending MAC to RADIUS</span
+                              >
+                            </div>
+                            {#if canEditWifi}<select
+                                class="wifi-field-select"
+                                value={String(
+                                  wifiEditState.radiusMacaclFormat ??
+                                    "none_lower",
+                                )}
+                                on:change={(e) =>
+                                  updateWifiField(
+                                    "radiusMacaclFormat",
+                                    e.currentTarget.value,
+                                  )}
+                                ><option value="none_lower">aabbccddeeff</option
+                                ><option value="colon_lower"
+                                  >aa:bb:cc:dd:ee:ff</option
+                                ><option value="dash_lower"
+                                  >aa-bb-cc-dd-ee-ff</option
+                                ><option value="colon_upper"
+                                  >AA:BB:CC:DD:EE:FF</option
+                                ><option value="dash_upper"
+                                  >AA-BB-CC-DD-EE-FF</option
+                                ></select
+                              >{:else}<span class="wifi-field-value mono"
+                                >{wifiEditState.radiusMacaclFormat ?? "—"}</span
+                              >{/if}
+                          </div>
+                        </div>{/if}
+                      <!-- WiFi Speed Limit -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">WiFi Speed Limit</span
+                          ><span class="wifi-field-hint"
+                            >Apply a bandwidth profile to clients on this
+                            network</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.usergroupId &&
+                                wifiEditState.usergroupId !==
+                                  unifiSpeedProfiles.find(
+                                    (p) => p.downloadLimitKbps === -1,
+                                  )?.id}
+                              on:change={(e) => {
+                                if (!e.currentTarget.checked) {
+                                  const defaultProfile =
+                                    unifiSpeedProfiles.find(
+                                      (p) => p.downloadLimitKbps === -1,
+                                    );
+                                  updateWifiField(
+                                    "usergroupId",
+                                    defaultProfile?.id ?? "",
+                                  );
+                                } else {
+                                  const firstLimited = unifiSpeedProfiles.find(
+                                    (p) => p.downloadLimitKbps !== -1,
+                                  );
+                                  if (firstLimited)
+                                    updateWifiField(
+                                      "usergroupId",
+                                      firstLimited.id,
+                                    );
+                                }
+                              }}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}{@const profile = unifiSpeedProfiles.find(
+                            (p) => p.id === String(wifiEditState.usergroupId),
+                          )}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={profile &&
+                              profile.downloadLimitKbps !== -1}
+                            >{profile && profile.downloadLimitKbps !== -1
+                              ? "Yes"
+                              : "No"}</span
+                          >{/if}
+                      </div>
+                      {#if wifiEditState.usergroupId && wifiEditState.usergroupId !== unifiSpeedProfiles.find((p) => p.downloadLimitKbps === -1)?.id}<div
+                          class="wifi-sub-section"
+                        >
+                          <div class="wifi-field">
+                            <div class="wifi-field-label-row">
+                              <span class="wifi-field-label">Speed Profile</span
+                              >
+                            </div>
+                            {#if canEditWifi}<div class="wifi-speed-row">
+                                <select
+                                  class="wifi-field-select"
+                                  value={String(
+                                    wifiEditState.usergroupId ?? "",
+                                  )}
+                                  on:change={(e) =>
+                                    updateWifiField(
+                                      "usergroupId",
+                                      e.currentTarget.value,
+                                    )}
+                                  >{#each unifiSpeedProfiles.filter((p) => p.downloadLimitKbps !== -1) as profile}<option
+                                      value={profile.id}
+                                      >{profile.name} (↓{profile.downloadLimitKbps}
+                                      / ↑{profile.uploadLimitKbps} Kbps)</option
+                                    >{/each}</select
+                                ><button
+                                  class="wifi-btn wifi-btn-ghost"
+                                  type="button"
+                                  on:click={() => {
+                                    showSpeedProfileModal = true;
+                                  }}
+                                  title="Create new speed profile">+</button
+                                >
+                              </div>{:else}{@const profile =
+                                unifiSpeedProfiles.find(
+                                  (p) =>
+                                    p.id === String(wifiEditState.usergroupId),
+                                )}<span class="wifi-field-value"
+                                >{profile ? profile.name : "—"}</span
+                              >{/if}
+                          </div>
+                        </div>{/if}
+                      <!-- Auto DTIM Period -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label">Auto DTIM Period</span
+                          ><span class="wifi-field-hint"
+                            >When enabled, DTIM is automatically managed</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={wifiEditState.dtimMode === "default"}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "dtimMode",
+                                  e.currentTarget.checked
+                                    ? "default"
+                                    : "custom",
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={wifiEditState.dtimMode === "default"}
+                            >{wifiEditState.dtimMode === "default"
+                              ? "Auto"
+                              : "Custom"}</span
+                          >{/if}
+                      </div>
+                      {#if wifiEditState.dtimMode !== "default"}<div
+                          class="wifi-sub-section"
+                        >
+                          <div class="wifi-dtim-inline">
+                            <label class="wifi-dtim-field"
+                              ><span>2.4 GHz</span><input
+                                type="number"
+                                class="wifi-field-input"
+                                value={wifiEditState.dtimNg ?? 1}
+                                on:input={(e) =>
+                                  updateWifiField(
+                                    "dtimNg",
+                                    Number(e.currentTarget.value),
+                                  )}
+                                min="1"
+                              /></label
+                            ><label class="wifi-dtim-field"
+                              ><span>5 GHz</span><input
+                                type="number"
+                                class="wifi-field-input"
+                                value={wifiEditState.dtimNa ?? 3}
+                                on:input={(e) =>
+                                  updateWifiField(
+                                    "dtimNa",
+                                    Number(e.currentTarget.value),
+                                  )}
+                                min="1"
+                              /></label
+                            ><label class="wifi-dtim-field"
+                              ><span>6 GHz</span><input
+                                type="number"
+                                class="wifi-field-input"
+                                value={wifiEditState.dtim6e ?? 3}
+                                on:input={(e) =>
+                                  updateWifiField(
+                                    "dtim6e",
+                                    Number(e.currentTarget.value),
+                                  )}
+                                min="1"
+                              /></label
+                            >
+                          </div>
+                        </div>{/if}
+                      <!-- Group Key Interval -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >Group Key Interval</span
+                          ><span class="wifi-field-hint"
+                            >Periodic group key rotation for enhanced security</span
+                          >
+                        </div>
+                        {#if canEditWifi}{@const gkiValue =
+                            Number(wifiEditState.groupRekey) || 0}
+                          <div class="wifi-gki-row">
+                            {#if gkiValue > 0}<div class="wifi-inline-number">
+                                <input
+                                  type="number"
+                                  class="wifi-field-input"
+                                  value={wifiEditState.groupRekey}
+                                  on:input={(e) =>
+                                    updateWifiField(
+                                      "groupRekey",
+                                      Number(e.currentTarget.value),
+                                    )}
+                                  min="1"
+                                /><span class="wifi-inline-unit">sec</span>
+                              </div>{/if}<label class="wifi-toggle"
+                              ><input
+                                type="checkbox"
+                                checked={gkiValue > 0}
+                                on:change={(e) => {
+                                  updateWifiField(
+                                    "groupRekey",
+                                    e.currentTarget.checked ? 3600 : 0,
+                                  );
+                                }}
+                              /><span class="wifi-toggle-slider"></span></label
+                            >
+                          </div>{:else}{@const gkiValue =
+                            Number(wifiEditState.groupRekey) || 0}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={gkiValue > 0}
+                            >{gkiValue > 0
+                              ? `${wifiEditState.groupRekey}s`
+                              : "Off"}</span
+                          >{/if}
+                      </div>
+                      <!-- Multicast Enhancement -->
+                      <div class="wifi-field wifi-field-inline">
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >Multicast Enhancement</span
+                          ><span class="wifi-field-hint"
+                            >Converts multicast to unicast for better
+                            performance</span
+                          >
+                        </div>
+                        {#if canEditWifi}<label class="wifi-toggle"
+                            ><input
+                              type="checkbox"
+                              checked={!!wifiEditState.mcastenhanceEnabled}
+                              on:change={(e) =>
+                                updateWifiField(
+                                  "mcastenhanceEnabled",
+                                  e.currentTarget.checked,
+                                )}
+                            /><span class="wifi-toggle-slider"></span></label
+                          >{:else}<span
+                            class="wifi-field-value wifi-bool"
+                            class:yes={!!wifiEditState.mcastenhanceEnabled}
+                            >{wifiEditState.mcastenhanceEnabled
+                              ? "Yes"
+                              : "No"}</span
+                          >{/if}
+                      </div>
+                      <!-- WiFi Blackout Schedule -->
+                      <div
+                        class="wifi-field wifi-field-inline wifi-field-disabled"
+                        title="WiFi Blackout Schedule is not yet implemented"
+                      >
+                        <div class="wifi-field-label-row">
+                          <span class="wifi-field-label"
+                            >WiFi Blackout Schedule</span
+                          ><span class="wifi-field-hint"
+                            >Schedule times when this network is disabled <span
+                              class="wifi-info-bubble"
+                              title="This feature is not yet implemented in the UI. Contact your administrator to configure via the UniFi controller."
+                              >ℹ️</span
+                            ></span
+                          >
+                        </div>
+                        <span class="wifi-todo-badge">TODO</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              {:else}
+                <div class="wifi-detail-placeholder">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    width="40"
+                    height="40"
+                    ><path d="M5 12.55a11 11 0 0114.08 0" /><path
+                      d="M1.42 9a16 16 0 0121.16 0"
+                    /><path d="M8.53 16.11a6 6 0 016.95 0" /><line
+                      x1="12"
+                      y1="20"
+                      x2="12.01"
+                      y2="20"
+                    /></svg
+                  >
+                  <p>Select a network to view and edit settings</p>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      {:else if unifiManagementTab === "networks"}
+        {#if isLoadingUnifiNetworks}
+          <div class="unifi-loading">
+            <svg viewBox="0 0 24 24" width="20" height="20" class="spin-icon"
+              ><circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                opacity="0.25"
+              /><path
+                d="M12 2a10 10 0 0 1 10 10"
+                stroke="currentColor"
+                stroke-width="3"
+                fill="none"
+                stroke-linecap="round"
+              /></svg
+            >
+            <span>Loading networks…</span>
+          </div>
+        {:else if unifiSiteNetworks.length === 0}
+          <div class="unifi-empty-state">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              width="32"
+              height="32"
+              ><rect x="1" y="4" width="22" height="16" rx="2" ry="2" /><line
+                x1="1"
+                y1="10"
+                x2="23"
+                y2="10"
+              /></svg
+            >
+            <p>No networks found</p>
+          </div>
+        {:else}
+          <div class="unifi-networks-list">
+            {#each unifiSiteNetworks as network (network.id)}
+              <div class="unifi-network-card">
+                <div class="unifi-network-header">
+                  <span class="unifi-network-name">{network.name}</span>
+                  <div class="unifi-network-badges">
+                    <span class="unifi-wifi-badge">{network.purpose}</span>
+                    {#if network.vlanId}<span class="unifi-wifi-badge"
+                        >VLAN {network.vlanId}</span
+                      >{/if}
+                    {#if !network.enabled}<span
+                        class="unifi-wifi-badge disabled-badge">Disabled</span
+                      >{/if}
+                  </div>
+                </div>
+                <div class="unifi-network-details">
+                  {#if network.subnet}<div class="unifi-device-detail">
+                      <span class="unifi-device-label">Subnet</span><span
+                        class="unifi-device-value mono">{network.subnet}</span
+                      >
+                    </div>{/if}
+                  {#if network.dhcpEnabled}<div class="unifi-device-detail">
+                      <span class="unifi-device-label">DHCP Range</span><span
+                        class="unifi-device-value mono"
+                        >{network.dhcpStart} – {network.dhcpStop}</span
+                      >
+                    </div>{/if}
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+{:else}
+  <!-- Site cards grid -->
+  {#if unifiSites.length === 0}
+    <div class="tab-empty">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        class="tab-empty-icon"
+        ><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path
+          d="M2 12l10 5 10-5"
+        /></svg
+      >
+      <p>No UniFi sites linked to this company</p>
+      <button
+        type="button"
+        class="create-credential-btn"
+        on:click={() => (isLinkUnifiOpen = true)}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          width="14"
+          height="14"
+          ><path
+            d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
+          /><path
+            d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
+          /></svg
+        >
+        Link Site
+      </button>
+    </div>
+  {:else}
+    <div class="unifi-sites-grid">
+      {#each unifiSites as site (site.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="unifi-site-card"
+          on:click={() => selectUnifiSite(site)}
+          on:keydown={(e) => e.key === "Enter" && selectUnifiSite(site)}
+          role="button"
+          tabindex="0"
+        >
+          <div class="unifi-site-card-top">
+            <div class="unifi-site-card-info">
+              <span class="unifi-site-card-name">{site.name}</span><span
+                class="unifi-site-card-id">{site.siteId}</span
+              >
+            </div>
+            {#if siteOverviews[site.id]}
+              {@const health = getCardHealthStatus(site.id)}
+              <span
+                class="unifi-site-card-status"
+                class:status-ok={health === "ok"}
+                class:status-warn={health === "warn"}
+                class:status-error={health === "error"}
+                class:status-unknown={health === "unknown"}
+              >
+                <span class="status-dot"></span>
+                {health === "ok"
+                  ? "Healthy"
+                  : health === "warn"
+                    ? "Warning"
+                    : health === "error"
+                      ? "Error"
+                      : "Unknown"}
+              </span>
+            {:else}
+              <span class="unifi-site-card-status status-loading"
+                ><svg
+                  viewBox="0 0 24 24"
+                  width="12"
+                  height="12"
+                  class="spin-icon"
+                  ><circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    fill="none"
+                    opacity="0.25"
+                  /><path
+                    d="M12 2a10 10 0 0 1 10 10"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    fill="none"
+                    stroke-linecap="round"
+                  /></svg
+                ></span
+              >
+            {/if}
+          </div>
+          <div class="unifi-site-card-stats">
+            {#if siteOverviews[site.id]}
+              <div class="unifi-card-stat">
+                <span class="unifi-card-stat-value"
+                  >{getCardDeviceCount(site.id)}</span
+                ><span class="unifi-card-stat-label">Devices</span>
+              </div>
+              <div class="unifi-card-stat">
+                <span class="unifi-card-stat-value"
+                  >{getCardGatewayCount(site.id)}</span
+                ><span class="unifi-card-stat-label">Gateways</span>
+              </div>
+              <div class="unifi-card-stat">
+                <span class="unifi-card-stat-value"
+                  >{siteOverviews[site.id]?.health?.length ?? 0}</span
+                ><span class="unifi-card-stat-label">Subsystems</span>
+              </div>
+            {:else}
+              <div class="unifi-card-stats-loading">
+                <span class="unifi-card-stat-placeholder"></span><span
+                  class="unifi-card-stat-placeholder"
+                ></span><span class="unifi-card-stat-placeholder"></span>
+              </div>
+            {/if}
+          </div>
+          <div class="unifi-site-card-arrow">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              width="14"
+              height="14"><polyline points="9 18 15 12 9 6" /></svg
+            >
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+{/if}
diff --git a/src/routes/companies/[id]/secure-value/+server.ts b/src/routes/companies/[id]/secure-value/+server.ts
new file mode 100644
index 0000000..47cfd1b
--- /dev/null
+++ b/src/routes/companies/[id]/secure-value/+server.ts
@@ -0,0 +1,32 @@
+import { optima } from "$lib";
+import { json, error } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+  const accessToken = locals.session?.accessToken;
+  if (!accessToken) {
+    throw error(401, "Unauthorized");
+  }
+
+  const credentialId = url.searchParams.get("credentialId");
+  const fieldId = url.searchParams.get("fieldId");
+  if (!credentialId || !fieldId) {
+    throw error(400, "Missing credentialId or fieldId");
+  }
+
+  try {
+    const result = await optima.credential.fetchSecureValue(
+      accessToken,
+      credentialId,
+      fieldId,
+    );
+    return json(result);
+  } catch (err: unknown) {
+    console.error("Failed to fetch secure value:", err);
+    const status =
+      err && typeof err === "object" && "status" in err
+        ? (err as { status: number }).status
+        : 500;
+    throw error(status, "Failed to fetch secure value");
+  }
+};
diff --git a/src/routes/companies/[id]/types.ts b/src/routes/companies/[id]/types.ts
new file mode 100644
index 0000000..2ebbe9a
--- /dev/null
+++ b/src/routes/companies/[id]/types.ts
@@ -0,0 +1,187 @@
+import type { Credential } from "$lib/optima-api/modules/credentials";
+import type { CredentialType } from "$lib/optima-api/modules/credentialTypes";
+import type { UnifiSite } from "$lib/optima-api/modules/unifi";
+import type { PermissionMap } from "$lib/permissions";
+
+export interface CompanyData {
+  id: string;
+  name: string;
+  status?: string;
+  type?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  identifier?: string;
+  contactEmail?: string;
+  contactPhone?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+  country?: string;
+  cw_Data?: {
+    address?: {
+      line1?: string;
+      line2?: string | null;
+      city?: string;
+      state?: string;
+      zip?: string;
+      country?: string;
+    };
+    primaryContact?: {
+      firstName?: string;
+      lastName?: string;
+      cwId?: number;
+      inactive?: boolean;
+      title?: string;
+      phone?: string;
+      email?: string;
+    };
+    allContacts?: Array<{
+      firstName?: string;
+      lastName?: string;
+      cwId?: number;
+      inactive?: boolean;
+      title?: string;
+      phone?: string;
+      email?: string;
+    }>;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+export interface ConfigurationData {
+  id: string | number;
+  name: string;
+  active?: boolean;
+  serialNumber?: string;
+  status?: {
+    id: number;
+    name: string;
+  };
+  type?: {
+    id: number;
+    name: string;
+    _info?: { type_href?: string };
+  };
+  notes?: string;
+  questions?: Array<{
+    id: number;
+    question: string;
+    answer?: string;
+    fieldType: string;
+  }> | null;
+  info?: {
+    lastUpdated?: string;
+    updatedBy?: string;
+    dateEntered?: string;
+    enteredBy?: string;
+  };
+  key?: string;
+  value?: string;
+  description?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  [key: string]: unknown;
+}
+
+export interface PageData {
+  company: CompanyData | null;
+  configurations: ConfigurationData[];
+  credentials: Credential[];
+  credentialTypes: CredentialType[];
+  unifiSites: UnifiSite[];
+  accessToken: string | null;
+  permissions: PermissionMap;
+}
+
+// Shared utility functions
+export function companyInitials(name: string): string {
+  return name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase();
+}
+
+export function statusClass(status?: string): string {
+  if (!status) return "neutral";
+  const s = status.toLowerCase();
+  if (s === "active") return "active";
+  if (s === "inactive" || s === "disabled") return "inactive";
+  if (s === "pending") return "pending";
+  return "neutral";
+}
+
+export function configStatusClass(statusName?: string): string {
+  if (!statusName) return "neutral";
+  const s = statusName.toLowerCase();
+  if (s === "active") return "active";
+  if (s === "inactive" || s === "automate inactive") return "inactive";
+  if (s === "reserved") return "reserved";
+  if (s === "provisioning" || s === "pending approval") return "pending";
+  return "neutral";
+}
+
+export function formatDate(dateStr?: string): string {
+  if (!dateStr) return "";
+  try {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return "";
+  }
+}
+
+export function formatPhone(phone?: string): string {
+  if (!phone) return "";
+  const digits = phone.replace(/\D/g, "");
+  if (digits.length === 10) {
+    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+  }
+  if (digits.length === 11 && digits.startsWith("1")) {
+    return `+1 (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`;
+  }
+  return phone;
+}
+
+export function formatValueTypeLabel(vt: string): string {
+  return vt
+    .split("_")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+export function formatAddress(c: CompanyData): string[] {
+  const addr = c.cw_Data?.address;
+  if (addr) {
+    const lines: string[] = [];
+    if (addr.line1) lines.push(addr.line1);
+    if (addr.line2) lines.push(addr.line2);
+    const cityStateZip = [addr.city, addr.state, addr.zip]
+      .filter(Boolean)
+      .join(", ");
+    if (cityStateZip) lines.push(cityStateZip);
+    if (addr.country) lines.push(addr.country);
+    return lines;
+  }
+  const lines: string[] = [];
+  if (c.address) lines.push(c.address);
+  const cityStateZip = [c.city, c.state, c.zip].filter(Boolean).join(", ");
+  if (cityStateZip) lines.push(cityStateZip);
+  if (c.country) lines.push(c.country);
+  return lines;
+}
+
+export function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${mins}m`;
+  return `${mins}m`;
+}
diff --git a/src/styles/admin/credential-types.css b/src/styles/admin/credential-types.css
new file mode 100644
index 0000000..578f120
--- /dev/null
+++ b/src/styles/admin/credential-types.css
@@ -0,0 +1,591 @@
+/* ── Credential Types Admin Page ── */
+
+/* ── Table header layout ── */
+:global(.admin-table-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.create-ct-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: filter 0.15s;
+  flex-shrink: 0;
+}
+
+.create-ct-btn:hover {
+  filter: brightness(1.1);
+}
+
+/* ── Search bar ── */
+.ct-search-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.ct-search-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.ct-search-input {
+  padding: 7px 12px 7px 30px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+  background: var(--bg-inset);
+  font-size: 13px;
+  color: var(--text-primary);
+  width: 220px;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.ct-search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.ct-search-input:focus {
+  outline: none;
+  border-color: var(--input-focus-border);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+/* ── Credential Type row ── */
+.ct-row {
+  cursor: pointer;
+}
+
+.ct-row.expanded {
+  background: var(--card-hover-bg);
+}
+
+.ct-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ct-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.ct-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ct-scope {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-inset);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.ct-field-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.ct-cred-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.ct-cred-count svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* ── Expanded detail row ── */
+.ct-detail-row td {
+  padding: 0 !important;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.ct-detail-content {
+  padding: 16px 24px 20px;
+  background: var(--bg-inset);
+  animation: ctDetailFadeIn 0.15s ease;
+}
+
+@keyframes ctDetailFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ct-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.ct-detail-section {
+  margin-bottom: 0;
+}
+
+.ct-detail-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ct-detail-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* ── Field cards in detail view ── */
+.ct-field-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ct-field-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+}
+
+.ct-field-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--status-neutral-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.ct-field-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.ct-field-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ct-field-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.ct-field-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--status-neutral-bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle);
+}
+
+.ct-field-badge.required {
+  background: rgba(0, 102, 204, 0.08);
+  color: var(--accent-color, #0066cc);
+  border-color: rgba(0, 102, 204, 0.2);
+}
+
+.ct-field-badge.secure {
+  background: rgba(220, 38, 38, 0.06);
+  color: #dc2626;
+  border-color: rgba(220, 38, 38, 0.15);
+}
+
+/* ── Sub-field display in detail view ── */
+.ct-subfield-group {
+  display: flex;
+  gap: 0;
+  padding-left: 14px;
+  position: relative;
+}
+
+.ct-subfield-connector {
+  width: 16px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.ct-subfield-connector::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: -3px;
+  bottom: 50%;
+  width: 1px;
+  background: var(--border-subtle);
+}
+
+.ct-subfield-connector::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 12px;
+  height: 1px;
+  background: var(--border-subtle);
+  display: none;
+}
+
+.ct-subfield-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.ct-subfield-card {
+  padding: 6px 10px;
+  border-style: dashed;
+  background: var(--bg-inset);
+}
+
+.ct-subfield-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+}
+
+/* ── Detail info fields ── */
+.ct-detail-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ct-detail-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.detail-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.detail-value {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.detail-mono {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+}
+
+/* ── Three-dot menu ── */
+.ct-menu {
+  position: fixed;
+  z-index: 200;
+  min-width: 130px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  padding: 4px;
+  animation: menuIn 0.1s ease;
+}
+
+.ct-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.ct-menu-item:hover {
+  background: var(--card-hover-bg);
+}
+
+.ct-menu-item svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.ct-menu-item-danger {
+  color: #dc2626;
+}
+
+.ct-menu-item-danger svg {
+  color: #dc2626;
+}
+
+.ct-menu-item-danger:hover {
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.ct-menu-sep {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 3px 4px;
+}
+
+/* ── Delete confirmation overlay ── */
+.confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.confirm-dialog {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+  width: 90%;
+  max-width: 380px;
+  padding: 28px 24px 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  animation: modalIn 0.15s ease;
+}
+
+.confirm-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #dc2626;
+  margin-bottom: 14px;
+}
+
+.confirm-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.confirm-body {
+  margin: 0 0 16px;
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.confirm-error {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #dc2626;
+}
+
+.confirm-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  justify-content: center;
+}
+
+.confirm-actions form {
+  display: contents;
+}
+
+.btn-cancel {
+  padding: 7px 16px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.btn-cancel:hover:not(:disabled) {
+  background: var(--card-hover-bg);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+.btn-cancel:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-delete-confirm {
+  padding: 7px 16px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: #dc2626;
+  border: 1px solid transparent;
+  color: #fff;
+  transition: filter 0.15s;
+}
+
+.btn-delete-confirm:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.btn-delete-confirm:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ── Shared ── */
+.detail-count {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  padding: 1px 6px;
+  border-radius: 8px;
+  margin-left: 2px;
+}
+
+.row-end-cell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.row-end-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.row-chevron {
+  transition: transform 0.2s ease;
+  color: var(--text-muted);
+}
+
+.row-chevron.open {
+  transform: rotate(180deg);
+}
+
+.menu-wrap {
+  position: relative;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+
+.menu-btn:hover {
+  background: var(--card-hover-bg);
+  border-color: var(--border-subtle);
+  color: var(--text-primary);
+}
+
+@keyframes menuIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
diff --git a/src/styles/admin/roles.css b/src/styles/admin/roles.css
new file mode 100644
index 0000000..58ea91b
--- /dev/null
+++ b/src/styles/admin/roles.css
@@ -0,0 +1,481 @@
+/* ── Roles Admin Page ── */
+
+/* ── Table header layout ── */
+:global(.admin-table-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.create-role-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: filter 0.15s;
+  flex-shrink: 0;
+}
+
+.create-role-btn:hover {
+  filter: brightness(1.1);
+}
+
+/* ── Role-specific styles ── */
+.role-row {
+  cursor: pointer;
+}
+
+.role-row.expanded {
+  background: var(--card-hover-bg);
+}
+
+.role-title-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.role-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.role-title {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.role-moniker {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-inset);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.role-perm-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.role-user-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.role-user-count svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* Expanded detail row */
+.role-detail-row td {
+  padding: 0 !important;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.role-detail-content {
+  padding: 16px 24px 20px;
+  background: var(--bg-inset);
+  animation: roleDetailFadeIn 0.15s ease;
+}
+
+@keyframes roleDetailFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.role-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.role-detail-section {
+  margin-bottom: 0;
+}
+
+.role-detail-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.role-detail-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Permission tags */
+.permission-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.permission-tag {
+  display: inline-block;
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: 5px;
+  background: var(--status-neutral-bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle);
+}
+
+/* User list in role detail */
+.user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.user-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+}
+
+.user-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+  font-size: 10.5px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-login {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Three-dot menu ── */
+.role-menu {
+  position: fixed;
+  z-index: 200;
+  min-width: 130px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  padding: 4px;
+  animation: menuIn 0.1s ease;
+}
+
+.role-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.role-menu-item:hover {
+  background: var(--card-hover-bg);
+}
+
+.role-menu-item svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.role-menu-item-danger {
+  color: #dc2626;
+}
+
+.role-menu-item-danger svg {
+  color: #dc2626;
+}
+
+.role-menu-item-danger:hover {
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.role-menu-sep {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 3px 4px;
+}
+
+/* ── System badge ── */
+.system-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 5px;
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  border: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+
+/* ── Delete confirmation overlay ── */
+.confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.confirm-dialog {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+  width: 90%;
+  max-width: 380px;
+  padding: 28px 24px 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  animation: modalIn 0.15s ease;
+}
+
+.confirm-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #dc2626;
+  margin-bottom: 14px;
+}
+
+.confirm-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.confirm-body {
+  margin: 0 0 16px;
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.confirm-error {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #dc2626;
+}
+
+.confirm-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  justify-content: center;
+}
+
+.confirm-actions form {
+  display: contents;
+}
+
+.btn-cancel {
+  padding: 7px 16px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.btn-cancel:hover:not(:disabled) {
+  background: var(--card-hover-bg);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+.btn-cancel:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-delete-confirm {
+  padding: 7px 16px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: #dc2626;
+  border: 1px solid transparent;
+  color: #fff;
+  transition: filter 0.15s;
+}
+
+.btn-delete-confirm:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.btn-delete-confirm:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ── Shared ── */
+.detail-count {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  padding: 1px 6px;
+  border-radius: 8px;
+  margin-left: 2px;
+}
+
+.row-end-cell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.row-end-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.row-chevron {
+  transition: transform 0.2s ease;
+  color: var(--text-muted);
+}
+
+.row-chevron.open {
+  transform: rotate(180deg);
+}
+
+.menu-wrap {
+  position: relative;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+
+.menu-btn:hover {
+  background: var(--card-hover-bg);
+  border-color: var(--border-subtle);
+  color: var(--text-primary);
+}
+
+@keyframes menuIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
diff --git a/src/styles/admin/users.css b/src/styles/admin/users.css
new file mode 100644
index 0000000..b752f85
--- /dev/null
+++ b/src/styles/admin/users.css
@@ -0,0 +1,575 @@
+/* ── Users Admin Page ── */
+
+/* ── Search bar ── */
+.user-search-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.user-search-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.user-search-input {
+  padding: 7px 12px 7px 30px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+  background: var(--bg-inset);
+  font-size: 13px;
+  color: var(--text-primary);
+  width: 220px;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.user-search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.user-search-input:focus {
+  outline: none;
+  border-color: var(--input-focus-border);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+/* ── User row ── */
+.user-row {
+  cursor: pointer;
+}
+
+.user-row.expanded {
+  background: var(--card-hover-bg);
+}
+
+.user-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-table-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.user-table-avatar-initials {
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.02em;
+}
+
+.user-table-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.user-email {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+}
+
+.user-login-mono {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-inset);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.user-role-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* ── Expanded detail row ── */
+.user-detail-row td {
+  padding: 0 !important;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.user-detail-content {
+  padding: 16px 24px 20px;
+  background: var(--bg-inset);
+  animation: userDetailFadeIn 0.15s ease;
+}
+
+@keyframes userDetailFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.user-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.user-detail-section {
+  margin-bottom: 0;
+}
+
+.user-detail-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.user-detail-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Detail fields */
+.user-detail-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.user-detail-field {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.detail-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  min-width: 60px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.detail-value {
+  font-size: 13px;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.detail-mono {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+}
+
+/* ── Role cards in expanded row ── */
+.user-role-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.user-role-card {
+  padding: 10px 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+}
+
+.user-role-card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.user-role-card-header svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.user-role-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.user-role-moniker {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-inset);
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-left: auto;
+}
+
+/* Permission tags */
+.permission-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.permission-tag {
+  display: inline-block;
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 10.5px;
+  font-weight: 500;
+  padding: 2px 7px;
+  border-radius: 5px;
+  background: var(--status-neutral-bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle);
+}
+
+.permission-tag-more {
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  font-style: italic;
+  font-family: inherit;
+}
+
+/* ── Three-dot menu ── */
+.user-menu {
+  position: fixed;
+  z-index: 200;
+  min-width: 130px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  padding: 4px;
+  animation: menuIn 0.1s ease;
+}
+
+.user-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.user-menu-item:hover {
+  background: var(--card-hover-bg);
+}
+
+.user-menu-item svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.user-menu-item-danger {
+  color: #dc2626;
+}
+
+.user-menu-item-danger svg {
+  color: #dc2626;
+}
+
+.user-menu-item-danger:hover {
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.user-menu-sep {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 3px 4px;
+}
+
+/* ── Edit dialog ── */
+.edit-dialog {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+  width: 90%;
+  max-width: 520px;
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: 28px 24px 22px;
+  animation: modalIn 0.15s ease;
+}
+
+.edit-dialog-title {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.edit-dialog-sub {
+  margin: 0 0 18px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.edit-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 14px;
+}
+
+.edit-field label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.edit-field input {
+  padding: 8px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+  background: var(--bg-inset);
+  font-size: 13px;
+  color: var(--text-primary);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.edit-field input:focus {
+  outline: none;
+  border-color: var(--input-focus-border);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+.btn-save {
+  padding: 7px 16px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--accent-color, #0066cc);
+  border: 1px solid transparent;
+  color: #fff;
+  transition: filter 0.15s;
+}
+
+.btn-save:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.btn-save:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ── Edit modal sections (roles & permissions) ── */
+.edit-section {
+  margin-bottom: 16px;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 14px;
+}
+
+.edit-section-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 10px;
+}
+
+.edit-section-label svg {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.edit-section-count {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: none;
+  letter-spacing: normal;
+  margin-left: auto;
+}
+
+/* ── Role chips ── */
+.edit-role-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 160px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.edit-role-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-primary);
+  text-align: left;
+  transition:
+    background 0.12s,
+    border-color 0.12s;
+}
+
+.edit-role-chip:hover {
+  background: var(--card-hover-bg);
+}
+
+.edit-role-chip.selected {
+  background: rgba(0, 102, 204, 0.08);
+  border-color: var(--accent-color, #0066cc);
+}
+
+.edit-role-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid var(--border-subtle);
+  flex-shrink: 0;
+  color: var(--accent-color, #0066cc);
+  transition: border-color 0.12s;
+}
+
+.edit-role-chip.selected .edit-role-check {
+  border-color: var(--accent-color, #0066cc);
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+}
+
+.edit-role-chip-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.edit-role-chip-moniker {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+/* ── Permission list ── */
+.edit-perm-search-wrap {
+  margin-bottom: 8px;
+}
+
+.edit-perm-search {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg-inset);
+  font-size: 12.5px;
+  color: var(--text-primary);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.edit-perm-search::placeholder {
+  color: var(--text-muted);
+}
+
+.edit-perm-search:focus {
+  outline: none;
+  border-color: var(--input-focus-border);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+.edit-perm-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 180px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.edit-perm-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.edit-perm-item:hover {
+  background: var(--card-hover-bg);
+}
+
+.edit-perm-item input[type="checkbox"] {
+  accent-color: var(--accent-color, #0066cc);
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.edit-perm-node {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--text-primary);
+}
+
+.edit-perm-empty {
+  margin: 0;
+  padding: 8px;
+  font-size: 12.5px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+/* Scrollbars for edit lists */
+.edit-role-list::-webkit-scrollbar,
+.edit-perm-list::-webkit-scrollbar {
+  width: 5px;
+}
+
+.edit-role-list::-webkit-scrollbar-track,
+.edit-perm-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.edit-role-list::-webkit-scrollbar-thumb,
+.edit-perm-list::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 3px;
+}
diff --git a/src/styles/app.css b/src/styles/app.css
index a54263c..acff644 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -26,10 +26,11 @@
   --text-primary: #2c3e50;
   --text-secondary: #666666;
   --text-muted: #8492a6;
-  --text-faint: #9ca3af;
+  --text-faint: #6b7280;
   --text-inverse: #ffffff;
 
-  /* Nav */
+  /* Accent */
+  --accent: #3498db;
   --nav-hover-bg: rgba(0, 0, 0, 0.04);
   --nav-active-bg: rgba(52, 152, 219, 0.08);
   --nav-active-color: #3498db;
@@ -137,6 +138,9 @@
   --text-faint: #525252;
   --text-inverse: #0e0e0e;
 
+  /* Accent */
+  --accent: #333333;
+
   /* Nav */
   --nav-hover-bg: rgba(255, 255, 255, 0.04);
   --nav-active-bg: rgba(255, 255, 255, 0.06);
diff --git a/src/styles/companies/companydetail.css b/src/styles/companies/companydetail.css
index 3103270..201b989 100644
--- a/src/styles/companies/companydetail.css
+++ b/src/styles/companies/companydetail.css
@@ -153,13 +153,124 @@
   font-size: 14px;
 }
 
+/* ═══════════════════════════════════════════════════
+   Overview Tab
+   ═══════════════════════════════════════════════════ */
+
+.overview-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.overview-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.overview-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.overview-details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.overview-detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 14px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+
+.overview-detail-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+}
+
+.overview-detail-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.overview-detail-value.mono {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  font-size: 11px;
+}
+
+.overview-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 14px;
+}
+
+.overview-stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 22px 16px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  text-align: center;
+}
+
+.overview-stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.overview-stat-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.overview-placeholder {
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--bg-base);
+  border: 1px dashed var(--border-default);
+  border-radius: 8px;
+}
+
 /* ── Pane body (reusable for both panes) ── */
 .detail-pane-body {
   position: relative;
   flex: 1;
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 20px 24px;
+  min-height: 0;
+}
+
+.company-detail-left .detail-pane-body {
+  display: flex;
+  flex-direction: column;
 }
 
 /* ═══════════════════════════════════════════════════
@@ -263,7 +374,8 @@
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: var(--text-faint);
+  color: var(--text-muted);
+  stroke: var(--text-muted);
   margin-top: 2px;
 }
 
@@ -277,7 +389,7 @@
 .info-label {
   font-size: 11px;
   font-weight: 500;
-  color: var(--text-faint);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -299,6 +411,98 @@
   line-height: 1.6;
 }
 
+/* Primary contact section */
+.primary-contact-section {
+  margin-top: 8px;
+  padding-top: 4px;
+}
+
+.primary-contact-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px 8px;
+  color: var(--text-muted);
+}
+
+.primary-contact-label {
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.primary-contact-card {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--nav-hover-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.primary-contact-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.primary-contact-inactive {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-color);
+}
+
+.primary-contact-title {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+.primary-contact-detail {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+.primary-contact-detail svg {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  stroke: var(--text-muted);
+}
+
+.primary-contact-link {
+  color: var(--accent);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.primary-contact-link:hover {
+  text-decoration: underline;
+}
+
+/* Side pane bottom identifier */
+.side-pane-identifier {
+  margin-top: auto;
+  padding: 12px 16px;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  color: var(--text-faint);
+  text-align: center;
+  letter-spacing: -0.02em;
+  opacity: 0.6;
+  user-select: all;
+}
+
 /* Empty state */
 .profile-empty {
   display: flex;
@@ -335,6 +539,37 @@
   color: var(--text-faint);
 }
 
+/* ── Tab bar spacer (pushes action button to the right) ── */
+.tab-bar-spacer {
+  flex: 1;
+}
+
+/* ── Create Credential button (sits inside tab bar) ── */
+.create-credential-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  margin: auto 0;
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    filter 0.15s;
+  flex-shrink: 0;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.create-credential-btn:hover {
+  filter: brightness(1.12);
+}
+
 /* ═══════════════════════════════════════════════════
    Tab Content — Configurations
    ═══════════════════════════════════════════════════ */
@@ -368,6 +603,7 @@
 }
 
 .config-item {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -645,6 +881,129 @@
   border-color: var(--input-focus-border);
 }
 
+/* ── Detail header actions group ── */
+.config-detail-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* ── Credential action buttons (edit/delete in detail header) ── */
+.cred-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.cred-action-edit:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+  border-color: var(--input-focus-border);
+}
+
+.cred-action-delete:hover {
+  background: rgba(220, 38, 38, 0.08);
+  color: #dc2626;
+  border-color: rgba(220, 38, 38, 0.3);
+}
+
+/* ── Three-dot menu on credential cards ── */
+.cred-menu-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.12s;
+}
+
+.cred-menu-btn:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+  border-color: var(--border-subtle);
+}
+
+.cred-menu-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.cred-dropdown-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  min-width: 140px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  z-index: 50;
+  padding: 4px;
+  animation: credMenuIn 0.1s ease;
+}
+
+@keyframes credMenuIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cred-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 5px;
+  background: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    color 0.1s;
+}
+
+.cred-dropdown-item:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+}
+
+.cred-dropdown-item-danger:hover {
+  background: rgba(220, 38, 38, 0.08);
+  color: #dc2626;
+}
+
+.cred-dropdown-sep {
+  height: 1px;
+  margin: 3px 6px;
+  background: var(--border-subtle);
+}
+
 .config-detail-json {
   margin: 0;
   padding: 16px;
@@ -817,6 +1176,45 @@
   letter-spacing: 0.04em;
 }
 
+/* Credential field label row with inline indicators */
+.cred-field-label-row {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.cred-required-star {
+  color: #dc2626;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: -1px;
+}
+
+.cred-lock-icon {
+  color: #4a9a6b;
+  flex-shrink: 0;
+  margin-left: 1px;
+  opacity: 0.7;
+}
+
+/* URL and email value links */
+.cred-url-value,
+.cred-email-value {
+  color: var(--accent-color, #0066cc);
+  text-decoration: none;
+  transition: color 0.12s;
+  word-break: break-all;
+}
+
+.cred-url-value:hover,
+.cred-email-value:hover {
+  text-decoration: underline;
+  color: var(--accent-color-hover, #0055aa);
+}
+
 .question-value-wrap {
   display: flex;
   align-items: flex-start;
@@ -856,6 +1254,18 @@
   letter-spacing: 0.05em;
 }
 
+.question-value.mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12.5px;
+  letter-spacing: 0.03em;
+}
+
+.cred-revealed-value.mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12.5px;
+  letter-spacing: 0.03em;
+}
+
 /* Password toggle */
 .password-toggle {
   display: inline-flex;
@@ -923,3 +1333,3141 @@
   font-weight: 600;
   color: var(--text-secondary);
 }
+
+/* Secure value inline loading spinner */
+.cred-secure-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-faint);
+}
+
+.cred-secure-spinner .spin-icon {
+  animation: cred-spin 0.8s linear infinite;
+}
+
+.spin-icon {
+  animation: cred-spin 0.8s linear infinite;
+}
+
+@keyframes cred-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Countdown ring (30s auto-hide indicator) */
+.cred-countdown-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.cred-countdown-ring {
+  transform: rotate(-90deg);
+  color: var(--input-focus-border, #0066cc);
+}
+
+.cred-countdown-arc {
+  animation: cred-countdown 30s linear forwards;
+}
+
+@keyframes cred-countdown {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 50.265;
+  }
+}
+
+/* Delete confirmation dialog */
+.delete-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  animation: deleteOverlayIn 0.15s ease;
+}
+
+@keyframes deleteOverlayIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.delete-dialog {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  padding: 28px 32px 24px;
+  max-width: 400px;
+  width: 90vw;
+  text-align: center;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+  animation: deleteDialogIn 0.2s ease;
+}
+
+@keyframes deleteDialogIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.delete-dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  margin: 0 auto 16px;
+  border-radius: 50%;
+  background: rgba(220, 38, 38, 0.1);
+  color: #dc2626;
+}
+
+.delete-dialog-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 8px;
+}
+
+.delete-dialog-msg {
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  margin: 0 0 20px;
+  line-height: 1.5;
+}
+
+.delete-dialog-msg strong {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.delete-dialog-error {
+  font-size: 13px;
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.08);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 0 0 16px;
+}
+
+.delete-dialog-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+.delete-dialog-btn {
+  padding: 8px 20px;
+  border-radius: 8px;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  border: 1px solid var(--border-subtle);
+}
+
+.delete-dialog-btn.cancel {
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+}
+
+.delete-dialog-btn.cancel:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+}
+
+.delete-dialog-btn.confirm {
+  background: #dc2626;
+  color: white;
+  border-color: #dc2626;
+}
+
+.delete-dialog-btn.confirm:hover {
+  background: #b91c1c;
+  border-color: #b91c1c;
+}
+
+.delete-dialog-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Edit credential mode */
+.cred-edit-name-input {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  background: var(--nav-hover-bg);
+  border: 1.5px solid var(--border-subtle);
+  border-radius: 8px;
+  padding: 6px 10px;
+  width: 100%;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.cred-edit-name-input:focus {
+  border-color: var(--input-focus-border, #0066cc);
+}
+
+.cred-edit-field-input {
+  width: 100%;
+  padding: 7px 10px;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: var(--nav-hover-bg);
+  border: 1.5px solid var(--border-subtle);
+  border-radius: 6px;
+  outline: none;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  transition: border-color 0.15s;
+}
+
+.cred-edit-field-input:focus {
+  border-color: var(--input-focus-border, #0066cc);
+}
+
+.cred-edit-field-input::placeholder {
+  color: var(--text-muted);
+  font-family: inherit;
+  font-style: italic;
+}
+
+.cred-edit-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.08);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  border-radius: 8px;
+}
+
+/* ── Credential notes ── */
+.cred-notes-section {
+  margin-bottom: 20px;
+}
+
+.cred-notes-text {
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cred-notes-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.cred-edit-notes-input {
+  width: 100%;
+  padding: 7px 10px;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: var(--nav-hover-bg);
+  border: 1.5px solid var(--border-subtle);
+  border-radius: 6px;
+  outline: none;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 60px;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+
+.cred-edit-notes-input:focus {
+  border-color: var(--input-focus-border, #0066cc);
+}
+
+.cred-edit-notes-input::placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.cred-action-btn.cred-action-save {
+  color: #16a34a;
+}
+
+.cred-action-btn.cred-action-save:hover {
+  background: rgba(22, 163, 74, 0.1);
+  border-color: rgba(22, 163, 74, 0.3);
+}
+
+.cred-action-btn.cred-action-cancel {
+  color: var(--text-muted);
+}
+
+.cred-action-btn.cred-action-cancel:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+}
+
+.cred-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════
+   Bottom Sheet (iOS-style slide-up panel)
+   ═══════════════════════════════════════════════════ */
+
+/* Desktop: the overlay wrapper is invisible; detail panel renders inline */
+.bottom-sheet-overlay {
+  display: contents;
+}
+
+.bottom-sheet-handle {
+  display: none;
+}
+
+.bottom-sheet-panel {
+  display: contents;
+}
+
+.bottom-sheet-body {
+  display: contents;
+}
+
+/* ═══════════════════════════════════════════════════
+   Contacts Tab
+   ═══════════════════════════════════════════════════ */
+
+.contacts-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.contacts-section + .contacts-section {
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.contacts-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.contacts-section-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.contacts-section-title svg {
+  color: var(--text-muted);
+  stroke: var(--text-muted);
+}
+
+.contacts-section-inactive .contacts-section-title {
+  color: var(--text-secondary);
+}
+
+.contacts-section-count {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background: var(--accent);
+  color: #fff;
+}
+
+.contacts-section-count.inactive {
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-color);
+}
+
+.contact-avatar-inactive {
+  background: var(--text-faint);
+}
+
+.contacts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.contact-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  transition:
+    box-shadow 0.15s,
+    border-color 0.15s;
+}
+
+.contact-card:hover {
+  border-color: var(--input-focus-border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.contact-card.contact-inactive {
+  opacity: 0.55;
+}
+
+.contact-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.contact-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.contact-initials {
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.contact-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.contact-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.contact-inactive-badge {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-color);
+}
+
+.contact-title {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.contact-card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 44px;
+}
+
+.contact-detail-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.contact-detail-row svg {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  stroke: var(--text-secondary);
+  width: 13px;
+  height: 13px;
+  min-width: 13px;
+  min-height: 13px;
+}
+
+.contact-link {
+  color: var(--accent);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.contact-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .bottom-sheet-overlay {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+    z-index: 150;
+    align-items: flex-end;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0);
+    transition: background 0.3s ease;
+    pointer-events: none;
+  }
+
+  .bottom-sheet-overlay.active {
+    background: rgba(0, 0, 0, 0.5);
+    pointer-events: auto;
+  }
+
+  .bottom-sheet-panel {
+    display: flex;
+    width: 100%;
+    height: calc(75vh - 56px - env(safe-area-inset-bottom, 0px));
+    max-height: calc(75vh - 56px - env(safe-area-inset-bottom, 0px));
+    background: var(--bg-surface);
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
+    flex-direction: column;
+    overflow: hidden;
+    transform: translateY(100%);
+    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+    will-change: transform;
+  }
+
+  .bottom-sheet-overlay.active .bottom-sheet-panel {
+    transform: translateY(0);
+  }
+
+  /* Drag handle */
+  .bottom-sheet-handle {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0 6px;
+    flex-shrink: 0;
+    cursor: grab;
+  }
+
+  .bottom-sheet-handle::after {
+    content: "";
+    width: 36px;
+    height: 5px;
+    border-radius: 3px;
+    background: var(--text-faint);
+    opacity: 0.4;
+  }
+
+  .bottom-sheet-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    padding: 0;
+  }
+
+  /* Show the detail panel inside the bottom sheet */
+  .bottom-sheet-body .config-detail-panel {
+    display: flex !important;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .bottom-sheet-body .config-detail-content {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* ═══════════════════════════════════════════════════
+   Mobile — Company Detail Responsive
+   ═══════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  /* Stack the two panes vertically */
+  .company-detail-page {
+    flex-direction: column;
+    gap: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Left pane becomes a compact card at the top */
+  .company-detail-left {
+    flex: 0 0 auto;
+    border-radius: 10px;
+  }
+
+  .company-detail-left .detail-pane-body {
+    padding: 12px 16px;
+  }
+
+  .profile-header {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    margin-top: 8px;
+  }
+
+  .profile-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+  }
+
+  .profile-initials {
+    font-size: 16px;
+  }
+
+  .profile-name {
+    font-size: 16px;
+    text-align: left;
+  }
+
+  .profile-info {
+    gap: 0;
+  }
+
+  .info-row {
+    padding: 6px 4px;
+  }
+
+  /* Right pane fills remaining space */
+  .company-detail-right {
+    flex: 1;
+    min-height: 0;
+    border-radius: 10px;
+  }
+
+  .detail-pane-header {
+    padding: 12px 16px 10px;
+    gap: 8px;
+  }
+
+  .detail-pane-title {
+    font-size: 16px;
+  }
+
+  /* Tab bar: scrollable on mobile */
+  .tab-bar {
+    padding: 0 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .tab-btn {
+    padding: 10px 12px 8px;
+    font-size: 12px;
+  }
+
+  .detail-pane-body {
+    padding: 12px 14px;
+  }
+
+  /* Config split: full-width list, no side-by-side on mobile */
+  .config-split {
+    flex-direction: column;
+  }
+
+  .config-split.expanded {
+    gap: 0;
+  }
+
+  .config-list {
+    flex: none !important;
+    max-width: none !important;
+    width: 100%;
+  }
+
+  .config-list.collapsed {
+    flex: none;
+    max-width: none;
+  }
+
+  /* Hide the inline detail panel on mobile — the bottom sheet is used instead */
+  .config-detail-panel {
+    display: none;
+  }
+
+  /* Collapsed config items still show full info on mobile */
+  .config-list.collapsed .config-item {
+    padding: 14px 16px;
+    gap: 8px;
+  }
+
+  .config-list.collapsed .config-name {
+    font-size: 14px;
+  }
+
+  /* Card items */
+  .config-item {
+    padding: 12px 14px;
+  }
+
+  /* Create credential button: tighter on mobile */
+  .create-credential-btn {
+    padding: 5px 10px;
+    font-size: 11px;
+  }
+
+  /* Bottom sheet detail content overrides */
+  .bottom-sheet-body .config-detail-content {
+    animation: none;
+    padding: 8px 16px 24px;
+  }
+
+  .bottom-sheet-body .config-detail-header {
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+  }
+
+  .bottom-sheet-body .config-detail-title {
+    font-size: 15px;
+  }
+
+  /* Bottom sheet footer spacing */
+  .bottom-sheet-body .config-info-footer {
+    padding-bottom: 8px;
+  }
+
+  /* Credential dropdown menus in collapsed list: full width items on mobile */
+  .cred-dropdown-menu {
+    min-width: 120px;
+  }
+
+  /* Delete overlay adapts for safe areas */
+  .delete-overlay {
+    align-items: flex-end;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+
+  .delete-dialog {
+    border-radius: 14px 14px 0 0;
+    max-width: 100%;
+    width: 100%;
+    padding: 24px 20px 20px;
+    animation: deleteSheetIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  @keyframes deleteSheetIn {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+}
+
+/* Desktop: hide mobile-only elements */
+.mobile-nav-menu,
+.mobile-content-header {
+  display: none;
+}
+
+/* Small phones */
+@media (max-width: 480px) {
+  .company-detail-left .detail-pane-body {
+    padding: 8px 12px;
+  }
+
+  .profile-avatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+  }
+
+  .profile-initials {
+    font-size: 14px;
+  }
+
+  .profile-name {
+    font-size: 14px;
+  }
+
+  .tab-btn {
+    padding: 8px 10px 6px;
+    font-size: 11px;
+  }
+
+  .detail-pane-body {
+    padding: 10px 10px;
+  }
+
+  .config-item {
+    padding: 10px 12px;
+  }
+
+  .bottom-sheet-body .config-detail-content {
+    padding: 6px 12px 20px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════
+   Mobile — Vertical Nav, Collapsible Header, Transitions
+   ═══════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  /* ── Left pane collapse transition ── */
+  .company-detail-left {
+    transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+    overflow: hidden;
+  }
+
+  .company-detail-left.mobile-collapsed .detail-pane-body {
+    padding: 8px 16px;
+  }
+
+  .company-detail-left.mobile-collapsed .profile-header {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border-bottom: none;
+  }
+
+  .company-detail-left.mobile-collapsed .profile-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+  }
+
+  .company-detail-left.mobile-collapsed .profile-initials {
+    font-size: 13px;
+  }
+
+  .company-detail-left.mobile-collapsed .profile-name {
+    font-size: 15px;
+  }
+
+  .company-detail-left.mobile-collapsed .profile-status,
+  .company-detail-left.mobile-collapsed .profile-info,
+  .company-detail-left.mobile-collapsed .back-btn {
+    display: none;
+  }
+
+  /* ── Mobile vertical nav menu ── */
+  .mobile-nav-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 6px;
+    animation: mobileNavIn 0.3s ease-out;
+  }
+
+  @keyframes mobileNavIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .mobile-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+    padding: 14px 16px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    background: var(--card-bg);
+    color: var(--text-primary);
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s;
+    text-align: left;
+  }
+
+  .mobile-nav-item:active {
+    background: var(--nav-hover-bg);
+    transform: scale(0.98);
+  }
+
+  .mobile-nav-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: var(--nav-hover-bg);
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .mobile-nav-label {
+    flex: 1;
+  }
+
+  .mobile-nav-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 6px;
+    border-radius: 11px;
+    background: var(--accent-color, #0066cc);
+    color: white;
+    font-size: 12px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .mobile-nav-chevron {
+    color: var(--text-faint);
+    flex-shrink: 0;
+  }
+
+  /* ── Hide right pane when showing mobile nav ── */
+  .company-detail-right.mobile-hidden {
+    display: none;
+  }
+
+  /* ── Hide desktop tab bar on mobile ── */
+  .company-detail-right .tab-bar {
+    display: none;
+  }
+
+  /* ── Mobile content header (back + title + action) ── */
+  .mobile-content-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+    animation: mobileContentIn 0.3s ease-out;
+  }
+
+  @keyframes mobileContentIn {
+    from {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .mobile-back-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 0.15s;
+  }
+
+  .mobile-back-btn:active {
+    background: var(--nav-hover-bg);
+    color: var(--text-primary);
+  }
+
+  .mobile-content-title {
+    flex: 1;
+    margin: 0;
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .mobile-create-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+    border-radius: 8px;
+  }
+
+  /* ── Right pane grows when tab is active ── */
+  .company-detail-right {
+    transition: flex 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+}
+
+/* Safe area insets for bottom sheet */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  @media (max-width: 768px) {
+    .bottom-sheet-panel {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+}
+
+/* ═══════════════════════════════════════════════════
+   Sub-Credentials — Table Layout
+   ═══════════════════════════════════════════════════ */
+
+.sub-creds-section {
+  margin-top: 16px;
+  padding: 12px 16px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+
+.sub-creds-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.sub-creds-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.sub-creds-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 9px;
+  background: var(--nav-active-bg);
+  color: var(--text-secondary);
+}
+
+.sub-creds-loading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 0;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.sub-creds-empty {
+  margin: 0;
+  padding: 4px 0;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ── Table ── */
+.sub-creds-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 11px;
+}
+
+.sub-creds-table thead th {
+  padding: 4px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+  text-align: left;
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+
+.sub-creds-table thead th {
+  display: table-cell;
+}
+
+.sub-creds-table thead th .cred-lock-icon {
+  display: inline;
+  vertical-align: -1px;
+  margin-left: 2px;
+}
+
+.sub-creds-th-actions {
+  width: 32px;
+}
+
+.sub-creds-table tbody td {
+  padding: 5px 8px;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sub-creds-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.sub-cred-row:hover td {
+  background: var(--bg-hover);
+}
+
+.sub-cred-name-cell {
+  font-weight: 600;
+  white-space: nowrap;
+  width: 20%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.mono {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  font-size: 10px;
+}
+
+.sub-cred-secure-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.sub-cred-eye-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.sub-cred-eye-btn:hover {
+  color: var(--accent-blue);
+  background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
+  border-color: color-mix(in srgb, var(--accent-blue) 20%, transparent);
+}
+
+.sub-cred-spinner {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.sub-cred-revealed {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.sub-cred-masked {
+  color: var(--text-muted);
+  letter-spacing: 1px;
+}
+
+.sub-cred-actions-cell {
+  width: 32px;
+  text-align: center;
+  padding: 2px 4px;
+}
+
+.sub-cred-remove-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sub-cred-remove-btn:hover:not(:disabled) {
+  color: var(--status-error);
+  background: color-mix(in srgb, var(--status-error) 8%, transparent);
+  border-color: color-mix(in srgb, var(--status-error) 20%, transparent);
+}
+
+.sub-cred-remove-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ── Add button (header) ── */
+.sub-cred-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  border: 1px dashed var(--border-default);
+  border-radius: 6px;
+  background: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sub-cred-add-btn:hover {
+  border-color: var(--accent-blue);
+  color: var(--accent-blue);
+  background: color-mix(in srgb, var(--accent-blue) 6%, transparent);
+}
+
+/* ── Inline add row ── */
+.sub-cred-add-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 10px;
+  border: 1px solid var(--accent-blue);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--accent-blue) 4%, var(--bg-surface));
+}
+
+.sub-cred-add-row-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.sub-cred-add-input {
+  flex: 1 1 120px;
+  min-width: 0;
+  padding: 5px 8px;
+  font-size: 11px;
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.sub-cred-add-input:focus {
+  border-color: var(--accent-blue);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 12%, transparent);
+}
+
+.sub-cred-add-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sub-cred-add-row-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.sub-cred-add-error {
+  color: var(--status-error);
+  display: inline-flex;
+  align-items: center;
+}
+
+.sub-cred-btn-cancel {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sub-cred-btn-cancel:hover:not(:disabled) {
+  background: var(--bg-hover);
+}
+
+.sub-cred-btn-cancel:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sub-cred-btn-save {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  border: none;
+  border-radius: 4px;
+  background: var(--accent-blue);
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sub-cred-btn-save:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.sub-cred-btn-save:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════
+   UniFi Tab — Sites Cards
+   ═══════════════════════════════════════════════════ */
+
+.unifi-sites-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 28px;
+  padding: 8px 0;
+}
+
+.unifi-site-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 24px 20px 20px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  cursor: pointer;
+  transition:
+    border-color 0.18s,
+    box-shadow 0.18s;
+}
+
+.unifi-site-card:hover {
+  border-color: var(--input-focus-border);
+  box-shadow: 0 2px 12px
+    color-mix(in srgb, var(--input-focus-border) 10%, transparent);
+}
+
+.unifi-site-card:focus-visible {
+  outline: 2px solid var(--input-focus-border);
+  outline-offset: 2px;
+}
+
+.unifi-site-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.unifi-site-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.unifi-site-card-name {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.unifi-site-card-id {
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  color: var(--text-muted);
+  letter-spacing: -0.02em;
+}
+
+.unifi-site-card-stats {
+  display: flex;
+  gap: 20px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.unifi-card-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.unifi-card-stat-value {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.unifi-card-stat-label {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.unifi-card-stats-loading {
+  display: flex;
+  gap: 16px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.unifi-card-stat-placeholder {
+  width: 40px;
+  height: 12px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.unifi-site-card-arrow {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity 0.18s;
+}
+
+.unifi-site-card:hover .unifi-site-card-arrow {
+  opacity: 0.7;
+  color: var(--input-focus-border);
+}
+
+/* Health status badge (reused from cards) */
+.unifi-site-card-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.unifi-site-card-status .status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.unifi-site-card-status.status-ok {
+  background: color-mix(
+    in srgb,
+    var(--status-success, #22c55e) 12%,
+    transparent
+  );
+  color: var(--status-success, #22c55e);
+}
+.unifi-site-card-status.status-ok .status-dot {
+  background: var(--status-success, #22c55e);
+}
+
+.unifi-site-card-status.status-warn {
+  background: color-mix(
+    in srgb,
+    var(--status-warning, #f59e0b) 12%,
+    transparent
+  );
+  color: var(--status-warning, #f59e0b);
+}
+.unifi-site-card-status.status-warn .status-dot {
+  background: var(--status-warning, #f59e0b);
+}
+
+.unifi-site-card-status.status-error {
+  background: color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent);
+  color: var(--status-error, #ef4444);
+}
+.unifi-site-card-status.status-error .status-dot {
+  background: var(--status-error, #ef4444);
+}
+
+.unifi-site-card-status.status-unknown {
+  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+  color: var(--text-muted);
+}
+.unifi-site-card-status.status-unknown .status-dot {
+  background: var(--text-muted);
+}
+
+.unifi-site-card-status.status-loading {
+  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+  color: var(--text-muted);
+  padding: 5px 10px;
+}
+
+/* ═══════════════════════════════════════════════════
+   UniFi Tab — Management View
+   ═══════════════════════════════════════════════════ */
+
+.unifi-management {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  /* Fill the pane body: viewport minus page header, tab bar, and pane padding */
+  height: calc(100vh - 160px);
+}
+
+.unifi-management-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 0;
+}
+
+.unifi-back-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.unifi-back-btn:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+  border-color: var(--input-focus-border);
+}
+
+.unifi-management-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.unifi-management-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.unifi-management-site-id {
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  color: var(--text-muted);
+}
+
+.unifi-site-menu-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.unifi-site-menu-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.12s;
+}
+
+.unifi-site-menu-btn:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+  border-color: var(--border-subtle);
+}
+
+.unifi-site-dropdown-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  min-width: 150px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  z-index: 50;
+  padding: 4px;
+  animation: credMenuIn 0.1s ease;
+}
+
+.unifi-site-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 5px;
+  background: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    color 0.1s;
+}
+
+.unifi-site-dropdown-item:hover {
+  background: var(--nav-hover-bg);
+  color: var(--text-primary);
+}
+
+.unifi-site-dropdown-item-danger:hover {
+  background: rgba(220, 38, 38, 0.08);
+  color: #dc2626;
+}
+
+.unifi-site-dropdown-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Management sub-tabs */
+.unifi-mgmt-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.unifi-mgmt-tab {
+  position: relative;
+  padding: 10px 16px 8px;
+  border: none;
+  background: none;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.unifi-mgmt-tab::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.unifi-mgmt-tab:hover {
+  color: var(--text-primary);
+}
+
+.unifi-mgmt-tab.active {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.unifi-mgmt-tab.active::after {
+  background: var(--input-focus-border);
+}
+
+.unifi-mgmt-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding-top: 16px;
+}
+
+/* Loading & Empty states */
+.unifi-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 48px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.unifi-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 48px 16px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.unifi-empty-state p {
+  margin: 0;
+}
+
+/* Overview */
+.unifi-overview-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.unifi-overview-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.unifi-section-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.unifi-health-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.unifi-health-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.unifi-health-status {
+  font-size: 10px;
+  line-height: 1;
+}
+
+.unifi-health-status.healthy {
+  color: var(--status-active-color, #22c55e);
+}
+
+.unifi-health-status.unhealthy {
+  color: var(--status-error, #ef4444);
+}
+
+.unifi-health-subsystem {
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+}
+
+.unifi-health-status-text {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.unifi-info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+}
+
+.unifi-info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 14px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+
+.unifi-info-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+}
+
+.unifi-info-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.unifi-info-value.mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+/* Devices */
+.unifi-devices-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+
+.unifi-devices-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.unifi-devices-table thead th {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--bg-base) 50%, transparent);
+  white-space: nowrap;
+}
+
+.unifi-devices-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.15s ease;
+}
+
+.unifi-devices-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.unifi-devices-table tbody tr:hover {
+  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
+}
+
+.unifi-devices-table td {
+  padding: 10px 14px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.unifi-device-status-cell {
+  width: 42px;
+  text-align: center;
+}
+
+.unifi-device-status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.unifi-device-status-dot.online {
+  background: var(--status-active-color, #22c55e);
+  box-shadow: 0 0 4px var(--status-active-color, #22c55e);
+}
+
+.unifi-device-status-dot.offline {
+  background: var(--text-muted);
+}
+
+.unifi-device-name-cell {
+  font-weight: 600;
+}
+
+.unifi-device-model-cell {
+  color: var(--text-secondary, var(--text-primary));
+}
+
+.unifi-device-mono-cell {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  letter-spacing: -0.02em;
+  color: var(--text-secondary, var(--text-primary));
+}
+
+.unifi-device-uptime-cell {
+  color: var(--text-secondary, var(--text-primary));
+}
+
+/* WiFi Split-View */
+.wifi-split-view {
+  display: flex;
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-base);
+  overscroll-behavior: contain;
+}
+
+.wifi-list-panel {
+  flex: 1;
+  border-right: 1px solid var(--border-subtle);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  transition: flex 0.25s ease;
+}
+
+.wifi-split-view.detail-open .wifi-list-panel {
+  flex: 0 0 240px;
+}
+
+.wifi-list-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
+  padding: 1px 7px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* WiFi Table Layout */
+.wifi-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--bg-base), var(--bg-raised) 50%);
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.wifi-table-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.wifi-table-head {
+  display: flex;
+  align-items: center;
+  padding: 6px 14px;
+  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
+  border-bottom: 1px solid var(--border-subtle);
+  position: sticky;
+  top: 39px;
+  z-index: 2;
+}
+
+.wifi-table-head .wifi-col {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.wifi-table-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.wifi-table-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 9px 14px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s;
+}
+
+.wifi-table-row:last-child {
+  border-bottom: none;
+}
+
+.wifi-table-row:hover {
+  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
+}
+
+.wifi-table-row.active {
+  background: color-mix(in srgb, var(--input-focus-border) 10%, transparent);
+  box-shadow: inset 2px 0 0 var(--input-focus-border);
+}
+
+/* Column sizing */
+.wifi-col {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-primary);
+  min-width: 0;
+}
+
+.wifi-col-status {
+  flex: 0 0 28px;
+  justify-content: center;
+}
+
+.wifi-col-name {
+  flex: 1.6;
+  min-width: 0;
+}
+
+.wifi-col-vlan {
+  flex: 1;
+  min-width: 0;
+}
+
+.wifi-col-aps {
+  flex: 1;
+  justify-content: center;
+}
+
+.wifi-col-band {
+  flex: 1;
+  justify-content: center;
+}
+
+.wifi-col-clients {
+  flex: 0.7;
+  justify-content: center;
+}
+
+.wifi-col-security {
+  flex: 1.3;
+}
+
+.wifi-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  opacity: 0.25;
+  flex-shrink: 0;
+}
+
+.wifi-status-dot.enabled {
+  background: #22c55e;
+  opacity: 1;
+}
+
+.wifi-network-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wifi-table-tag {
+  font-size: 9px;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  flex-shrink: 0;
+}
+
+.wifi-table-tag-guest {
+  color: color-mix(in srgb, var(--input-focus-border) 80%, var(--text-primary));
+  background: color-mix(in srgb, var(--input-focus-border) 12%, transparent);
+}
+
+.wifi-band-badge {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Detail Panel */
+.wifi-detail-panel {
+  flex: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    flex 0.25s ease,
+    opacity 0.2s ease;
+}
+
+.wifi-split-view.detail-open .wifi-detail-panel {
+  flex: 1;
+  min-height: 0;
+  opacity: 1;
+  overflow-y: auto;
+}
+
+.wifi-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-surface, var(--bg-base));
+  gap: 12px;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+.wifi-detail-back {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition:
+    color 0.15s,
+    background 0.15s;
+}
+
+.wifi-detail-back:hover {
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+
+.wifi-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wifi-btn {
+  font-size: 12px;
+  padding: 5px 14px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition:
+    background 0.15s,
+    opacity 0.15s;
+}
+
+.wifi-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.wifi-btn-ghost {
+  background: none;
+  color: var(--text-muted);
+  border: 1px solid var(--border-subtle);
+}
+
+.wifi-btn-ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+  color: var(--text-primary);
+}
+
+.wifi-btn-primary {
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+}
+
+.wifi-btn-primary:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.wifi-save-error {
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--status-error, #ef4444);
+  background: color-mix(in srgb, var(--status-error, #ef4444) 8%, transparent);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+/* Detail Form */
+.wifi-detail-form {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Group card */
+.wifi-group-card {
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--bg-surface);
+}
+
+.wifi-group-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--bg-base) 50%, var(--bg-surface));
+}
+
+.wifi-group-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--accent-color, #0066cc) 10%, transparent);
+  color: var(--accent-color, #0066cc);
+  flex-shrink: 0;
+}
+
+.wifi-group-title-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.wifi-group-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.wifi-group-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.3;
+}
+
+.wifi-group-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 4px 0;
+}
+
+/* Unified field rows inside group cards */
+.wifi-group-fields .wifi-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 14px;
+  transition: background 0.1s;
+}
+
+.wifi-group-fields .wifi-field:hover {
+  background: color-mix(in srgb, var(--text-primary) 2%, transparent);
+}
+
+.wifi-group-fields .wifi-field-inline {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.wifi-field-label-row {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.wifi-field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.wifi-field-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.3;
+}
+
+.wifi-field-input {
+  padding: 6px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-size: 13px;
+  transition: border-color 0.15s;
+}
+
+.wifi-field-input:focus {
+  outline: none;
+  border-color: var(--input-focus-border);
+}
+
+.wifi-field-input.mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+.wifi-field-select {
+  padding: 6px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.wifi-field-select:focus {
+  outline: none;
+  border-color: var(--input-focus-border);
+}
+
+.wifi-field-value {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.wifi-field-value.mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+.wifi-field-value.wifi-bool {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.wifi-field-value.wifi-bool.yes {
+  color: var(--status-success);
+}
+
+/* Toggle switch */
+.wifi-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.wifi-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.wifi-toggle-slider {
+  width: 34px;
+  height: 18px;
+  background: var(--text-muted);
+  opacity: 0.35;
+  border-radius: 9px;
+  position: relative;
+  transition:
+    background 0.2s,
+    opacity 0.2s;
+}
+
+.wifi-toggle-slider::after {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.wifi-toggle input:checked + .wifi-toggle-slider {
+  background: var(--accent-color, #0066cc);
+  opacity: 1;
+}
+
+.wifi-toggle input:checked + .wifi-toggle-slider::after {
+  transform: translateX(16px);
+}
+
+/* Passphrase */
+.wifi-passphrase-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wifi-passphrase-wrap .wifi-field-input {
+  flex: 1;
+}
+
+.wifi-reveal-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--text-muted);
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+
+.wifi-reveal-btn:hover {
+  color: var(--text-primary);
+}
+
+/* Manual / Auto mode toggle */
+.wifi-mode-toggle-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 0 4px;
+}
+
+.wifi-mode-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.wifi-mode-toggle {
+  display: inline-flex;
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+.wifi-mode-toggle button {
+  padding: 5px 18px;
+  border: none;
+  background: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.wifi-mode-toggle button + button {
+  border-left: 1px solid var(--border-default);
+}
+
+.wifi-mode-toggle button.active {
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+}
+
+.wifi-mode-toggle button:not(.active):hover {
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+
+.wifi-mode-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+/* Placeholder */
+.wifi-detail-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 280px;
+  gap: 12px;
+  color: var(--text-muted);
+  padding: 40px;
+}
+
+.wifi-detail-placeholder svg {
+  opacity: 0.3;
+}
+
+.wifi-detail-placeholder p {
+  font-size: 13px;
+  margin: 0;
+}
+
+/* ═══════════════════════════════════ */
+/* Bubble Select (horizontal pill)    */
+/* ═══════════════════════════════════ */
+.wifi-bubble-select {
+  display: inline-flex;
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+.wifi-bubble {
+  padding: 5px 16px;
+  border: none;
+  background: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.wifi-bubble + .wifi-bubble {
+  border-left: 1px solid var(--border-default);
+}
+
+.wifi-bubble.active {
+  background: var(--accent-color, #0066cc);
+  color: #fff;
+}
+
+.wifi-bubble:not(.active):hover {
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+
+/* ═══════════════════════════════════ */
+/* Broadcast Group Checklist          */
+/* ═══════════════════════════════════ */
+.wifi-group-checklist {
+  margin-top: 8px;
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  overflow: hidden;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.wifi-group-checklist-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.wifi-group-checklist-empty {
+  padding: 12px 14px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.wifi-group-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.wifi-group-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.wifi-group-th-check,
+.wifi-group-th-name {
+  padding: 6px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.wifi-group-th-check {
+  width: 36px;
+  padding-right: 0;
+}
+
+.wifi-group-row {
+  transition: background 0.1s;
+}
+
+.wifi-group-row:not(:last-child) td {
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--border-default) 50%, transparent);
+}
+
+.wifi-group-row:hover {
+  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
+}
+
+.wifi-group-row.checked {
+  background: color-mix(in srgb, var(--accent-color, #0066cc) 6%, transparent);
+}
+
+.wifi-group-row-disabled {
+  opacity: 0.4;
+}
+
+.wifi-group-row-disabled .wifi-group-td-check input {
+  cursor: not-allowed;
+}
+
+.wifi-group-td-check,
+.wifi-group-td-name {
+  padding: 8px 12px;
+  vertical-align: middle;
+}
+
+.wifi-group-td-check {
+  width: 36px;
+  padding-right: 0;
+}
+
+.wifi-group-td-check input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--accent-color, #0066cc);
+  cursor: pointer;
+}
+
+.wifi-group-td-check input[type="checkbox"]:disabled {
+  cursor: default;
+}
+
+.wifi-group-td-name {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.wifi-group-td-name span {
+  display: block;
+}
+
+.wifi-group-ap-mac {
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  margin-top: 1px;
+}
+
+.wifi-group-th-meta {
+  padding: 6px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.wifi-group-td-meta {
+  padding: 8px 12px;
+  vertical-align: middle;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.wifi-group-td-meta.mono {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  font-size: 11px;
+}
+
+/* ═══════════════════════════════════ */
+/* Radio Band Checkboxes              */
+/* ═══════════════════════════════════ */
+.wifi-radio-band-checks {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.wifi-radio-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.wifi-radio-check input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--accent-color, #0066cc);
+  cursor: pointer;
+}
+
+.wifi-radio-check.wifi-radio-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.wifi-radio-check.wifi-radio-disabled input {
+  cursor: not-allowed;
+}
+
+.wifi-todo-badge {
+  font-size: 9px;
+  font-weight: 700;
+  color: #f59e0b;
+  background: color-mix(in srgb, #f59e0b 12%, transparent);
+  padding: 1px 5px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════ */
+/* PPSK Section                       */
+/* ═══════════════════════════════════ */
+.wifi-ppsk-section {
+  padding: 0 14px 10px;
+}
+
+.wifi-ppsk-loading,
+.wifi-ppsk-empty {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 8px 0;
+}
+
+.wifi-ppsk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.wifi-ppsk-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+}
+
+.wifi-ppsk-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.wifi-ppsk-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wifi-ppsk-vlan,
+.wifi-ppsk-mac {
+  font-size: 10px;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+  padding: 1px 5px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.wifi-ppsk-add {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.wifi-ppsk-add .wifi-field-input {
+  flex: 1;
+  min-width: 120px;
+}
+
+/* ═══════════════════════════════════ */
+/* Sub-sections (for MAC, RADIUS etc) */
+/* ═══════════════════════════════════ */
+.wifi-sub-section {
+  padding: 0 14px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wifi-sub-section .wifi-field {
+  padding: 6px 0;
+}
+
+/* ═══════════════════════════════════ */
+/* MAC Address List                   */
+/* ═══════════════════════════════════ */
+.wifi-mac-add {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.wifi-mac-add .wifi-field-input {
+  flex: 1;
+}
+
+.wifi-mac-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.wifi-mac-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.wifi-mac-remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 2px;
+  transition: color 0.15s;
+}
+
+.wifi-mac-remove:hover {
+  color: var(--status-error, #ef4444);
+}
+
+/* ═══════════════════════════════════ */
+/* Speed Limit Row                    */
+/* ═══════════════════════════════════ */
+.wifi-speed-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.wifi-speed-row .wifi-field-select {
+  flex: 1;
+}
+
+/* ═══════════════════════════════════ */
+/* Inline Number + Unit               */
+/* ═══════════════════════════════════ */
+.wifi-inline-number {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wifi-inline-number .wifi-field-input {
+  width: 100px;
+}
+
+.wifi-inline-unit {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* ═══════════════════════════════════ */
+/* DTIM Inline Fields                 */
+/* ═══════════════════════════════════ */
+.wifi-dtim-inline {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.wifi-dtim-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+  min-width: 0;
+}
+
+.wifi-dtim-field span {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.wifi-dtim-field .wifi-field-input {
+  width: 100%;
+}
+
+/* ═══════════════════════════════════ */
+/* Group Key Interval row             */
+/* ═══════════════════════════════════ */
+.wifi-gki-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════ */
+/* Disabled Field                     */
+/* ═══════════════════════════════════ */
+.wifi-field-disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+/* Greyed-out section (auto mode) */
+.wifi-section-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+  filter: grayscale(30%);
+}
+
+.wifi-info-bubble {
+  cursor: help;
+  font-size: 12px;
+}
+
+/* ═══════════════════════════════════ */
+/* Modal Overlay                      */
+/* ═══════════════════════════════════ */
+.wifi-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.wifi-modal {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  padding: 20px;
+  width: 380px;
+  max-width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.wifi-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.wifi-modal-body {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0 0 16px;
+}
+
+.wifi-modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.wifi-modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.wifi-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ═══════════════════════════════════ */
+/* Split-view scroll & sticky sidebar */
+/* ═══════════════════════════════════ */
+
+/* Hide extra columns when detail panel is open */
+.wifi-split-view.detail-open .wifi-col-vlan,
+.wifi-split-view.detail-open .wifi-col-aps,
+.wifi-split-view.detail-open .wifi-col-band,
+.wifi-split-view.detail-open .wifi-col-clients,
+.wifi-split-view.detail-open .wifi-col-security,
+.wifi-split-view.detail-open .wifi-table-head {
+  display: none;
+}
+
+.wifi-split-view.detail-open .wifi-table-tag {
+  display: none;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .wifi-split-view.detail-open .wifi-list-panel {
+    display: none;
+  }
+  .wifi-split-view.detail-open .wifi-detail-panel {
+    flex: 1;
+    border-left: none;
+  }
+  .wifi-split-view .wifi-list-panel {
+    flex: 1;
+    border-right: none;
+  }
+  .wifi-detail-grid {
+    grid-template-columns: 1fr;
+  }
+  .wifi-col-aps,
+  .wifi-col-clients {
+    display: none;
+  }
+}
+
+/* Networks */
+.unifi-networks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.unifi-network-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+
+.unifi-network-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.unifi-network-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.unifi-network-badges {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.unifi-network-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}

User	Email	Login	Roles	Created
+ + {#if user.image} + + {:else} + + {initials(user.name)} + + {/if} + {user.name} + +	+ {user.email} +	+ {user.login} +	+ + {user.roleDetails.length} role{user.roleDetails.length === 1 + ? "" + : "s"} + +	{formatDate(user.createdAt)}	+ + {#if canEdit \|\| canDelete} + + + {#if openMenuId === user.id} + + {#if canEdit} + + {/if} + {#if canEdit && canDelete} + + {/if} + {#if canDelete} + + {/if} + + {/if} + + {/if} + + +
+ + + + + + + Details + + + + ID + {user.id} + + + Email + {user.email} + + + Login + {user.login} + + + Created + {formatDate(user.createdAt)} + + + Updated + {formatDate(user.updatedAt)} + + + + + + + + + Roles + {user.roleDetails.length} + + {#if user.roleDetails.length === 0} + No roles assigned + {:else} + + {#each user.roleDetails as role (role.id)} + + + + {role.title} + {role.moniker} + + {#if role.permissions.length > 0} + + {#each role.permissions.slice(0, 8) as perm} + {perm} + {/each} + {#if role.permissions.length > 8} + +{role.permissions.length - 8} more + {/if} + + {/if} + + {/each} + + {/if} + + + + + + + Additional Permissions + {#if user.permissions?.length} + {user.permissions.length} + {/if} + + {#if !user.permissions?.length} + + No additional permissions assigned + + {:else} + + {#each user.permissions as perm} + {perm} + {/each} + + {/if} + + + +