<script setup lang="ts">
// Security & audit. Audit log: real (filterable, paginated, CSV export).
// Security tab: MFA-enrollment overview is a live read; the policy (MFA mode,
// session timeouts, allowed countries, IP allow-list) is saved as real intent —
// enforcement via Authentik is wired in a later stage, so each control is
// labelled with its enforcement status. SSO apps are still coming soon.

import type { AuditEventDoc, MfaStatus, SsoApp, SsoAppCreated } from '~/types/workspace'

const tab = ref<'security' | 'audit'>('security')

const toast = useToast()
const addCountryOpen = ref(false)
const newAllowCountry = ref('')

// ── Audit log (real) ─────────────────────────────────────────────────────
const { fetchMe } = useMe()
await fetchMe()
const { tenant } = useTenant()
const slug = computed(() => tenant.value?.slug ?? '')

const search = ref('')
const actionFilter = ref('') // action prefix, e.g. 'billing'
const outcomeFilter = ref<'' | 'success' | 'failure'>('')
const sinceFilter = ref<'' | '1d' | '7d' | '30d'>('')

const QUICK_ACTIONS = [
  { label: 'All', value: '' },
  { label: 'Users', value: 'user' },
  { label: 'Billing', value: 'billing' },
  { label: 'Branding', value: 'tenant.branding' },
  { label: 'Auth', value: 'authentik' },
  { label: 'Tenant', value: 'tenant' },
]

function sinceIso(v: string): string | undefined {
  if (!v) return undefined
  const days = v === '1d' ? 1 : v === '7d' ? 7 : 30
  return new Date(Date.now() - days * 86_400_000).toISOString()
}

const params = computed<Record<string, string>>(() => {
  const p: Record<string, string> = { limit: '200' }
  if (search.value.trim()) p.q = search.value.trim()
  if (actionFilter.value) p.action = actionFilter.value
  if (outcomeFilter.value) p.outcome = outcomeFilter.value
  const since = sinceIso(sinceFilter.value)
  if (since) p.since = since
  return p
})

const { data: auditPage } = await useFetch<AuditEventDoc[]>(
  () => `/api/tenants/${slug.value}/audit`,
  { key: 'admin-audit', default: () => [], query: params, immediate: !!slug.value, watch: [slug] },
)

const olderPages = ref<AuditEventDoc[]>([])
const reachedEnd = ref(false)
const loadingMore = ref(false)
const auditRows = computed(() => [...(auditPage.value ?? []), ...olderPages.value])

// New filter set → drop accumulated older pages.
watch(params, () => {
  olderPages.value = []
  reachedEnd.value = false
})

async function loadMore() {
  const last = auditRows.value[auditRows.value.length - 1]
  if (!last || loadingMore.value) return
  loadingMore.value = true
  try {
    const next = await $fetch<AuditEventDoc[]>(`/api/tenants/${slug.value}/audit`, {
      query: { ...params.value, before: last.at },
    })
    if (!next.length) reachedEnd.value = true
    else olderPages.value.push(...next)
  } finally {
    loadingMore.value = false
  }
}

function fmtTime(iso: string): string {
  return new Date(iso).toLocaleString('da-DK', { dateStyle: 'short', timeStyle: 'medium' })
}
function actorName(e: AuditEventDoc): string {
  return e.actorType === 'system' ? 'system' : e.actorEmail ?? '—'
}
function targetOf(e: AuditEventDoc): string {
  return e.resourceName ?? e.resourceId ?? ''
}
function auditTone(e: AuditEventDoc): 'info' | 'warn' | 'bad' {
  if (e.outcome === 'failure') return 'bad'
  if (/suspend|delete|terminat|revok|disable/.test(e.action)) return 'warn'
  return 'info'
}

function exportCsv() {
  const rows = auditRows.value
  if (!rows.length) {
    toast.info('Nothing to export', 'No events match the current filters')
    return
  }
  const esc = (s: string) => `"${String(s ?? '').replace(/"/g, '""')}"`
  const header = ['Time', 'Actor', 'Action', 'Target', 'Outcome', 'IP']
  const lines = rows.map((e) =>
    [fmtTime(e.at), actorName(e), e.action, targetOf(e), e.outcome, e.actorIp ?? ''].map(esc).join(','),
  )
  const csv = [header.map(esc).join(','), ...lines].join('\n')
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `audit-${slug.value}-${new Date().toISOString().slice(0, 10)}.csv`
  a.click()
  URL.revokeObjectURL(url)
  toast.ok(`Exported ${rows.length} events`, 'CSV · current view')
}

// ── Security policy (real, stored intent) ────────────────────────────────
const { request } = useApiFetch()

// Live MFA-enrollment overview.
const { data: mfaStatus } = await useFetch<MfaStatus>(
  () => `/api/tenants/${slug.value}/mfa-status`,
  { key: 'admin-mfa', default: () => ({ total: 0, enrolled: 0, members: [] }), immediate: !!slug.value, watch: [slug] },
)
const notEnrolled = computed(() => (mfaStatus.value?.members ?? []).filter((m) => !m.enrolled))
const mfaPct = computed(() => {
  const t = mfaStatus.value?.total ?? 0
  return t ? Math.round(((mfaStatus.value?.enrolled ?? 0) / t) * 100) : 0
})

const mfaOptions = [
  { v: 'all' as const,      label: 'Required for everyone',    d: 'All members must enroll TOTP or WebAuthn at next sign-in.' },
  { v: 'admins' as const,   label: 'Required for admins only', d: 'Members may opt in. Admins are forced to enroll.' },
  { v: 'optional' as const, label: 'Optional',                 d: 'No enforcement. Not recommended for compliance work.' },
]

// Editable policy, seeded from the tenant doc; persisted via PATCH.
const policy = reactive({
  mfaMode: 'optional' as 'all' | 'admins' | 'optional',
  sessionIdleMinutes: 30,
  sessionAbsoluteHours: 24,
  allowedCountries: [] as string[],
  ipAllowlist: [] as string[],
})
function seedPolicy() {
  const p = tenant.value?.securityPolicy
  policy.mfaMode = p?.mfaMode ?? 'optional'
  policy.sessionIdleMinutes = p?.sessionIdleMinutes ?? 30
  policy.sessionAbsoluteHours = p?.sessionAbsoluteHours ?? 24
  policy.allowedCountries = [...(p?.allowedCountries ?? [])]
  policy.ipAllowlist = [...(p?.ipAllowlist ?? [])]
}
seedPolicy()
watch(tenant, seedPolicy)

const savingPolicy = ref(false)
async function savePolicy() {
  if (!slug.value) return
  savingPolicy.value = true
  try {
    await request(`/api/tenants/${slug.value}/security-policy`, { method: 'PATCH', body: { ...policy } })
    await fetchMe(true)
    toast.ok('Security policy saved')
  } catch (e: unknown) {
    const msg = (e as { data?: { message?: string | string[] } })?.data?.message
    toast.bad('Could not save policy', Array.isArray(msg) ? msg.join(', ') : msg)
  } finally {
    savingPolicy.value = false
  }
}

function removeCountry(c: string) {
  policy.allowedCountries = policy.allowedCountries.filter((x) => x !== c)
}
function addCountry() {
  const c = newAllowCountry.value.trim().toUpperCase()
  if (c && !policy.allowedCountries.includes(c)) policy.allowedCountries.push(c)
  addCountryOpen.value = false
  newAllowCountry.value = ''
}

const newIp = ref('')
function addIp() {
  const ip = newIp.value.trim()
  if (ip && !policy.ipAllowlist.includes(ip)) policy.ipAllowlist.push(ip)
  newIp.value = ''
}
function removeIp(ip: string) {
  policy.ipAllowlist = policy.ipAllowlist.filter((x) => x !== ip)
}

// ── SSO apps (Dezky as IdP) — real Authentik OIDC providers/applications ──
const { data: ssoApps, refresh: refreshSso } = await useFetch<SsoApp[]>(
  () => `/api/tenants/${slug.value}/sso-apps`,
  { key: 'admin-sso', default: () => [], immediate: !!slug.value, watch: [slug] },
)

const ssoOpen = ref(false)
const ssoName = ref('')
const ssoRedirects = ref('')
const creatingSso = ref(false)
const ssoCreated = ref<SsoAppCreated | null>(null)

function openSso() {
  ssoName.value = ''
  ssoRedirects.value = ''
  ssoCreated.value = null
  ssoOpen.value = true
}
async function createSso() {
  const redirectUris = ssoRedirects.value.split('\n').map((s) => s.trim()).filter(Boolean)
  if (!ssoName.value.trim() || redirectUris.length === 0) return
  creatingSso.value = true
  try {
    ssoCreated.value = await request<SsoAppCreated>(`/api/tenants/${slug.value}/sso-apps`, {
      method: 'POST',
      body: { name: ssoName.value.trim(), redirectUris },
    })
    await refreshSso()
    toast.ok('SSO app created')
  } catch (e: unknown) {
    const msg = (e as { data?: { message?: string | string[] } })?.data?.message
    toast.bad('Could not create SSO app', Array.isArray(msg) ? msg.join(', ') : msg)
  } finally {
    creatingSso.value = false
  }
}

const ssoDeleteId = ref<string | null>(null)
const ssoDeleteName = computed(() => (ssoApps.value ?? []).find((a) => a.id === ssoDeleteId.value)?.name ?? '')
async function confirmDeleteSso() {
  const id = ssoDeleteId.value
  if (!id) return
  try {
    await request(`/api/tenants/${slug.value}/sso-apps/${id}`, { method: 'DELETE' })
    await refreshSso()
    toast.ok('SSO app removed')
  } catch (e: unknown) {
    const msg = (e as { data?: { message?: string } })?.data?.message
    toast.bad('Could not remove SSO app', msg)
  } finally {
    ssoDeleteId.value = null
  }
}

function copyText(text?: string) {
  if (!text) return
  navigator.clipboard?.writeText(text)
  toast.ok('Copied to clipboard')
}
</script>

<template>
  <div>
    <PageHeader
      eyebrow="Compliance"
      title="Security & audit"
      subtitle="Identity controls, network policy, and a full log of every administrative action."
    >
      <template #actions>
        <UiButton v-if="tab === 'security'" variant="primary" :disabled="savingPolicy || !slug" @click="savePolicy">
          <template #leading><UiIcon name="check" :size="14" /></template>
          {{ savingPolicy ? 'Saving…' : 'Save policy' }}
        </UiButton>
      </template>
    </PageHeader>

    <div class="tab-wrap">
      <Tabs
        v-model="tab"
        :items="[
          { value: 'security', label: 'Security' },
          { value: 'audit',    label: 'Audit log', count: 4218 },
        ]"
      />
    </div>

    <div v-if="tab === 'security'" class="content security">
      <Card>
        <div class="card-head">
          <Eyebrow>Identity</Eyebrow>
          <div class="card-title">Multi-factor authentication</div>
        </div>

        <!-- Live enrollment overview -->
        <div class="mfa-overview">
          <div class="mfa-stat">
            <div class="mfa-num">{{ mfaStatus.enrolled }} / {{ mfaStatus.total }}</div>
            <Mono dim>members enrolled</Mono>
          </div>
          <div class="mfa-bar-wrap">
            <div class="mfa-bar"><span :style="{ width: `${mfaPct}%` }" /></div>
            <Mono dim>{{ mfaPct }}% of active members have TOTP or WebAuthn</Mono>
          </div>
        </div>
        <div v-if="notEnrolled.length" class="mfa-missing">
          <Mono dim>Not enrolled:</Mono>
          <span class="missing-names">{{ notEnrolled.map((m) => m.name || m.email).join(', ') }}</span>
        </div>

        <div class="sub-head">
          <Eyebrow>Enforcement policy</Eyebrow>
          <Badge tone="warn" dot>rolling out</Badge>
        </div>
        <div class="radio-big">
          <label v-for="o in mfaOptions" :key="o.v" :class="{ active: policy.mfaMode === o.v }">
            <span class="radio-dot"><span v-if="policy.mfaMode === o.v" /></span>
            <input type="radio" :value="o.v" v-model="policy.mfaMode" />
            <div>
              <div class="radio-label">{{ o.label }}</div>
              <div class="radio-d">{{ o.d }}</div>
            </div>
          </label>
        </div>
        <div class="enforce-note">
          <UiIcon name="shield" :size="13" stroke="var(--text-mute)" />
          <span>Saved now; automatic enforcement through your identity provider is being rolled out.</span>
        </div>
      </Card>

      <Card>
        <div class="card-head card-head-inline">
          <div>
            <Eyebrow>Sessions</Eyebrow>
            <div class="card-title">Session policy</div>
          </div>
          <Badge tone="neutral" dot>not enforced yet</Badge>
        </div>
        <div class="grid-2">
          <label class="field"><Eyebrow>Idle timeout (minutes)</Eyebrow>
            <input class="input" type="number" min="0" max="1440" v-model.number="policy.sessionIdleMinutes" />
          </label>
          <label class="field"><Eyebrow>Absolute timeout (hours)</Eyebrow>
            <input class="input" type="number" min="0" max="8760" v-model.number="policy.sessionAbsoluteHours" />
          </label>
        </div>
      </Card>

      <Card>
        <div class="card-head card-head-inline">
          <div>
            <Eyebrow>Network</Eyebrow>
            <div class="card-title">Geo-fencing & allow-lists</div>
          </div>
          <Badge tone="neutral" dot>not enforced yet</Badge>
        </div>
        <div class="field">
          <Eyebrow>Allowed countries</Eyebrow>
          <div class="chip-row">
            <Badge v-for="c in policy.allowedCountries" :key="c" tone="neutral">
              {{ c }}
              <button class="badge-x" @click="removeCountry(c)" aria-label="Remove country">
                <UiIcon name="x" :size="10" />
              </button>
            </Badge>
            <Mono v-if="policy.allowedCountries.length === 0" dim>Any country allowed</Mono>
            <UiButton size="sm" variant="ghost" @click="addCountryOpen = true">
              <template #leading><UiIcon name="plus" :size="12" /></template>
              Add country
            </UiButton>
          </div>
        </div>
        <div class="field" style="margin-top: 16px">
          <Eyebrow>IP allow-list (CIDR)</Eyebrow>
          <div class="chip-row">
            <Badge v-for="ip in policy.ipAllowlist" :key="ip" tone="neutral">
              <Mono>{{ ip }}</Mono>
              <button class="badge-x" @click="removeIp(ip)" aria-label="Remove IP range">
                <UiIcon name="x" :size="10" />
              </button>
            </Badge>
            <Mono v-if="policy.ipAllowlist.length === 0" dim>No IP restriction</Mono>
          </div>
          <div class="ip-add">
            <input class="input" v-model="newIp" placeholder="e.g. 203.0.113.0/24" @keyup.enter="addIp" />
            <UiButton size="sm" variant="secondary" :disabled="!newIp.trim()" @click="addIp">Add</UiButton>
          </div>
        </div>
      </Card>

      <Card>
        <div class="card-head card-head-inline">
          <div>
            <Eyebrow>SSO</Eyebrow>
            <div class="card-title">dezky as identity provider</div>
            <div class="card-sub">Let external apps sign your team in with dezky via OpenID Connect.</div>
          </div>
          <UiButton size="sm" variant="primary" @click="openSso">
            <template #leading><UiIcon name="plus" :size="13" /></template>
            Add app
          </UiButton>
        </div>
        <div class="sso-list">
          <div v-for="a in ssoApps" :key="a.id" class="sso-row">
            <div class="sso-icon">{{ a.name[0]?.toUpperCase() }}</div>
            <div class="sso-meta">
              <div class="sso-name">{{ a.name }}</div>
              <Mono dim>{{ a.protocol.toUpperCase() }} · {{ a.clientId }}</Mono>
            </div>
            <Badge tone="ok" dot>connected</Badge>
            <button class="icon-del" title="Remove" @click="ssoDeleteId = a.id"><UiIcon name="trash" :size="14" /></button>
          </div>
          <div v-if="(ssoApps?.length ?? 0) === 0" class="sso-empty">
            <Mono dim>No SSO apps yet. Add one to let an external app authenticate with dezky.</Mono>
          </div>
        </div>
      </Card>
    </div>

    <div v-else class="content audit">
      <div class="toolbar">
        <div class="input-search">
          <UiIcon name="search" :size="14" stroke="var(--text-mute)" />
          <input v-model="search" placeholder="action, actor, target…" />
        </div>
        <select v-model="outcomeFilter" class="select">
          <option value="">Any outcome</option>
          <option value="success">Success</option>
          <option value="failure">Failure</option>
        </select>
        <select v-model="sinceFilter" class="select">
          <option value="">All time</option>
          <option value="1d">Last 24h</option>
          <option value="7d">Last 7 days</option>
          <option value="30d">Last 30 days</option>
        </select>
        <div class="spacer" />
        <UiButton variant="secondary" @click="exportCsv">
          <template #leading><UiIcon name="download" :size="14" /></template>
          Export CSV
        </UiButton>
      </div>

      <div class="action-chips">
        <button
          v-for="qa in QUICK_ACTIONS"
          :key="qa.value"
          class="achip"
          :class="{ on: actionFilter === qa.value }"
          @click="actionFilter = qa.value"
        >{{ qa.label }}</button>
      </div>

      <Card :pad="0">
        <table class="audit-table">
          <thead>
            <tr>
              <th>Time</th>
              <th>Actor</th>
              <th>Action</th>
              <th>Target</th>
              <th>IP</th>
              <th class="right" />
            </tr>
          </thead>
          <tbody>
            <tr v-for="a in auditRows" :key="a._id">
              <td><Mono>{{ fmtTime(a.at) }}</Mono></td>
              <td>
                <div class="actor-cell">
                  <Avatar v-if="a.actorType !== 'system'" :name="actorName(a)" :size="22" />
                  <div v-else class="sys">sys</div>
                  <span>{{ actorName(a) }}</span>
                </div>
              </td>
              <td><Mono>{{ a.action }}</Mono></td>
              <td class="target">{{ targetOf(a) }}</td>
              <td><Mono dim>{{ a.actorIp || '—' }}</Mono></td>
              <td class="right"><Badge :tone="auditTone(a)" dot>{{ a.outcome }}</Badge></td>
            </tr>
            <tr v-if="auditRows.length === 0" class="no-hover">
              <td colspan="6" class="empty-row"><Mono dim>No audit events match your filters.</Mono></td>
            </tr>
          </tbody>
        </table>
      </Card>

      <div class="audit-foot">
        <Mono dim>{{ auditRows.length }} event{{ auditRows.length === 1 ? '' : 's' }} shown</Mono>
        <UiButton v-if="!reachedEnd && auditRows.length > 0" size="sm" variant="secondary" :disabled="loadingMore" @click="loadMore">
          {{ loadingMore ? 'Loading…' : 'Load older' }}
        </UiButton>
        <Mono v-else-if="auditRows.length > 0" dim>· end of log</Mono>
      </div>
    </div>

    <!-- Add country modal -->
    <Modal :open="addCountryOpen" eyebrow="Security · geo-fencing" title="Add country to allow-list" size="sm" @close="addCountryOpen = false">
      <div class="form-stack">
        <label class="field"><Eyebrow>Country</Eyebrow>
          <CountrySelect v-model="newAllowCountry" placeholder="Search countries" />
        </label>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="addCountryOpen = false">Cancel</UiButton>
        <UiButton variant="primary" :disabled="!newAllowCountry" @click="addCountry">
          Add
        </UiButton>
      </template>
    </Modal>

    <!-- Add SSO app modal -->
    <Modal :open="ssoOpen" eyebrow="Security · SSO" :title="ssoCreated ? 'SSO app created' : 'Add SSO app'" size="md" @close="ssoOpen = false">
      <!-- Step 1: form -->
      <div v-if="!ssoCreated" class="form-stack">
        <label class="field"><Eyebrow>App name</Eyebrow>
          <input class="input" v-model="ssoName" placeholder="e.g. Internal Wiki" />
        </label>
        <label class="field"><Eyebrow>Redirect URIs (one per line)</Eyebrow>
          <textarea v-model="ssoRedirects" class="ta" rows="3" placeholder="https://app.example.com/oauth/callback" />
        </label>
        <div class="enforce-note">
          <UiIcon name="key" :size="13" stroke="var(--text-mute)" />
          <span>Creates an OpenID Connect app in your identity provider, accessible only to this workspace.</span>
        </div>
      </div>
      <!-- Step 2: credentials (shown once) -->
      <div v-else class="form-stack">
        <div class="cred-warn">
          <UiIcon name="shield" :size="14" stroke="var(--warn)" />
          <span>Copy the client secret now — it won't be shown again.</span>
        </div>
        <div class="cred-row"><Eyebrow>Client ID</Eyebrow><div class="cred-val"><Mono>{{ ssoCreated.clientId }}</Mono><button class="copy" @click="copyText(ssoCreated.clientId)"><UiIcon name="copy" :size="12" /></button></div></div>
        <div class="cred-row"><Eyebrow>Client secret</Eyebrow><div class="cred-val"><Mono>{{ ssoCreated.clientSecret }}</Mono><button class="copy" @click="copyText(ssoCreated.clientSecret)"><UiIcon name="copy" :size="12" /></button></div></div>
        <div class="cred-row"><Eyebrow>Discovery URL</Eyebrow><div class="cred-val"><Mono>{{ ssoCreated.wellKnownUrl }}</Mono><button class="copy" @click="copyText(ssoCreated.wellKnownUrl)"><UiIcon name="copy" :size="12" /></button></div></div>
      </div>
      <template #footer>
        <template v-if="!ssoCreated">
          <UiButton variant="ghost" @click="ssoOpen = false">Cancel</UiButton>
          <UiButton variant="primary" :disabled="creatingSso || !ssoName.trim() || !ssoRedirects.trim()" @click="createSso">
            <template #leading><UiIcon name="check" :size="13" /></template>
            {{ creatingSso ? 'Creating…' : 'Create app' }}
          </UiButton>
        </template>
        <UiButton v-else variant="primary" @click="ssoOpen = false">Done</UiButton>
      </template>
    </Modal>

    <!-- Delete SSO app confirm -->
    <ConfirmDialog
      :open="!!ssoDeleteId"
      eyebrow="Security · SSO"
      :title="`Remove ${ssoDeleteName}?`"
      confirm-label="Remove app"
      tone="danger"
      @close="ssoDeleteId = null"
      @confirm="confirmDeleteSso"
    >
      The app's OpenID Connect provider is deleted from your identity provider. Anyone using it to sign in will lose access immediately.
    </ConfirmDialog>
  </div>
</template>

<style scoped>
.tab-wrap { padding: 16px 40px 0 40px; }
.content { padding: 24px 40px 64px 40px; }
.content.security { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }

.card-head { margin-bottom: 16px; }
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

/* RadioBig */
.radio-big { display: flex; flex-direction: column; gap: 8px; }
.radio-big label {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.radio-big label.active { border-color: var(--text); background: var(--bg); }
.radio-big input { display: none; }
.radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border-hi, var(--border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.radio-big label.active .radio-dot { border-color: var(--text); }
.radio-dot span { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
.radio-label { font-size: 14px; font-weight: 500; }
.radio-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.input-faux {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.input-faux input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.sso-intro { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
.sso-list { display: flex; flex-direction: column; gap: 8px; }
.sso-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 6px;
}
.sso-icon {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
}
.sso-meta { flex: 1; }
.sso-name { font-size: 13px; font-weight: 500; }

/* Audit toolbar + table */
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.input-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.input-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.chip span { font-weight: 500; }
.spacer { flex: 1; }

.select {
  height: 36px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.action-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.achip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.achip:hover { color: var(--text); }
.achip.on { background: var(--text); color: var(--bg); border-color: var(--text); }

.audit-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.no-hover td { cursor: default; }
.empty-row { text-align: center; padding: 40px 16px; }

.audit-table { width: 100%; border-collapse: collapse; }
.audit-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.audit-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-table .right { text-align: right; }
.target { color: var(--text-dim); }
.actor-cell { display: flex; align-items: center; gap: 8px; }
.sys {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--text);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.retention { margin-top: 12px; font-size: 12px; color: var(--text-mute); }

.badge-x {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: inherit;
}
.badge-x:hover { color: var(--bad); }

/* Add country modal */
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.input { height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; }
.input:focus { border-color: var(--text); }

/* MFA overview */
.card-head-inline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mfa-overview { display: flex; align-items: center; gap: 24px; margin-bottom: 12px; }
.mfa-stat { flex-shrink: 0; }
.mfa-num { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; }
.mfa-bar-wrap { flex: 1; min-width: 0; }
.mfa-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.mfa-bar span { display: block; height: 100%; background: var(--ok); }
.mfa-missing { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 10px 12px; background: var(--bg); border-radius: 6px; font-size: 12px; }
.missing-names { color: var(--text-dim); }

.sub-head { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; }
.enforce-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-mute); }

.soon-box {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px;
  background: var(--bg); border: 1px dashed var(--border-hi, var(--border));
  border-radius: 6px; font-size: 12px; color: var(--text-dim); line-height: 1.5;
}
.ip-add { display: flex; gap: 8px; margin-top: 10px; }
.ip-add .input { flex: 1; }

/* SSO */
.sso-empty { padding: 16px 0; }
.icon-del {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute); cursor: pointer;
}
.icon-del:hover { color: var(--bad); border-color: var(--bad); }
.ta {
  width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; font-family: var(--font-mono);
  font-size: 12px; color: var(--text); outline: none; resize: vertical; line-height: 1.6;
}
.ta:focus { border-color: var(--text); }
.cred-warn {
  display: flex; gap: 10px; align-items: center; padding: 12px;
  background: rgba(232, 154, 31, 0.06); border: 1px solid rgba(232, 154, 31, 0.2);
  border-radius: 6px; font-size: 12px; color: var(--text-dim);
}
.cred-row { display: flex; flex-direction: column; gap: 6px; }
.cred-val {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; overflow: hidden;
}
.cred-val :deep(.mono) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { background: transparent; border: none; color: var(--text-mute); cursor: pointer; flex-shrink: 0; padding: 2px; }
.copy:hover { color: var(--text); }
</style>
