import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { useState as u } from "react";
import { Link as b } from "react-router-dom";
import { useTranslation as g } from "react-i18next";
import { Sparkles as n, Upload as v, Plus as N, Check as f, EyeOff as p, Eye as _, Download as h, Copy as w, Pencil as K, Trash2 as k, Globe as j, Shield as T, ChevronRight as y, ArrowLeft as C, ArrowRight as B, Info as R, ChevronDown as E } from "lucide-react";
function s({ children: r }) {
  return /* @__PURE__ */ a("div", { className: "flex items-start gap-2 px-3 py-2 rounded-md border-l-2 border-[var(--color-accent-500)] bg-[var(--bg-secondary)] text-xs text-[var(--text-secondary)]", children: [
    /* @__PURE__ */ e(R, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-[var(--text-tertiary)]" }),
    /* @__PURE__ */ e("span", { className: "leading-relaxed", children: r })
  ] });
}
function c({ n: r }) {
  return /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center w-7 h-7 rounded-full bg-[var(--color-accent-500)]/15 text-[var(--color-accent-600)] text-sm font-semibold flex-shrink-0", children: r });
}
function $({ title: r, children: i }) {
  const [l, o] = u(!1);
  return /* @__PURE__ */ a("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: [
    /* @__PURE__ */ a(
      "button",
      {
        onClick: () => o((m) => !m),
        className: "w-full flex items-center justify-between px-6 py-4 bg-[var(--bg-card)] hover:bg-[var(--bg-hover)] transition-colors text-left",
        "aria-expanded": l,
        children: [
          /* @__PURE__ */ e("span", { className: "font-semibold text-[var(--text-primary)]", children: r }),
          l ? /* @__PURE__ */ e(E, { className: "w-4 h-4 text-[var(--text-tertiary)] flex-shrink-0" }) : /* @__PURE__ */ e(y, { className: "w-4 h-4 text-[var(--text-tertiary)] flex-shrink-0" })
        ]
      }
    ),
    l && /* @__PURE__ */ e("div", { className: "p-6 bg-[var(--bg-card)] border-t border-[var(--border-color)]", children: i })
  ] });
}
const A = [
  { name: "Dark", accent: "indigo", accentHex: "#6366f1", active: !0, builtin: !0 },
  { name: "Light", accent: "slate", accentHex: "#64748b", active: !0, builtin: !0 },
  { name: "Marque Client", accent: "emerald", accentHex: "#10b981", active: !0, builtin: !1 },
  { name: "Nocturne Pro", accent: "violet", accentHex: "#7c3aed", active: !1, builtin: !1 }
], L = [
  "identity",
  "colors",
  "status",
  "categories",
  "dashboard",
  "typography",
  "spacing",
  "logos",
  "access"
], P = [
  { methodKey: "api1_method", routeKey: "api1_route", permKey: "api1_permission", labelKey: "api1_label" },
  { methodKey: "api2_method", routeKey: "api2_route", permKey: "api2_permission", labelKey: "api2_label" },
  { methodKey: "api3_method", routeKey: "api3_route", permKey: "api3_permission", labelKey: "api3_label" },
  { methodKey: "api4_method", routeKey: "api4_route", permKey: "api4_permission", labelKey: "api4_label" },
  { methodKey: "api5_method", routeKey: "api5_route", permKey: "api5_permission", labelKey: "api5_label" },
  { methodKey: "api6_method", routeKey: "api6_route", permKey: "api6_permission", labelKey: "api6_label" }
], q = ["BR-001", "BR-002", "BR-003", "BR-004", "BR-005"];
function M() {
  const { t: r } = g("docsAdministrationThemes"), [i, l] = u("identity"), o = L.map((t) => ({ id: t, label: r(`tab_${t}`) })), m = (t) => t === "GET" ? "bg-[var(--info-bg)] text-[var(--info-text)]" : t === "DELETE" ? "bg-[var(--error-bg)] text-[var(--error-text)]" : "bg-[var(--warning-bg)] text-[var(--warning-text)]";
  return /* @__PURE__ */ a("div", { className: "space-y-8 max-w-5xl mx-auto pb-12", children: [
    /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
      /* @__PURE__ */ e(b, { to: "/system/docs/user", className: "hover:text-[var(--color-accent-600)] transition-colors", children: r("navBack") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { className: "text-[var(--text-primary)]", children: r("pageTitle") })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ a("h1", { className: "text-3xl font-bold mb-3 flex items-center gap-3", children: [
        /* @__PURE__ */ e(n, { className: "w-8 h-8 text-[var(--color-accent-600)]" }),
        r("pageTitle")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-xl text-[var(--color-accent-600)] font-medium mb-2", children: r("summary") }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: r("subtitle") }),
      /* @__PURE__ */ a("p", { className: "text-sm text-[var(--text-tertiary)] mt-2", children: [
        /* @__PURE__ */ e("span", { children: "4" }),
        " ",
        r("header_themes"),
        " · ",
        /* @__PURE__ */ e("span", { children: "2" }),
        " ",
        r("header_builtin"),
        " · ",
        /* @__PURE__ */ e("span", { children: "2" }),
        " ",
        r("header_custom")
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-4", children: [
        /* @__PURE__ */ e(c, { n: 1 }),
        r("section1_objectif_title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] leading-relaxed", children: r("objective") })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-4", children: [
        /* @__PURE__ */ e(c, { n: 2 }),
        r("section2_title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: r("section2_description") }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: [
        { label: "Navigation", value: r("section2_nav") },
        { label: "URL", value: r("section2_url") },
        { label: "Permission", value: r("section2_permission") }
      ].map(({ label: t, value: d }) => /* @__PURE__ */ a("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-md", children: [
        /* @__PURE__ */ e("div", { className: "text-[10px] font-semibold uppercase text-[var(--text-tertiary)] mb-1", children: t }),
        /* @__PURE__ */ e("code", { className: "text-sm text-[var(--color-accent-600)]", children: d })
      ] }, t)) }),
      /* @__PURE__ */ e("div", { className: "mt-4", children: /* @__PURE__ */ e(s, { children: r("section2_note") }) })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-2", children: [
        /* @__PURE__ */ e(c, { n: 3 }),
        r("section3_title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-6", children: r("section3_description") }),
      /* @__PURE__ */ e("div", { className: "bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: /* @__PURE__ */ a("div", { className: "p-4 space-y-4", children: [
        /* @__PURE__ */ a("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(n, { className: "w-5 h-5 text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-[var(--text-primary)]", children: r("pageTitle") })
          ] }),
          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-button)] border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)] text-xs font-medium", children: [
              /* @__PURE__ */ e(v, { className: "w-3.5 h-3.5" }),
              r("btn_import")
            ] }),
            /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-xs font-medium", children: [
              /* @__PURE__ */ e(N, { className: "w-3.5 h-3.5" }),
              r("btn_create")
            ] })
          ] })
        ] }),
        /* @__PURE__ */ e(s, { children: r("annot_list_toolbar") }),
        /* @__PURE__ */ e("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] overflow-hidden overflow-x-auto", children: /* @__PURE__ */ a("table", { className: "w-full text-xs min-w-[560px]", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("th", { className: "px-3 py-2 w-12" }),
            [r("col_name"), r("col_accent"), r("col_state"), r("col_actions")].map((t) => /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left font-semibold uppercase text-[var(--text-tertiary)] tracking-wide whitespace-nowrap", children: t }, t))
          ] }) }),
          /* @__PURE__ */ e("tbody", { className: "divide-y divide-[var(--border-color)]", children: A.map((t) => /* @__PURE__ */ a("tr", { className: "hover:bg-[var(--bg-hover)] transition-colors cursor-pointer", children: [
            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e(
              "span",
              {
                className: "flex items-center justify-center w-8 h-8 rounded-[var(--radius-card)]",
                style: { backgroundColor: t.accentHex },
                children: /* @__PURE__ */ e(n, { className: "w-3.5 h-3.5 text-white" })
              }
            ) }),
            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ a("div", { className: "font-medium text-[var(--text-primary)] flex items-center gap-1.5 flex-wrap", children: [
              t.name,
              t.builtin && /* @__PURE__ */ e("span", { className: "text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-[var(--bg-secondary)] text-[var(--text-tertiary)] border border-[var(--border-color)] font-bold", children: r("badge_builtin") })
            ] }) }),
            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs font-mono text-[var(--text-tertiary)]", children: t.accent }) }),
            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: t.active ? /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium uppercase rounded bg-[var(--success-bg)] text-[var(--success-text)] border border-[var(--success-border)]", children: [
              /* @__PURE__ */ e(f, { className: "w-3 h-3" }),
              " ",
              r("state_active")
            ] }) : /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium uppercase rounded bg-[var(--bg-secondary)] text-[var(--text-tertiary)] border border-[var(--border-color)]", children: [
              /* @__PURE__ */ e(p, { className: "w-3 h-3" }),
              " ",
              r("state_disabled")
            ] }) }),
            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-1", children: [
              /* @__PURE__ */ e("div", { className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-tertiary)]", children: t.active ? /* @__PURE__ */ e(p, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ e(_, { className: "w-3.5 h-3.5" }) }),
              /* @__PURE__ */ e("div", { className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-tertiary)]", children: /* @__PURE__ */ e(h, { className: "w-3.5 h-3.5" }) }),
              /* @__PURE__ */ e("div", { className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-tertiary)]", children: /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5" }) }),
              /* @__PURE__ */ e("div", { className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-tertiary)]", children: /* @__PURE__ */ e(K, { className: "w-3.5 h-3.5" }) }),
              !t.builtin && /* @__PURE__ */ e("div", { className: "p-1.5 rounded hover:bg-[var(--error-bg)] text-[var(--text-tertiary)] hover:text-[var(--error-text)]", children: /* @__PURE__ */ e(k, { className: "w-3.5 h-3.5" }) })
            ] }) })
          ] }, t.name)) })
        ] }) }),
        /* @__PURE__ */ e(s, { children: r("annot_list_table") }),
        /* @__PURE__ */ e(s, { children: r("annot_list_icon") }),
        /* @__PURE__ */ e(s, { children: r("annot_list_accent") }),
        /* @__PURE__ */ e(s, { children: r("annot_list_state") })
      ] }) })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-2", children: [
        /* @__PURE__ */ e(c, { n: 4 }),
        r("section4_title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-6", children: r("section4_description") }),
      /* @__PURE__ */ e("div", { className: "bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: /* @__PURE__ */ a("div", { className: "p-4 space-y-4", children: [
        /* @__PURE__ */ e("div", { className: "flex gap-1 border-b border-[var(--border-color)] overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: o.map((t) => /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: () => l(t.id),
            className: [
              "px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 -mb-px transition-colors",
              t.id === i ? "text-[var(--text-primary)] border-[var(--color-accent-500)]" : "text-[var(--text-tertiary)] border-transparent hover:text-[var(--text-secondary)]"
            ].join(" "),
            children: t.label
          },
          t.id
        )) }),
        /* @__PURE__ */ e(s, { children: r("annot_editor_tabs") }),
        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
          /* @__PURE__ */ a("div", { className: "space-y-3 min-w-0", children: [
            i === "identity" && /* @__PURE__ */ a("div", { className: "p-4 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-secondary)] space-y-3", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
                /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-[var(--radius-card)] bg-[var(--color-accent-500)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white" }) }),
                /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
                  /* @__PURE__ */ e("div", { className: "text-[10px] font-semibold uppercase text-[var(--text-tertiary)] mb-1", children: r("field_name") }),
                  /* @__PURE__ */ e("div", { className: "px-2 py-1.5 rounded border border-[var(--border-color)] bg-[var(--bg-card)] text-xs text-[var(--text-primary)]", children: "Marque Client" })
                ] })
              ] }),
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ e("div", { className: "text-[10px] font-semibold uppercase text-[var(--text-tertiary)] mb-1", children: r("field_description") }),
                /* @__PURE__ */ e("div", { className: "px-2 py-1.5 rounded border border-[var(--border-color)] bg-[var(--bg-card)] text-xs text-[var(--text-tertiary)]", children: r("field_description_placeholder") })
              ] }),
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ e("div", { className: "text-[10px] font-semibold uppercase text-[var(--text-tertiary)] mb-2", children: r("field_accent") }),
                /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: ["#6366f1", "#10b981", "#7c3aed", "#f59e0b", "#ef4444", "#0ea5e9", "#64748b", "#ec4899"].map((t, d) => /* @__PURE__ */ e(
                  "div",
                  {
                    className: `w-5 h-5 rounded-full cursor-pointer${d === 1 ? " ring-2 ring-offset-1 ring-[var(--color-accent-500)]" : ""}`,
                    style: { backgroundColor: t }
                  },
                  d
                )) })
              ] })
            ] }),
            i !== "identity" && /* @__PURE__ */ e("div", { className: "p-4 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center justify-center h-28", children: /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-tertiary)]", children: o.find((t) => t.id === i)?.label }) }),
            /* @__PURE__ */ e(s, { children: r("annot_editor_identity") }),
            /* @__PURE__ */ e(s, { children: r("annot_dirty") })
          ] }),
          /* @__PURE__ */ a("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-3 space-y-2 min-w-0 overflow-hidden", children: [
            /* @__PURE__ */ e("div", { className: "text-[10px] font-semibold uppercase text-[var(--text-tertiary)]", children: "Live Preview" }),
            /* @__PURE__ */ a("div", { className: "rounded border border-[var(--border-color)] bg-[var(--bg-card)] overflow-hidden", children: [
              /* @__PURE__ */ a("div", { className: "px-3 py-2 flex items-center gap-2 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]", children: [
                /* @__PURE__ */ e("div", { className: "w-4 h-4 rounded-full bg-[var(--color-accent-500)]" }),
                /* @__PURE__ */ e("div", { className: "h-2 w-16 rounded-full bg-[var(--border-color)]" })
              ] }),
              /* @__PURE__ */ a("div", { className: "p-3 space-y-2", children: [
                /* @__PURE__ */ e("div", { className: "h-2 w-24 rounded-full bg-[var(--color-accent-500)]" }),
                /* @__PURE__ */ e("div", { className: "h-2 w-32 rounded-full bg-[var(--border-color)]" }),
                /* @__PURE__ */ e("div", { className: "h-2 w-20 rounded-full bg-[var(--border-color)]" }),
                /* @__PURE__ */ a("div", { className: "flex gap-2 mt-3", children: [
                  /* @__PURE__ */ e("div", { className: "h-6 px-3 rounded-[var(--radius-button)] flex items-center text-[10px] text-white font-medium bg-[var(--color-accent-500)]", children: r("btn_save_mock") }),
                  /* @__PURE__ */ e("div", { className: "h-6 px-3 rounded-[var(--radius-button)] flex items-center text-[10px] bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]", children: r("btn_cancel_mock") })
                ] })
              ] })
            ] }),
            /* @__PURE__ */ e(s, { children: r("annot_editor_preview") })
          ] })
        ] }),
        /* @__PURE__ */ e(s, { children: r("annot_editor_colors") })
      ] }) })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-4", children: [
        /* @__PURE__ */ e(c, { n: 5 }),
        r("section5_title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: r("section5_description") }),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ a("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(h, { className: "w-4 h-4 text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: r("export_label") })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] leading-relaxed", children: r("annot_export") })
        ] }),
        /* @__PURE__ */ a("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(v, { className: "w-4 h-4 text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: r("import_label") })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] leading-relaxed", children: r("annot_import") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-4", children: [
        /* @__PURE__ */ e(c, { n: 6 }),
        r("section6_title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: r("section6_description") }),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ a("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(j, { className: "w-4 h-4 text-[var(--success-text)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: r("visibility_public_label") }),
            /* @__PURE__ */ e("span", { className: "ml-auto inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded bg-[var(--success-bg)] text-[var(--success-text)] border border-[var(--success-border)]", children: r("visibility_default") })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] leading-relaxed", children: r("annot_visibility_public") })
        ] }),
        /* @__PURE__ */ a("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(T, { className: "w-4 h-4 text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: r("visibility_private_label") })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] leading-relaxed", children: r("annot_visibility_private") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-6", children: [
        /* @__PURE__ */ e(c, { n: 7 }),
        r("section7_title")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [
        { personaKey: "usecase1_persona", descKey: "usecase1_description" },
        { personaKey: "usecase2_persona", descKey: "usecase2_description" },
        { personaKey: "usecase3_persona", descKey: "usecase3_description" }
      ].map(({ personaKey: t, descKey: d }) => {
        const x = r(t);
        return /* @__PURE__ */ a("div", { className: "flex gap-4 p-4 bg-[var(--bg-secondary)] rounded-md", children: [
          /* @__PURE__ */ e("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-[var(--color-accent-500)]/15 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[var(--color-accent-600)] font-semibold text-xs", children: x[0] }) }),
          /* @__PURE__ */ a("div", { className: "min-w-0", children: [
            /* @__PURE__ */ e("div", { className: "font-semibold text-sm text-[var(--text-primary)] mb-1", children: x }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] leading-relaxed", children: r(d) })
          ] })
        ] }, t);
      }) })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-6", children: [
        /* @__PURE__ */ e(c, { n: 8 }),
        r("section8_title")
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        { titleKey: "feature1_title", bodyKey: "feature1_body" },
        { titleKey: "feature2_title", bodyKey: "feature2_body" },
        { titleKey: "feature3_title", bodyKey: "feature3_body" },
        { titleKey: "feature4_title", bodyKey: "feature4_body" },
        { titleKey: "feature5_title", bodyKey: "feature5_body" }
      ].map(({ titleKey: t, bodyKey: d }) => /* @__PURE__ */ a("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-md border-l-2 border-[var(--color-accent-500)]", children: [
        /* @__PURE__ */ e("div", { className: "font-semibold text-sm text-[var(--text-primary)] mb-1.5", children: r(t) }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] leading-relaxed", children: r(d) })
      ] }, t)) })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-3 text-xl font-semibold mb-6", children: [
        /* @__PURE__ */ e(c, { n: 9 }),
        r("section9_title")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ a("details", { className: "group border border-[var(--border-color)] rounded-md overflow-hidden", children: [
        /* @__PURE__ */ a("summary", { className: "flex items-center justify-between px-4 py-3 bg-[var(--bg-secondary)] cursor-pointer select-none text-sm font-medium text-[var(--text-primary)] list-none", children: [
          r(`faq${t}_q`),
          /* @__PURE__ */ e(y, { className: "w-4 h-4 text-[var(--text-tertiary)] flex-shrink-0 transition-transform group-open:rotate-90" })
        ] }),
        /* @__PURE__ */ e("div", { className: "px-4 py-3 text-sm text-[var(--text-secondary)] bg-[var(--bg-card)] leading-relaxed", children: r(`faq${t}_a`) })
      ] }, t)) })
    ] }),
    /* @__PURE__ */ e($, { title: r("section10_title"), children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold text-sm text-[var(--text-primary)] mb-3 uppercase tracking-wide", children: r("section10_api_title") }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto rounded-md border border-[var(--border-color)]", children: /* @__PURE__ */ a("table", { className: "w-full text-xs min-w-[600px]", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "bg-[var(--bg-secondary)]", children: [r("col_method"), r("col_route"), r("col_permission"), r("col_description")].map((t) => /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left font-semibold text-[var(--text-tertiary)] uppercase tracking-wide whitespace-nowrap", children: t }, t)) }) }),
          /* @__PURE__ */ e("tbody", { className: "divide-y divide-[var(--border-color)]", children: P.map((t) => {
            const d = r(t.methodKey);
            return /* @__PURE__ */ a("tr", { className: "hover:bg-[var(--bg-hover)] transition-colors", children: [
              /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("span", { className: `inline-flex rounded px-2 py-0.5 text-[10px] font-semibold font-mono ${m(d)}`, children: d }) }),
              /* @__PURE__ */ e("td", { className: "px-3 py-2 font-mono text-[var(--color-accent-600)] whitespace-nowrap", children: r(t.routeKey) }),
              /* @__PURE__ */ e("td", { className: "px-3 py-2 font-mono text-[var(--text-secondary)] whitespace-nowrap", children: r(t.permKey) }),
              /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-secondary)]", children: r(t.labelKey) })
            ] }, t.routeKey);
          }) })
        ] }) })
      ] }),
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold text-sm text-[var(--text-primary)] mb-3 uppercase tracking-wide", children: r("section10_br_title") }),
        /* @__PURE__ */ e("div", { className: "space-y-2", children: q.map((t, d) => /* @__PURE__ */ a("div", { className: "flex gap-3 p-3 bg-[var(--bg-secondary)] rounded-md text-xs", children: [
          /* @__PURE__ */ e("span", { className: "inline-flex items-center rounded-full bg-[var(--color-accent-500)]/15 px-2 py-0.5 text-[var(--color-accent-600)] font-medium shrink-0 self-start mt-0.5", children: t }),
          /* @__PURE__ */ a("div", { className: "min-w-0", children: [
            /* @__PURE__ */ e("div", { className: "font-medium text-[var(--text-primary)] mb-0.5", children: r(`br${d + 1}_title`) }),
            /* @__PURE__ */ e("div", { className: "text-[var(--text-secondary)] leading-relaxed", children: r(`br${d + 1}_body`) })
          ] })
        ] }, t)) })
      ] })
    ] }) }),
    /* @__PURE__ */ a("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ a(
        b,
        {
          to: "/system/docs/user",
          className: "flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--color-accent-600)] transition-colors",
          children: [
            /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
            r("navBack")
          ]
        }
      ),
      /* @__PURE__ */ a(
        b,
        {
          to: "/administration/uiconfiguration/themes",
          className: "flex items-center gap-2 text-sm text-[var(--color-accent-600)] hover:underline",
          children: [
            r("link_open"),
            /* @__PURE__ */ e(B, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  M as default
};
//# sourceMappingURL=index-qXptlgDG.js.map
