// screens/settings.jsx — Full-page settings (Appearance, Profile, Notifications, etc.)

function Settings({ ctx }) {
  const { t, setTweak, showToast, openModal, data } = ctx;
  const tt = ctx.tt;
  const [section, setSection] = React.useState("appearance");
  const [profile, setProfile] = React.useState({
    name: "Sergio del Arco",
    email: "sergio@delarco.es",
    phone: "+34 612 34 56 78",
    fiscalName: "Sergio del Arco S.L.",
    nif: "B-12345678",
    iban: "ES91 2100 0418 4502 0005 1332",
    iva: "10%",
    irpf: "19%",
  });
  const upd = (k, v) => setProfile((p) => ({ ...p, [k]: v }));

  const sections = [
    { id: "appearance",    label: tt("set.section.appearance"),    icon: "spark" },
    { id: "profile",       label: tt("set.section.profile"),       icon: "users" },
    { id: "notifications", label: tt("set.section.notifications"), icon: "bell" },
    { id: "fiscal",        label: tt("set.section.fiscal"),        icon: "file" },
    { id: "integrations",  label: tt("set.section.integrations"),  icon: "spark" },
    { id: "billing",       label: tt("set.section.billing"),       icon: "euro" },
    { id: "danger",        label: tt("set.section.danger"),        icon: "x" },
  ];

  return (
    <>
      <div className="main-top">
        <div className="title">
          <h1 className="display">{ctx.tt("set.title")}</h1>
          <div className="sub">{ctx.tt("set.sub")}</div>
        </div>
        <div className="actions">
        </div>
      </div>

      <div className="main-scroll" style={{ paddingTop: 18 }}>
        <div className="settings-shell">
          <aside className="settings-nav">
            {sections.map((s) => (
              <button key={s.id} className="settings-nav-item"
                      aria-current={section === s.id}
                      onClick={() => setSection(s.id)}>
                <Icon name={s.icon} size={14} />
                <span>{s.label}</span>
              </button>
            ))}
          </aside>

          <div className="settings-body">
            {section === "appearance" && (
              <>
                <SettingsCard title={tt("set.app.title")}
                              hint={tt("set.app.hint")}>
                  <SettingRow label={tt("set.app.mode")} hint={tt("set.app.modeHint")}>
                    <Tabs value={t.theme} onChange={(v) => setTweak("theme", v)} tabs={[
                      { value: "light", label: tt("set.app.modeLight") }, { value: "dark", label: tt("set.app.modeDark") }
                    ]} />
                  </SettingRow>
                  <SettingRow label={tt("set.app.density")} hint={tt("set.app.densityHint")}>
                    <Tabs value={t.density} onChange={(v) => setTweak("density", v)} tabs={[
                      { value: "comfortable", label: tt("set.app.densityComfy") }, { value: "compact", label: tt("set.app.densityCompact") }
                    ]} />
                  </SettingRow>
                  <SettingRow label={tt("set.app.type")} hint={tt("set.app.typeHint")}>
                    <Tabs value={t.type} onChange={(v) => setTweak("type", v)} tabs={[
                      { value: "modern", label: tt("set.app.typeModern") }, { value: "editorial", label: tt("set.app.typeEdit") }
                    ]} />
                  </SettingRow>
                </SettingsCard>

                <SettingsCard title={tt("set.app.accent")}
                              hint={tt("set.app.accentHint")}>
                  <div className="accent-grid">
                    {[
                      { v: "green",      sw: "#16A34A" },
                      { v: "blue",       sw: "#2C5FCB" },
                      { v: "sage",       sw: "#2F7D5D" },
                      { v: "slate",      sw: "#475569" },
                      { v: "plum",       sw: "#6B4C8C" },
                      { v: "terracotta", sw: "#B85535" },
                    ].map((opt) => (
                      <button key={opt.v} type="button"
                              className={`accent-swatch${t.accent === opt.v ? " is-active" : ""}`}
                              onClick={() => setTweak("accent", opt.v)}
                              aria-label={tt(`set.app.accent.${opt.v}`)}>
                        <div className="accent-swatch-bg" style={{ background: opt.sw }}>
                          {t.accent === opt.v && <Icon name="check" size={14} style={{ color: "#fff" }} />}
                        </div>
                        <div className="accent-swatch-name">{tt(`set.app.accent.${opt.v}`)}</div>
                      </button>
                    ))}
                  </div>
                </SettingsCard>

                <SettingsCard title={tt("set.app.nav")}>
                  <SettingRow label={tt("set.app.navPos")} hint={tt("set.app.navPosHint")}>
                    <Tabs value={t.nav} onChange={(v) => setTweak("nav", v)} tabs={[
                      { value: "sidebar", label: tt("set.app.navSide") }, { value: "top", label: tt("set.app.navTop") }
                    ]} />
                  </SettingRow>
                  <SettingRow label={tt("set.app.listings")} hint={tt("set.app.listingsHint")}>
                    <Tabs value={t.listings} onChange={(v) => setTweak("listings", v)} tabs={[
                      { value: "cards", label: tt("set.app.listingsCards") }, { value: "table", label: tt("set.app.listingsTable") }
                    ]} />
                  </SettingRow>
                </SettingsCard>
              </>
            )}

            {section === "profile" && (
              <>
                <SettingsCard title={tt("set.prof.title")} hint={tt("set.prof.hint")}>
                  <div className="flex center gap-3" style={{ marginBottom: 20 }}>
                    <div className="avatar xl a2" style={{ width: 72, height: 72, fontSize: 22 }}>SA</div>
                    <div>
                      <button className="btn sm" onClick={() => showToast(tt("toast.avatarUpload"))}>{tt("set.prof.changePhoto")}</button>
                      <div className="muted txt-xs" style={{ marginTop: 6 }}>{tt("set.prof.photoHint")}</div>
                    </div>
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label htmlFor="settings-name">{tt("set.prof.fullName")}</label>
                      <input id="settings-name" value={profile.name} onChange={(e) => upd("name", e.target.value)} />
                    </div>
                    <div className="field">
                      <label htmlFor="settings-email">{tt("set.prof.email")}</label>
                      <input id="settings-email" value={profile.email} onChange={(e) => upd("email", e.target.value)} />
                    </div>
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label htmlFor="settings-phone">{tt("set.prof.phone")}</label>
                      <input id="settings-phone" value={profile.phone} onChange={(e) => upd("phone", e.target.value)} />
                    </div>
                    <div className="field">
                      <label htmlFor="settings-language">{tt("set.prof.lang")}</label>
                      <select id="settings-language" value={ctx.lang} onChange={(e) => ctx.toggleLang && (ctx.lang !== e.target.value) && ctx.toggleLang()}>
                        <option value="en">English</option>
                        <option value="es">Español</option>
                      </select>
                    </div>
                  </div>
                </SettingsCard>

                <SettingsCard title={tt("set.biz.title")} hint={tt("set.biz.hint")}>
                  <div className="field-row">
                    <div className="field">
                      <label htmlFor="settings-fiscal-name">{tt("set.biz.tradingName")}</label>
                      <input id="settings-fiscal-name" value={profile.fiscalName} onChange={(e) => upd("fiscalName", e.target.value)} />
                    </div>
                    <div className="field">
                      <label htmlFor="settings-nif">{tt("set.biz.nif")}</label>
                      <input id="settings-nif" value={profile.nif} onChange={(e) => upd("nif", e.target.value)} />
                    </div>
                  </div>
                  <div className="field">
                    <label htmlFor="settings-iban">{tt("set.biz.iban")}</label>
                    <input id="settings-iban" value={profile.iban} onChange={(e) => upd("iban", e.target.value)} className="mono" />
                  </div>
                </SettingsCard>

                <div className="flex" style={{ justifyContent: "flex-end", gap: 8 }}>
                  <button className="btn ghost">{tt("set.btn.discard")}</button>
                  <button className="btn accent" onClick={() => showToast(tt("toast.profileSaved"))}>
                    <Icon name="check" size={13} /> {tt("set.btn.save")}
                  </button>
                </div>
              </>
            )}

            {section === "notifications" && (
              <>
                <SettingsCard title={tt("set.notif.email")} hint={tt("set.notif.emailHint")}>
                  <NotifToggle label={tt("set.notif.row.ticket")} def={true} />
                  <NotifToggle label={tt("set.notif.row.overdue")} def={true} />
                  <NotifToggle label={tt("set.notif.row.endingSoon")} def={true} />
                  <NotifToggle label={tt("set.notif.row.booking")} def={true} />
                  <NotifToggle label={tt("set.notif.row.weekly")} def={false} />
                  <NotifToggle label={tt("set.notif.row.monthly")} def={true} />
                </SettingsCard>

                <SettingsCard title={tt("set.notif.inapp")}>
                  <NotifToggle label={tt("set.notif.row.push")} def={false} />
                  <NotifToggle label={tt("set.notif.row.sound")} def={true} />
                </SettingsCard>

                <SettingsCard title={tt("set.notif.tenants")} hint={tt("set.notif.tenantsHint")}>
                  <NotifToggle label={tt("set.notif.row.reminder")} def={true} />
                  <NotifToggle label={tt("set.notif.row.thankYou")} def={true} />
                  <NotifToggle label={tt("set.notif.row.renewal")} def={false} />
                </SettingsCard>
              </>
            )}

            {section === "fiscal" && (
              <>
                <SettingsCard title={tt("set.fiscal.tax")} hint={tt("set.fiscal.taxHint")}>
                  <div className="field-row">
                    <div className="field">
                      <label htmlFor="settings-irpf">{tt("set.fiscal.irpf")}</label>
                      <input id="settings-irpf" value={profile.irpf} onChange={(e) => upd("irpf", e.target.value)} />
                      <span className="hint">{tt("set.fiscal.irpfHint")}</span>
                    </div>
                    <div className="field">
                      <label htmlFor="settings-iva">{tt("set.fiscal.iva")}</label>
                      <input id="settings-iva" value={profile.iva} onChange={(e) => upd("iva", e.target.value)} />
                      <span className="hint">{tt("set.fiscal.ivaHint")}</span>
                    </div>
                  </div>
                </SettingsCard>

                <SettingsCard title={tt("set.fiscal.q")} hint={tt("set.fiscal.qHint")}>
                  <ActionRow icon="file" title={tt("set.fiscal.q2Title")}
                             subtitle={tt("set.fiscal.q2Sub")}
                             action={<button className="btn sm" onClick={() => showToast(tt("toast.m115"))}>{tt("set.fiscal.btn.prepare")}</button>} />
                  <ActionRow icon="file" title={tt("set.fiscal.q1Title")}
                             subtitle={tt("set.fiscal.q1Sub")}
                             action={<Chip tone="positive"><span className="dot" />{tt("set.fiscal.btn.filed")}</Chip>} />
                  <ActionRow icon="file" title={tt("set.fiscal.annual")}
                             subtitle={tt("set.fiscal.annualSub")}
                             action={<button className="btn ghost sm" onClick={() => showToast(tt("toast.dl2025"))}>{tt("set.fiscal.btn.download")}</button>} />
                </SettingsCard>

                <SettingsCard title={tt("set.fiscal.docs")}>
                  <ActionRow icon="file" title={tt("set.fiscal.docs.contracts")}
                             subtitle={tt("set.fiscal.docs.contractsSub")}
                             action={<button className="btn sm">{tt("set.fiscal.btn.manage")}</button>} />
                  <ActionRow icon="file" title={tt("set.fiscal.docs.rules")}
                             subtitle={tt("set.fiscal.docs.rulesSub")}
                             action={<button className="btn ghost sm">{tt("set.fiscal.btn.edit")}</button>} />
                </SettingsCard>
              </>
            )}

            {section === "integrations" && (
              <>
                <SettingsCard title={tt("set.int.booking")} hint={tt("set.int.bookingHint")}>
                  <Integration ctx={ctx} name="Airbnb" hint={tt("set.int.airbnb.hint")} status="connected" />
                  <Integration ctx={ctx} name="Booking.com" hint={tt("set.int.booking.hint")} status="connected" />
                  <Integration ctx={ctx} name="Vrbo" hint={tt("set.int.notConnected")} status="off" />
                  <Integration ctx={ctx} name="Idealista" hint={tt("set.int.notConnected")} status="off" />
                </SettingsCard>

                <SettingsCard title={tt("set.int.money")}>
                  <Integration ctx={ctx} name="Stripe" hint={tt("set.int.stripe.hint")} status="connected" />
                  <Integration ctx={ctx} name="BBVA" hint={tt("set.int.bbva.hint")} status="connected" />
                  <Integration ctx={ctx} name="QuickBooks" hint={tt("set.int.qb.hint")} status="off" />
                </SettingsCard>

                <SettingsCard title={tt("set.int.other")}>
                  <Integration ctx={ctx} name="Google Calendar" hint={tt("set.int.gcal.hint")} status="off" />
                  <Integration ctx={ctx} name="WhatsApp Business" hint={tt("set.int.wa.hint")} status="connected" />
                  <Integration ctx={ctx} name="DocuSign" hint={tt("set.int.ds.hint")} status="off" />
                </SettingsCard>
              </>
            )}

            {section === "billing" && (
              <>
                <SettingsCard title={tt("set.bill.current")}>
                  <div className="plan-card">
                    <div>
                      <div className="b500" style={{ fontSize: 16 }}>{tt("set.bill.pro")}</div>
                      <div className="muted txt-sm" style={{ marginTop: 4 }}>{tt("set.bill.proSub")}</div>
                    </div>
                    <button className="btn">{tt("set.bill.change")}</button>
                  </div>
                </SettingsCard>

                <SettingsCard title={tt("set.bill.usage")}>
                  <UsageRow label={tt("set.bill.usage.apts")} value="4 / 20" pct={20} />
                  <UsageRow label={tt("set.bill.usage.tenants")} value="7 / ∞" pct={null} />
                  <UsageRow label={tt("set.bill.usage.storage")} value="142 MB / 5 GB" pct={3} />
                </SettingsCard>

                <SettingsCard title={tt("set.bill.method")} hint={tt("set.bill.methodHint")}>
                  <div className="flex center gap-3" style={{ padding: 12, background: "var(--ef-bg-soft)", borderRadius: 10 }}>
                    <Icon name="euro" size={20} />
                    <div className="grow">
                      <div className="b500">Visa ··· 4218</div>
                      <div className="muted txt-xs">{tt("set.bill.cardExpires", { date: "09/27" })}</div>
                    </div>
                    <button className="btn sm ghost">{tt("set.bill.update")}</button>
                  </div>
                </SettingsCard>

                <SettingsCard title={tt("set.bill.invoices")}>
                  <ActionRow icon="file" title="2026-05 · 19,00 €" subtitle={tt("set.bill.paid", { date: "14 may" })}
                             action={<button className="btn ghost sm">{tt("set.bill.download")}</button>} />
                  <ActionRow icon="file" title="2026-04 · 19,00 €" subtitle={tt("set.bill.paid", { date: "14 abr" })}
                             action={<button className="btn ghost sm">{tt("set.bill.download")}</button>} />
                  <ActionRow icon="file" title="2026-03 · 19,00 €" subtitle={tt("set.bill.paid", { date: "14 mar" })}
                             action={<button className="btn ghost sm">{tt("set.bill.download")}</button>} />
                </SettingsCard>
              </>
            )}

            {section === "danger" && (
              <SettingsCard title={tt("set.danger.title")} hint={tt("set.danger.hint")} danger>
                <ActionRow icon="file" title={tt("set.danger.export")}
                           subtitle={tt("set.danger.exportSub")}
                           action={<button className="btn" onClick={() => showToast(tt("toast.exportStarted"))}>{tt("set.danger.btn.export")}</button>} />
                <ActionRow icon="x" title={tt("set.danger.archive")}
                           subtitle={tt("set.danger.archiveSub")}
                           danger
                           action={<button className="btn" onClick={() => ctx.confirm && ctx.confirm({
                             title: tt("set.danger.archive") + "?",
                             body: tt("set.danger.archiveSub"),
                             confirmLabel: tt("set.danger.btn.archive"),
                             danger: true,
                             onConfirm: () => showToast(tt("toast.archiveFlow")),
                           })}>{tt("set.danger.btn.archive")}</button>} />
                <ActionRow icon="x" title={tt("set.danger.delete")}
                           subtitle={tt("set.danger.deleteSub")}
                           danger
                           action={<button className="btn" style={{ borderColor: "var(--ef-danger)", color: "var(--ef-danger)" }}
                                           onClick={() => ctx.confirm && ctx.confirm({
                                             title: tt("set.danger.delete") + "?",
                                             body: tt("set.danger.deleteSub"),
                                             confirmLabel: tt("set.danger.btn.delete"),
                                             danger: true,
                                             onConfirm: () => showToast(tt("toast.deleteFlow")),
                                           })}>{tt("set.danger.btn.delete")}</button>} />
              </SettingsCard>
            )}
          </div>
        </div>
      </div>

      <style>{settingsStyles}</style>
    </>
  );
}

// ───────────────────────── BUILDING BLOCKS ─────────────────────────

function SettingsCard({ title, hint, children, danger }) {
  return (
    <div className={`settings-card${danger ? " danger" : ""}`}>
      <div className="settings-card-head">
        <h3>{title}</h3>
        {hint && <div className="muted txt-sm">{hint}</div>}
      </div>
      <div className="settings-card-body">{children}</div>
    </div>
  );
}

function SettingRow({ label, hint, children }) {
  return (
    <div className="settings-row">
      <div className="settings-row-text">
        <div className="b500 txt-md">{label}</div>
        {hint && <div className="muted txt-xs" style={{ marginTop: 2 }}>{hint}</div>}
      </div>
      <div className="settings-row-control">{children}</div>
    </div>
  );
}

function ActionRow({ icon, title, subtitle, action, danger }) {
  return (
    <div className={`settings-row action-row${danger ? " danger" : ""}`}>
      <div style={{ width: 30, height: 30, borderRadius: 8, background: danger ? "var(--danger-soft)" : "var(--ef-bg-soft)", color: danger ? "var(--ef-danger)" : "var(--ef-ink-2)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <Icon name={icon} size={14} />
      </div>
      <div className="grow" style={{ minWidth: 0 }}>
        <div className="b500 txt-md">{title}</div>
        {subtitle && <div className="muted txt-xs" style={{ marginTop: 2 }}>{subtitle}</div>}
      </div>
      <div>{action}</div>
    </div>
  );
}

function NotifToggle({ label, def }) {
  const [on, setOn] = React.useState(def);
  return (
    <div className="settings-row notif-row">
      <div className="grow"><div className="txt-md">{label}</div></div>
      <button className="toggle" data-on={on ? "1" : "0"} onClick={() => setOn(!on)}>
        <i />
      </button>
    </div>
  );
}

function Integration({ name, hint, status, ctx }) {
  const tt = (ctx && ctx.tt) || ((k) => k);
  const [connected, setConnected] = React.useState(status === "connected");
  return (
    <div className="settings-row integration-row">
      <div style={{ width: 36, height: 36, borderRadius: 9, background: "var(--ef-bg-soft)", color: "var(--ef-ink-2)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontWeight: 600, fontSize: 12 }}>
        {name.slice(0, 2).toUpperCase()}
      </div>
      <div className="grow" style={{ minWidth: 0 }}>
        <div className="b500 txt-md flex center gap-2">{name} {connected && <Chip tone="positive"><span className="dot" />{tt("set.int.connected")}</Chip>}</div>
        <div className="muted txt-xs" style={{ marginTop: 2 }}>{hint}</div>
      </div>
      <button className={`btn sm ${connected ? "ghost" : ""}`} onClick={() => setConnected(!connected)}>
        {connected ? tt("set.int.btn.disconnect") : tt("set.int.btn.connect")}
      </button>
    </div>
  );
}

function UsageRow({ label, value, pct }) {
  return (
    <div className="settings-row usage-row">
      <div className="grow">
        <div className="flex between" style={{ marginBottom: 6 }}>
          <span className="b500 txt-md">{label}</span>
          <span className="num muted-2">{value}</span>
        </div>
        {pct != null && (
          <div className="progress" style={{ background: "var(--ef-bg-soft)" }}>
            <i style={{ width: pct + "%" }} />
          </div>
        )}
      </div>
    </div>
  );
}

const settingsStyles = `
  .settings-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    max-width: 1100px;
  }
  @media (max-width: 1100px) { .settings-shell { grid-template-columns: 180px 1fr; gap: 20px; } }
  @media (max-width: 820px)  { .settings-shell { grid-template-columns: 1fr; } }

  .settings-nav {
    display: flex; flex-direction: column;
    gap: 2px;
    position: sticky; top: 0;
    align-self: start;
  }
  .settings-nav-item {
    appearance: none; border: 0; background: transparent;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ef-ink-2);
    cursor: pointer;
    text-align: left;
  }
  .settings-nav-item:hover { background: var(--ef-bg-soft); color: var(--ef-ink); }
  .settings-nav-item[aria-current="true"] {
    background: var(--accent-tint);
    color: var(--ef-accent-deep);
    font-weight: 500;
  }
  [data-theme="dark"] .settings-nav-item[aria-current="true"] { background: var(--ef-accent-soft); color: var(--ef-accent); }

  .settings-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

  .settings-card {
    background: var(--ef-bg);
    border: 1px solid var(--ef-line);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .settings-card.danger { border-color: var(--danger-soft); }
  .settings-card-head {
    padding: 18px 22px 0;
  }
  .settings-card-head h3 {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .settings-card-body {
    padding: 14px 22px 18px;
    display: flex; flex-direction: column;
  }

  .settings-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ef-line);
    min-width: 0;
  }
  .settings-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .settings-row:first-child { padding-top: 0; }
  .settings-row-text { flex: 1; min-width: 0; }
  .settings-row-control { flex-shrink: 0; }

  .accent-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding-top: 4px;
  }
  @media (max-width: 900px) { .accent-grid { grid-template-columns: repeat(3, 1fr); } }
  .accent-swatch {
    appearance: none; border: 0; background: transparent;
    cursor: pointer;
    padding: 0;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .accent-swatch-bg {
    width: 100%; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    transition: transform .15s cubic-bezier(.3,.7,.4,1), box-shadow .15s;
  }
  .accent-swatch:hover .accent-swatch-bg { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
  .accent-swatch.is-active .accent-swatch-bg { box-shadow: 0 0 0 2px var(--ef-ink), 0 0 0 5px var(--ef-bg); }
  .accent-swatch-name { font-size: 12px; color: var(--ef-ink-2); }
  .accent-swatch.is-active .accent-swatch-name { color: var(--ef-ink); font-weight: 500; }

  .toggle {
    appearance: none; border: 0;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--ef-bg-soft);
    position: relative;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
  }
  .toggle[data-on="1"] { background: var(--ef-accent); }
  .toggle i {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: transform .15s;
  }
  .toggle[data-on="1"] i { transform: translateX(16px); }

  .plan-card {
    display: flex; align-items: center; gap: 16px;
    padding: 16px;
    background: var(--accent-tint);
    color: var(--ef-accent-deep);
    border-radius: 12px;
    flex-wrap: wrap;
  }
  .plan-card > div { flex: 1; min-width: 0; color: var(--ef-ink); }
  [data-theme="dark"] .plan-card { background: var(--ef-accent-soft); }

  .action-row.danger .b500 { color: var(--ef-danger); }
`;

window.Settings = Settings;