/** Settings view component for the Maintenance Supporter panel. */

import { LitElement, html, css, nothing } from "lit";
import { property, state } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import type { HomeAssistant, AdvancedFeatures, BudgetStatus, HAUser } from "../types";
import { t } from "../styles";
import { UserService } from "../user-service";
import { OBJECT_COLUMNS, sanitizeColumns } from "../helpers/object-columns";
import { downloadTextFile } from "../helpers/download";

/* Settings response shape from WS maintenance_supporter/settings */
interface SettingsResponse {
  features: AdvancedFeatures;
  admin_panel_user_ids?: string[];
  operator_write_enabled?: boolean;
  objects_table_columns?: string[];
  /** v2.21: template-gallery curation — hidden template ids. */
  disabled_template_ids?: string[];
  general: {
    default_warning_days: number;
    notifications_enabled: boolean;
    notify_service: string;
    // Shared pickable-target list computed server-side (build_notify_targets),
    // so the picker matches the options-flow dropdown exactly. Optional for
    // backward-compat with an older backend that didn't send it.
    notify_targets?: string[];
    panel_enabled: boolean;
    panel_title: string;
  };
  notifications: {
    due_soon_enabled: boolean;
    due_soon_interval_hours: number;
    overdue_enabled: boolean;
    overdue_interval_hours: number;
    triggered_enabled: boolean;
    triggered_interval_hours: number;
    quiet_hours_enabled: boolean;
    quiet_hours_start: string;
    quiet_hours_end: string;
    max_per_day: number;
    bundling_enabled: boolean;
    bundle_threshold: number;
    reminder_lead_days: number[];
    scope_view_id: string;
  };
  actions: {
    complete_enabled: boolean;
    skip_enabled: boolean;
    snooze_enabled: boolean;
    snooze_duration_hours: number;
    weekly_digest_enabled: boolean;
    warranty_reminder_enabled: boolean;
    warranty_reminder_days: number;
  };
  budget: {
    monthly: number;
    yearly: number;
    alerts_enabled: boolean;
    alert_threshold_pct: number;
    currency: string;
    currency_symbol: string;
  };
  // v2.10.0 archive automation (panel-managed). Optional for forward-compat
  // with a backend that predates the feature.
  archive?: {
    oneoff_days: number;
    delete_archived_oneoff_days: number;
  };
  vacation: {
    enabled: boolean;
    start: string | null;
    end: string | null;
    buffer_days: number;
    exempt_task_ids: string[];
    is_active: boolean;
    window_end: string | null;
  };
}

interface VacationPreviewRow {
  task_id: string;
  entry_id: string;
  object_name: string;
  task_name: string;
  kind: "time_based" | "sensor_based";
  confidence: "deterministic" | "estimated" | "unpredictable";
  events: Array<{ date: string; status: "due_soon" | "overdue" | "triggered_est" }>;
  will_suppress: boolean;
}

// Keep in lockstep with const.BUDGET_CURRENCIES (keys + order). Parity is
// enforced by tests/test_frontend_const_parity.py (drift fails CI).
const CURRENCIES = [
  "EUR", "USD", "GBP", "JPY", "CHF", "CAD", "AUD", "NZD", "CNY", "INR", "BRL",
  "CZK", "PLN", "RUB", "SEK", "NOK", "DKK", "UAH",
];

export class MaintenanceSettingsView extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ attribute: false }) public features!: AdvancedFeatures;
  @property({ attribute: false }) public budget: BudgetStatus | null = null;

  @state() private _settings: SettingsResponse | null = null;
  @state() private _loading = true;
  @state() private _importCsv = "";
  @state() private _importLoading = false;
  @state() private _includeHistory = true;
  @state() private _toast = "";
  @state() private _testingNotification = false;
  @state() private _users: HAUser[] = [];
  @state() private _savedViews: Array<{ id: string; name: string }> = [];

  // Vacation mode section state (v1.2.0)
  @state() private _vacEnabled = false;
  @state() private _vacStart = "";
  @state() private _vacEnd = "";
  @state() private _vacBuffer = 3;
  @state() private _vacExempt = new Set<string>();
  @state() private _vacIsActive = false;
  @state() private _vacWindowEnd: string | null = null;
  @state() private _vacAllTasks: Array<{ entry_id: string; object_name: string; task_id: string; task_name: string }> = [];
  @state() private _vacPreview: VacationPreviewRow[] = [];
  @state() private _vacPreviewLoading = false;
  @state() private _vacSaving = false;

  // Print QR codes section state
  @state() private _qrObjects: Array<{ entry_id: string; name: string; task_count: number }> = [];
  @state() private _qrSelectedEntries = new Set<string>();
  @state() private _qrActions = new Set<string>(["view"]);
  @state() private _qrUrlMode: "server" | "local" | "companion" = "companion";
  @state() private _qrBatchLoading = false;
  @state() private _qrBatchResults: Array<{
    entry_id: string; task_id: string;
    object_name: string; task_name: string;
    action: string; svg: string;
  }> = [];
  @state() private _qrObjectsLoaded = false;

  // Export/Import selective-object picker state
  @state() private _exportObjects: Array<{ entry_id: string; name: string; task_count: number }> = [];
  @state() private _exportSelectedEntries = new Set<string>();
  @state() private _exportObjectsLoaded = false;
  @state() private _docArchiveLoading = false;

  private _loaded = false;
  private _userService: UserService | null = null;

  private get _lang(): string {
    return this.hass?.language || "en";
  }

  updated(changedProps: Map<string, unknown>): void {
    super.updated(changedProps);
    if (changedProps.has("hass") && this.hass && !this._loaded) {
      this._loaded = true;
      this._userService = new UserService(this.hass);
      this._loadSettings();
      this._loadUsers();
    } else if (changedProps.has("hass") && this.hass && this._userService) {
      this._userService.updateHass(this.hass);
    }
  }

  private async _loadUsers(): Promise<void> {
    if (!this._userService) return;
    try {
      this._users = await this._userService.getUsers();
    } catch {
      this._users = [];
    }
  }

  private async _loadSettings(): Promise<void> {
    this._loading = true;
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/settings",
      });
      this._settings = result as SettingsResponse;
      this._hydrateVacationFromSettings();
    } catch {
      /* ignore */
    }
    // Saved views feed the notification-scope picker (best-effort).
    try {
      const v = await this.hass.connection.sendMessagePromise<{ views: Array<{ id: string; name: string }> }>({
        type: "maintenance_supporter/views/list",
      });
      this._savedViews = v.views || [];
    } catch {
      /* ignore */
    }
    this._loading = false;
  }

  private _hydrateVacationFromSettings(): void {
    const v = this._settings?.vacation;
    if (!v) return;
    this._vacEnabled = v.enabled;
    this._vacStart = v.start || "";
    this._vacEnd = v.end || "";
    this._vacBuffer = v.buffer_days;
    this._vacExempt = new Set(v.exempt_task_ids || []);
    this._vacIsActive = v.is_active;
    this._vacWindowEnd = v.window_end;
  }

  private async _updateSetting(key: string, value: unknown): Promise<void> {
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/global/update",
        settings: { [key]: value },
      });
      this._settings = result as SettingsResponse;
      this._showToast(t("settings_saved", this._lang));
      this.dispatchEvent(new CustomEvent("settings-changed"));
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private _sendTestNotification = async (): Promise<void> => {
    this._testingNotification = true;
    try {
      const res = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/global/test_notification",
      }) as { success: boolean; message?: string };
      const msg = res.message
        || (res.success ? t("test_notification_success", this._lang) : t("test_notification_failed", this._lang));
      this._showToast(msg);
    } catch {
      this._showToast(t("test_notification_failed", this._lang));
    } finally {
      this._testingNotification = false;
    }
  };

  private _showToast(msg: string): void {
    this._toast = msg;
    setTimeout(() => { this._toast = ""; }, 3000);
  }

  private _downloadFile(content: string, filename: string, mime: string): void {
    // Companion-app safe download (target=_blank + DOM + deferred revoke).
    downloadTextFile(content, filename, mime);
  }

  // --- Render ---

  render() {
    const L = this._lang;
    if (this._loading || !this._settings) {
      return html`<div class="settings-loading">Loading…</div>`;
    }

    return html`
      ${this._renderFeatures(L)}
      ${this._renderPanelAccess(L)}
      ${this._renderGeneral(L)}
      ${this._renderObjectsColumns(L)}
      ${this._settings.general.notifications_enabled ? this._renderNotifications(L) : nothing}
      ${this.features.budget ? this._renderBudget(L) : nothing}
      ${this._renderArchive(L)}
      ${this._renderVacation(L)}
      ${this._renderPrintQr(L)}
      ${this._renderImportExport(L)}
      ${this._renderTemplateToggles(L)}
      ${this._toast ? html`<div class="settings-toast">${this._toast}</div>` : nothing}
    `;
  }

  /** v2.3.0 Phase 6: deep-link target. Called by the panel after a section
   *  strategy banner click navigates here with ms_action=open_<key>.
   *  Scrolls the requested settings section into view; no-op if not found. */
  public scrollToSection(target: string): void {
    requestAnimationFrame(() => {
      const sr = this.shadowRoot;
      if (!sr) return;
      const el = sr.querySelector<HTMLElement>(`[data-section="${target}"]`)
        ?? sr.querySelector<HTMLElement>(`[data-section-alt="${target}"]`);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  }

  // --- Section: Panel Access (1.0.44+) ---

  private _renderPanelAccess(L: string) {
    const selected = new Set(this._settings!.admin_panel_user_ids || []);
    const nonAdmins = this._users.filter((u) => !u.is_admin);
    // v2.8.4: the allowlist only takes effect while delegation is on. Default
    // off → content edits stay admin-only; we hide the user list so selecting
    // someone while nothing applies can't read as "they can now edit".
    const writeEnabled = this._settings!.operator_write_enabled ?? false;

    const toggle = (uid: string, on: boolean): void => {
      const next = new Set(selected);
      if (on) next.add(uid); else next.delete(uid);
      this._updateSetting("admin_panel_user_ids", [...next]);
    };

    return html`
      <div class="settings-section">
        <h3>${t("settings_panel_access", L)} ${writeEnabled && selected.size > 0 ? html`<span class="section-badge">${selected.size}</span>` : nothing}</h3>
        <p class="section-desc">${t("settings_panel_access_desc", L)}</p>
        <label class="setting-row">
          <span>
            <span class="setting-label">${t("settings_operator_write", L)}</span>
            <span class="setting-desc">${t("settings_operator_write_desc", L)}</span>
          </span>
          <input type="checkbox"
            .checked=${writeEnabled}
            @change=${(e: Event) => this._updateSetting("operator_write_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${!writeEnabled
          ? nothing
          : nonAdmins.length === 0
            ? html`<div class="setting-row hint">${t("no_non_admin_users", L)}</div>`
            : nonAdmins.map((u) => html`
              <label class="setting-row">
                <span>
                  <span class="setting-label">${u.name || u.id.slice(0, 8)}</span>
                  <span class="setting-desc">${u.is_owner ? t("owner_label", L) : ""}</span>
                </span>
                <input type="checkbox"
                  .checked=${selected.has(u.id)}
                  @change=${(e: Event) => toggle(u.id, (e.target as HTMLInputElement).checked)} />
              </label>
            `)}
      </div>
    `;
  }

  // --- Section: Features ---

  private _renderFeatures(L: string) {
    const f = this._settings!.features;
    // data-section="settings" makes this the default landing target for
    // generic "open settings" deep links. Groups CRUD lives in the global
    // options flow (Configure button on the integration entry) so a
    // "groups" target also lands here as the closest match.
    const items: { key: keyof AdvancedFeatures; settingKey: string; label: string; desc: string }[] = [
      { key: "adaptive", settingKey: "advanced_adaptive_visible", label: t("feat_adaptive", L), desc: t("feat_adaptive_desc", L) },
      { key: "predictions", settingKey: "advanced_predictions_visible", label: t("feat_predictions", L), desc: t("feat_predictions_desc", L) },
      { key: "seasonal", settingKey: "advanced_seasonal_visible", label: t("feat_seasonal", L), desc: t("feat_seasonal_desc", L) },
      { key: "environmental", settingKey: "advanced_environmental_visible", label: t("feat_environmental", L), desc: t("feat_environmental_desc", L) },
      { key: "budget", settingKey: "advanced_budget_visible", label: t("feat_budget", L), desc: t("feat_budget_desc", L) },
      { key: "groups", settingKey: "advanced_groups_visible", label: t("feat_groups", L), desc: t("feat_groups_desc", L) },
      { key: "checklists", settingKey: "advanced_checklists_visible", label: t("feat_checklists", L), desc: t("feat_checklists_desc", L) },
      { key: "schedule_time", settingKey: "advanced_schedule_time_visible", label: t("feat_schedule_time", L), desc: t("feat_schedule_time_desc", L) },
      { key: "completion_actions", settingKey: "advanced_completion_actions_visible", label: t("feat_completion_actions", L), desc: t("feat_completion_actions_desc", L) },
    ];

    return html`
      <div class="settings-section" data-section="settings" data-section-alt="groups">
        <h3>${t("settings_features", L)}</h3>
        <p class="section-desc">${t("settings_features_desc", L)}</p>
        ${items.map((item) => html`
          <label class="setting-row">
            <span>
              <span class="setting-label">${item.label}</span>
              <span class="setting-desc">${item.desc}</span>
            </span>
            <input type="checkbox" .checked=${f[item.key]}
              @change=${(e: Event) => this._updateSetting(item.settingKey, (e.target as HTMLInputElement).checked)} />
          </label>
        `)}
      </div>
    `;
  }

  // --- Section: Objects table columns (#67) ---

  // --- Section: Template gallery curation (v2.21) ---

  @state() private _allTemplates: Array<{ id: string; name: string; category: string; disabled?: boolean }> = [];
  @state() private _templateCategories: Record<string, Record<string, string>> = {};
  @state() private _tplOpenGroups: Set<string> = new Set();

  // One-shot request guard: keyed on a plain flag, NOT on the result being
  // non-empty — an empty catalog answer would otherwise re-trigger the load
  // from render() forever (Lit update loop; caught by the settings tests).
  private _templatesRequested = false;

  private async _loadTemplates(): Promise<void> {
    if (this._templatesRequested) return;
    this._templatesRequested = true;
    try {
      const res = await this.hass.connection.sendMessagePromise<{
        templates: Array<{ id: string; name: string; category: string; disabled?: boolean }>;
        categories: Record<string, Record<string, string>>;
      }>({
        type: "maintenance_supporter/templates",
        language: this._lang,
      });
      this._allTemplates = res.templates || [];
      this._templateCategories = res.categories || {};
    } catch { /* section renders empty; retried on next open */ }
  }

  private _renderTemplateToggles(L: string) {
    this._loadTemplates();
    const hidden = new Set(this._settings!.disabled_template_ids || []);
    // v2.27: cluster by category (declaration order = display order) so the
    // growing catalog stays scannable — each group gets a header with its
    // icon, an enabled/total count and a toggle-all checkbox.
    const byCat = new Map<string, typeof this._allTemplates>();
    for (const catId of Object.keys(this._templateCategories)) byCat.set(catId, []);
    for (const tpl of this._allTemplates) {
      if (!byCat.has(tpl.category)) byCat.set(tpl.category, []);
      byCat.get(tpl.category)!.push(tpl);
    }
    const catName = (catId: string) =>
      (this._templateCategories[catId]?.["name_" + L] as string)
      || (this._templateCategories[catId]?.name_en as string)
      || catId;
    return html`
      <div class="settings-section" data-section="templates">
        <h3>${t("settings_templates_label", L)}</h3>
        <p class="section-desc">${t("settings_templates_hint", L)}</p>
        ${[...byCat.entries()].filter(([, tpls]) => tpls.length > 0).map(([catId, tpls]) => {
          const enabled = tpls.filter((tpl) => !hidden.has(tpl.id)).length;
          // Collapsed by default (user request): the gallery lists 30+
          // templates — folded groups with an enabled/total count keep the
          // settings page short; expand only what you're curating.
          const open = this._tplOpenGroups.has(catId);
          return html`
            <div class="tpl-group">
              <div
                class="tpl-group-head"
                role="button"
                tabindex="0"
                @click=${() => this._toggleTplGroupOpen(catId)}
                @keydown=${(e: KeyboardEvent) => {
                  if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    this._toggleTplGroupOpen(catId);
                  }
                }}
              >
                <ha-icon class="tpl-chevron" icon=${open ? "mdi:chevron-down" : "mdi:chevron-right"}></ha-icon>
                <ha-icon icon=${(this._templateCategories[catId]?.icon as string) || "mdi:folder-outline"}></ha-icon>
                <span class="tpl-group-name">${catName(catId)}</span>
                <span class="tpl-group-count">${enabled}/${tpls.length}</span>
                <input
                  type="checkbox"
                  title=${t("settings_templates_toggle_group", L)}
                  .checked=${enabled === tpls.length}
                  @click=${(e: Event) => e.stopPropagation()}
                  @change=${(e: Event) =>
                    this._toggleTemplateGroup(tpls.map((tpl) => tpl.id), (e.target as HTMLInputElement).checked)}
                />
              </div>
              ${open
                ? tpls.map((tpl) => html`
                    <label class="setting-row tpl-row">
                      <span class="setting-label">${tpl.name}</span>
                      <input
                        type="checkbox"
                        .checked=${!hidden.has(tpl.id)}
                        @change=${(e: Event) => this._toggleTemplate(tpl.id, (e.target as HTMLInputElement).checked)}
                      />
                    </label>
                  `)
                : nothing}
            </div>
          `;
        })}
      </div>
    `;
  }

  private _toggleTemplate(id: string, visible: boolean): void {
    const hidden = new Set(this._settings!.disabled_template_ids || []);
    if (visible) hidden.delete(id);
    else hidden.add(id);
    this._updateSetting("disabled_template_ids", [...hidden]);
  }

  /** Expand/collapse one gallery group (collapsed by default). */
  private _toggleTplGroupOpen(catId: string): void {
    const next = new Set(this._tplOpenGroups);
    if (next.has(catId)) next.delete(catId);
    else next.add(catId);
    this._tplOpenGroups = next;
  }

  /** Toggle-all for one category group in the template gallery. */
  private _toggleTemplateGroup(ids: string[], visible: boolean): void {
    const hidden = new Set(this._settings!.disabled_template_ids || []);
    for (const id of ids) {
      if (visible) hidden.delete(id);
      else hidden.add(id);
    }
    this._updateSetting("disabled_template_ids", [...hidden]);
  }

  private _renderObjectsColumns(L: string) {
    const selected = sanitizeColumns(this._settings!.objects_table_columns);
    return html`
      <div class="settings-section" data-section="objects_table_columns">
        <h3>${t("objects_table_columns_label", L)}</h3>
        <p class="section-desc">${t("objects_table_columns_hint", L)}</p>
        ${OBJECT_COLUMNS.map((col) => html`
          <label class="setting-row">
            <span class="setting-label">${t(col.labelKey, L)}</span>
            <input
              type="checkbox"
              .checked=${selected.includes(col.key)}
              ?disabled=${!!col.required}
              @change=${(e: Event) => this._toggleColumn(col.key, (e.target as HTMLInputElement).checked)}
            />
          </label>
        `)}
      </div>
    `;
  }

  private _toggleColumn(key: string, on: boolean): void {
    const current = new Set(sanitizeColumns(this._settings!.objects_table_columns));
    if (on) current.add(key);
    else current.delete(key);
    // Persist in canonical order; required columns are always kept.
    const next = OBJECT_COLUMNS
      .filter((c) => c.required || current.has(c.key))
      .map((c) => c.key);
    this._updateSetting("objects_table_columns", next);
  }

  // --- Section: General ---

  private _renderGeneral(L: string) {
    const g = this._settings!.general;
    // Suggestible notify targets for the picker below come from the backend
    // (build_notify_targets → general.notify_targets): legacy notify services +
    // notify entities minus the generic send_message, plus the current saved
    // value. Sharing the server list keeps this picker in lockstep with the
    // options-flow dropdown. The <datalist> keeps the input free-text so
    // custom / not-yet-loaded values still work.
    const notifyServices = g.notify_targets ?? [];
    const b = this._settings!.budget;
    return html`
      <div class="settings-section">
        <h3>${t("settings_general", L)}</h3>
        <label class="setting-row">
          <span class="setting-label">${t("settings_default_warning", L)}</span>
          <input type="number" min="1" max="365" .value=${String(g.default_warning_days)}
            @change=${(e: Event) => {
              const v = parseInt((e.target as HTMLInputElement).value, 10);
              if (v >= 1 && v <= 365) this._updateSetting("default_warning_days", v);
            }} />
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_currency", L)}</span>
          <select @change=${(e: Event) => this._updateSetting("budget_currency", (e.target as HTMLSelectElement).value)}>
            ${CURRENCIES.map((c) => html`<option value=${c} ?selected=${b.currency === c}>${c}</option>`)}
          </select>
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_panel_enabled", L)}</span>
          <input type="checkbox" .checked=${g.panel_enabled}
            @change=${(e: Event) => this._updateSetting("panel_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${g.panel_enabled ? html`
          <label class="setting-row">
            <span class="setting-label">${t("settings_panel_title", L)}</span>
            <input type="text" .value=${g.panel_title ?? ""}
              placeholder="Maintenance"
              maxlength="50"
              @change=${(e: Event) => this._updateSetting("panel_title", (e.target as HTMLInputElement).value.trim())} />
          </label>
        ` : ""}
        <label class="setting-row">
          <span class="setting-label">${t("settings_notifications", L)}</span>
          <input type="checkbox" .checked=${g.notifications_enabled}
            @change=${(e: Event) => this._updateSetting("notifications_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${g.notifications_enabled ? html`
          <label class="setting-row">
            <span class="setting-label">${t("settings_notify_service", L)}</span>
            <input type="text" list="ms-notify-services" .value=${g.notify_service}
              @change=${(e: Event) => this._updateSetting("notify_service", (e.target as HTMLInputElement).value.trim())} />
            <datalist id="ms-notify-services">
              ${notifyServices.map((s) => html`<option value=${s}></option>`)}
            </datalist>
          </label>
          <div class="setting-row">
            <span class="setting-label">${t("test_notification", L)}</span>
            <button class="ha-button secondary"
              ?disabled=${!g.notify_service || this._testingNotification}
              @click=${this._sendTestNotification}>
              ${this._testingNotification ? t("testing", L) : t("send_test", L)}
            </button>
          </div>
        ` : nothing}
      </div>
    `;
  }

  // --- Section: Notifications ---

  private _renderNotifications(L: string) {
    const n = this._settings!.notifications;
    const a = this._settings!.actions;
    return html`
      <div class="settings-section">
        <h3>${t("settings_notifications", L)}</h3>

        <label class="setting-row">
          <span>
            <span class="setting-label">${t("settings_notify_due_soon", L)}</span>
          </span>
          <input type="checkbox" .checked=${n.due_soon_enabled}
            @change=${(e: Event) => this._updateSetting("notify_due_soon_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${n.due_soon_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_interval_hours", L)}</span>
            <input type="number" min="0" max="720" .value=${String(n.due_soon_interval_hours)}
              @change=${(e: Event) => this._updateSetting("notify_due_soon_interval_hours", parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
          </label>
        ` : nothing}

        <label class="setting-row">
          <span>
            <span class="setting-label">${t("settings_notify_overdue", L)}</span>
          </span>
          <input type="checkbox" .checked=${n.overdue_enabled}
            @change=${(e: Event) => this._updateSetting("notify_overdue_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${n.overdue_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_interval_hours", L)}</span>
            <input type="number" min="0" max="720" .value=${String(n.overdue_interval_hours)}
              @change=${(e: Event) => this._updateSetting("notify_overdue_interval_hours", parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
          </label>
        ` : nothing}

        <label class="setting-row">
          <span>
            <span class="setting-label">${t("settings_notify_triggered", L)}</span>
          </span>
          <input type="checkbox" .checked=${n.triggered_enabled}
            @change=${(e: Event) => this._updateSetting("notify_triggered_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${n.triggered_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_interval_hours", L)}</span>
            <input type="number" min="0" max="720" .value=${String(n.triggered_interval_hours)}
              @change=${(e: Event) => this._updateSetting("notify_triggered_interval_hours", parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
          </label>
        ` : nothing}

        <label class="setting-row">
          <span class="setting-label">${t("settings_quiet_hours", L)}</span>
          <input type="checkbox" .checked=${n.quiet_hours_enabled}
            @change=${(e: Event) => this._updateSetting("quiet_hours_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${n.quiet_hours_enabled ? html`
          <div class="setting-row sub-row">
            <span class="setting-desc">${t("settings_quiet_start", L)}</span>
            <input type="time" .value=${n.quiet_hours_start}
              @change=${(e: Event) => this._updateSetting("quiet_hours_start", (e.target as HTMLInputElement).value)} />
          </div>
          <div class="setting-row sub-row">
            <span class="setting-desc">${t("settings_quiet_end", L)}</span>
            <input type="time" .value=${n.quiet_hours_end}
              @change=${(e: Event) => this._updateSetting("quiet_hours_end", (e.target as HTMLInputElement).value)} />
          </div>
        ` : nothing}

        <label class="setting-row">
          <span class="setting-label">${t("settings_max_per_day", L)}</span>
          <input type="number" min="0" max="100" .value=${String(n.max_per_day)}
            @change=${(e: Event) => this._updateSetting("max_notifications_per_day", parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
        </label>

        <label class="setting-row">
          <span class="setting-label">${t("settings_bundling", L)}</span>
          <input type="checkbox" .checked=${n.bundling_enabled}
            @change=${(e: Event) => this._updateSetting("notification_bundling_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${n.bundling_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_bundle_threshold", L)}</span>
            <input type="number" min="2" max="20" .value=${String(n.bundle_threshold)}
              @change=${(e: Event) => this._updateSetting("notification_bundle_threshold", parseInt((e.target as HTMLInputElement).value, 10) || 2)} />
          </label>
        ` : nothing}
        <label class="setting-row">
          <span class="setting-label">${t("settings_reminder_leads", L)}</span>
          <input type="text" placeholder="14, 3, 0"
            .value=${(n.reminder_lead_days || []).join(", ")}
            @change=${(e: Event) => {
              const leads = (e.target as HTMLInputElement).value
                .split(",")
                .map((s) => parseInt(s.trim(), 10))
                .filter((v) => Number.isInteger(v) && v >= 0 && v <= 365);
              this._updateSetting("reminder_lead_days", [...new Set(leads)]);
            }} />
        </label>
        <div class="setting-hint">${t("settings_reminder_leads_hint", L)}</div>
        <label class="setting-row">
          <span class="setting-label">${t("settings_notify_scope", L)}</span>
          <select
            .value=${n.scope_view_id || ""}
            @change=${(e: Event) => this._updateSetting("notify_scope_view_id", (e.target as HTMLSelectElement).value)}
          >
            <option value="" ?selected=${!n.scope_view_id}>${t("settings_notify_scope_all", L)}</option>
            ${this._savedViews.map(
              (v) => html`<option value=${v.id} ?selected=${n.scope_view_id === v.id}>${v.name}</option>`
            )}
          </select>
        </label>
        <div class="setting-hint">${t("settings_notify_scope_hint", L)}</div>

        <h4 style="margin: 16px 0 8px; font-size: 14px;">${t("settings_actions", L)}</h4>
        <label class="setting-row">
          <span class="setting-label">${t("settings_action_complete", L)}</span>
          <input type="checkbox" .checked=${a.complete_enabled}
            @change=${(e: Event) => this._updateSetting("action_complete_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_action_skip", L)}</span>
          <input type="checkbox" .checked=${a.skip_enabled}
            @change=${(e: Event) => this._updateSetting("action_skip_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_action_snooze", L)}</span>
          <input type="checkbox" .checked=${a.snooze_enabled}
            @change=${(e: Event) => this._updateSetting("action_snooze_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${a.snooze_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_snooze_hours", L)}</span>
            <input type="number" min="1" max="168" .value=${String(a.snooze_duration_hours)}
              @change=${(e: Event) => this._updateSetting("snooze_duration_hours", parseInt((e.target as HTMLInputElement).value, 10) || 4)} />
          </label>
        ` : nothing}
        <label class="setting-row">
          <span class="setting-label">${t("settings_weekly_digest", L)}</span>
          <input type="checkbox" .checked=${a.weekly_digest_enabled}
            @change=${(e: Event) => this._updateSetting("weekly_digest_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        <div class="setting-hint">${t("settings_weekly_digest_hint", L)}</div>
        <label class="setting-row">
          <span class="setting-label">${t("settings_warranty_reminder", L)}</span>
          <input type="checkbox" .checked=${a.warranty_reminder_enabled}
            @change=${(e: Event) => this._updateSetting("warranty_reminder_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${a.warranty_reminder_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_warranty_reminder_days", L)}</span>
            <input type="number" min="1" max="365" .value=${String(a.warranty_reminder_days)}
              @change=${(e: Event) => this._updateSetting("warranty_reminder_days", parseInt((e.target as HTMLInputElement).value, 10) || 30)} />
          </label>
        ` : nothing}
        <div class="setting-hint">${t("settings_warranty_reminder_hint", L)}</div>
      </div>
    `;
  }

  // --- Section: Budget ---

  private _renderBudget(L: string) {
    const b = this._settings!.budget;
    return html`
      <div class="settings-section" data-section="budget">
        <h3>${t("settings_budget", L)}</h3>
        <label class="setting-row">
          <span class="setting-label">${t("settings_budget_monthly", L)}</span>
          <input type="number" min="0" step="0.01" .value=${String(b.monthly)}
            @change=${(e: Event) => this._updateSetting("budget_monthly", parseFloat((e.target as HTMLInputElement).value) || 0)} />
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_budget_yearly", L)}</span>
          <input type="number" min="0" step="0.01" .value=${String(b.yearly)}
            @change=${(e: Event) => this._updateSetting("budget_yearly", parseFloat((e.target as HTMLInputElement).value) || 0)} />
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_budget_alerts", L)}</span>
          <input type="checkbox" .checked=${b.alerts_enabled}
            @change=${(e: Event) => this._updateSetting("budget_alerts_enabled", (e.target as HTMLInputElement).checked)} />
        </label>
        ${b.alerts_enabled ? html`
          <label class="setting-row sub-row">
            <span class="setting-desc">${t("settings_budget_threshold", L)}</span>
            <input type="number" min="1" max="100" .value=${String(b.alert_threshold_pct)}
              @change=${(e: Event) => this._updateSetting("budget_alert_threshold", parseInt((e.target as HTMLInputElement).value, 10) || 80)} />
          </label>
        ` : nothing}
      </div>
    `;
  }

  // --- Section: Archive & retention (v2.10.0) ---

  private _renderArchive(L: string) {
    const a = this._settings!.archive ?? { oneoff_days: 14, delete_archived_oneoff_days: 0 };
    return html`
      <div class="settings-section" data-section="archive">
        <h3>${t("settings_archive", L)}</h3>
        <p class="section-desc">${t("settings_archive_desc", L)}</p>
        <label class="setting-row">
          <span class="setting-label">${t("settings_archive_oneoff_days", L)}</span>
          <input type="number" min="0" max="3650" step="1" .value=${String(a.oneoff_days)}
            @change=${(e: Event) => this._updateSetting("archive_oneoff_days", parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
        </label>
        <label class="setting-row">
          <span class="setting-label">${t("settings_delete_archived_oneoff_days", L)}</span>
          <input type="number" min="0" max="3650" step="1" .value=${String(a.delete_archived_oneoff_days)}
            @change=${(e: Event) => this._updateSetting("delete_archived_oneoff_days", parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
        </label>
      </div>
    `;
  }

  // --- Section: Import/Export ---

  // --- Section: Vacation mode (v1.2.0) ---

  private _renderVacation(L: string) {
    const isStale = this._vacEnabled && !this._vacIsActive && this._vacWindowEnd
      && new Date(this._vacWindowEnd) < new Date();
    const exemptCount = this._vacExempt.size;
    return html`
      <div class="settings-section vacation-section" data-section="vacation">
        <h3>
          ${t("vacation_title", L)}
          ${this._vacIsActive
            ? html`<span class="vac-badge active">${t("vacation_active", L)}</span>`
            : nothing}
          ${isStale
            ? html`<span class="vac-badge stale">${t("vacation_ended", L)}</span>`
            : nothing}
        </h3>
        <p class="section-desc">${t("vacation_desc", L)}</p>

        <label class="vac-toggle">
          <input type="checkbox" .checked=${this._vacEnabled}
            @change=${(e: Event) => this._toggleVacationEnabled((e.target as HTMLInputElement).checked)} />
          ${t("vacation_enable", L)}
        </label>

        <div class="vac-grid">
          <label class="vac-field">
            <span class="filter-label">${t("vacation_start", L)}</span>
            <input type="date" .value=${this._vacStart}
              @change=${(e: Event) => this._setVacationDate("start", (e.target as HTMLInputElement).value)} />
          </label>
          <label class="vac-field">
            <span class="filter-label">${t("vacation_end", L)}</span>
            <input type="date" .value=${this._vacEnd}
              @change=${(e: Event) => this._setVacationDate("end", (e.target as HTMLInputElement).value)} />
          </label>
          <label class="vac-field">
            <span class="filter-label">${t("vacation_buffer", L)}</span>
            <input type="number" min="0" max="14" .value=${String(this._vacBuffer)}
              @change=${(e: Event) => this._setVacationBuffer(parseInt((e.target as HTMLInputElement).value, 10) || 0)} />
          </label>
        </div>

        <details class="vac-exempt-panel">
          <summary>
            ${t("vacation_exempt_title", L)}
            ${exemptCount > 0 ? html`<span class="section-badge">${exemptCount}</span>` : nothing}
          </summary>
          <p class="section-desc">${t("vacation_exempt_desc", L)}</p>
          ${this._vacAllTasks.length === 0
            ? html`<button @click=${this._loadAllTasksForVacation}>${t("vacation_load_tasks", L)}</button>`
            : html`
              <div class="vac-task-list">
                ${this._renderVacationTaskList(L)}
              </div>
            `}
        </details>

        ${this._vacStart && this._vacEnd ? html`
          <div class="vac-preview-toolbar">
            <button @click=${this._loadVacationPreview} ?disabled=${this._vacPreviewLoading}>
              ${this._vacPreviewLoading ? "…" : t("vacation_preview_btn", L)}
            </button>
            ${this._vacPreview.length > 0
              ? html`<span class="vac-preview-count">${this._vacPreview.length} ${t("vacation_preview_affected", L)}</span>`
              : nothing}
          </div>
          ${this._vacPreview.length > 0 ? this._renderVacationPreview(L) : nothing}
        ` : nothing}

        ${this._vacIsActive || isStale
          ? html`<button class="vac-end-now" @click=${this._endVacationNow}>
              ${t("vacation_end_now", L)}
            </button>`
          : nothing}
      </div>
    `;
  }

  private _renderVacationTaskList(L: string) {
    // Group by object_name; within each object sort by task_name (alphabetical, #40-style)
    const byObj = new Map<string, typeof this._vacAllTasks>();
    for (const t of this._vacAllTasks) {
      const arr = byObj.get(t.object_name) || [];
      arr.push(t);
      byObj.set(t.object_name, arr);
    }
    const sortedObjs = [...byObj.entries()]
      .sort(([a], [b]) => a.localeCompare(b));

    return sortedObjs.map(([objName, tasks]) => html`
      <div class="vac-task-group">
        <div class="vac-task-group-name">${objName || t("no_objects", L)}</div>
        ${tasks
          .sort((a, b) => a.task_name.localeCompare(b.task_name))
          .map((task) => html`
            <label class="vac-task-row">
              <input type="checkbox"
                .checked=${this._vacExempt.has(task.task_id)}
                @change=${(e: Event) => this._toggleVacationExempt(task.task_id, (e.target as HTMLInputElement).checked)} />
              <span>${task.task_name}</span>
            </label>
          `)}
      </div>
    `);
  }

  private _renderVacationPreview(L: string) {
    return html`
      <div class="vac-preview-list">
        ${this._vacPreview.map((row) => {
          const eventLabel = row.events.map((e) => {
            const statusKey = `vacation_event_${e.status}`;
            return `${e.date} (${t(statusKey, L)})`;
          }).join(" · ");
          const isExempt = !row.will_suppress;
          return html`
            <div class="vac-preview-row ${isExempt ? "exempt" : ""}">
              <div class="vac-preview-info">
                <div class="vac-preview-name">
                  <strong>${row.object_name}</strong> · ${row.task_name}
                  ${row.kind === "sensor_based"
                    ? html`<span class="vac-preview-kind">${t("vacation_sensor_based", L)}</span>`
                    : nothing}
                </div>
                <div class="vac-preview-events">${eventLabel}</div>
              </div>
              <div class="vac-preview-actions">
                <button @click=${() => this._previewActionComplete(row)}>${t("qr_action_complete", L)}</button>
                ${row.kind === "time_based"
                  ? html`<button @click=${() => this._previewActionSkip(row)}>${t("qr_action_skip", L)}</button>`
                  : nothing}
                <button class=${isExempt ? "vac-notify-on" : ""}
                  @click=${() => this._toggleVacationExempt(row.task_id, !isExempt)}>
                  ${isExempt ? t("vacation_action_unsilence", L) : t("vacation_action_notify", L)}
                </button>
              </div>
            </div>
          `;
        })}
      </div>
    `;
  }

  // --- Vacation actions ---

  private async _loadAllTasksForVacation(): Promise<void> {
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/objects",
      }) as { objects: Array<{
        entry_id: string;
        object: { name: string };
        tasks: Array<{ id: string; name: string }>;
      }> };
      const flat: typeof this._vacAllTasks = [];
      for (const obj of result.objects || []) {
        for (const t of obj.tasks || []) {
          flat.push({
            entry_id: obj.entry_id,
            object_name: obj.object.name || "",
            task_id: t.id,
            task_name: t.name || "",
          });
        }
      }
      this._vacAllTasks = flat;
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private async _saveVacation(patch: Record<string, unknown>): Promise<void> {
    if (this._vacSaving) return;
    this._vacSaving = true;
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/vacation/update",
        ...patch,
      }) as SettingsResponse["vacation"];
      // Server is the source of truth — re-hydrate from response.
      this._vacEnabled = result.enabled;
      this._vacStart = result.start || "";
      this._vacEnd = result.end || "";
      this._vacBuffer = result.buffer_days;
      this._vacExempt = new Set(result.exempt_task_ids || []);
      this._vacIsActive = result.is_active;
      this._vacWindowEnd = result.window_end;
      // Notify the panel (so the Vacation tab can appear/disappear)
      this.dispatchEvent(new CustomEvent("settings-changed"));
    } catch (e: unknown) {
      const msg = (e as { message?: string })?.message || t("action_error", this._lang);
      this._showToast(msg);
    } finally {
      this._vacSaving = false;
    }
  }

  private _toggleVacationEnabled(on: boolean): void {
    this._saveVacation({ enabled: on });
  }

  private _setVacationDate(which: "start" | "end", value: string): void {
    const patch: Record<string, unknown> = {};
    patch[which] = value || null;
    this._saveVacation(patch);
  }

  private _setVacationBuffer(value: number): void {
    if (value < 0 || value > 14) return;
    this._saveVacation({ buffer_days: value });
  }

  private _toggleVacationExempt(taskId: string, on: boolean): void {
    const next = new Set(this._vacExempt);
    if (on) next.add(taskId); else next.delete(taskId);
    this._saveVacation({ exempt_task_ids: [...next] });
  }

  private async _loadVacationPreview(): Promise<void> {
    this._vacPreviewLoading = true;
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/vacation/preview",
      }) as { rows: VacationPreviewRow[] };
      this._vacPreview = result.rows || [];
    } catch {
      this._showToast(t("action_error", this._lang));
    } finally {
      this._vacPreviewLoading = false;
    }
  }

  private async _previewActionComplete(row: VacationPreviewRow): Promise<void> {
    try {
      await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/task/complete",
        entry_id: row.entry_id,
        task_id: row.task_id,
      });
      this._showToast(t("vacation_marked_complete", this._lang));
      await this._loadVacationPreview();
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private async _previewActionSkip(row: VacationPreviewRow): Promise<void> {
    try {
      await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/task/skip",
        entry_id: row.entry_id,
        task_id: row.task_id,
        reason: "Skipped before vacation",
      });
      this._showToast(t("vacation_marked_skip", this._lang));
      await this._loadVacationPreview();
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private async _endVacationNow(): Promise<void> {
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/vacation/end_now",
      }) as SettingsResponse["vacation"];
      this._vacEnabled = result.enabled;
      this._vacEnd = result.end || "";
      this._vacIsActive = result.is_active;
      this._vacWindowEnd = result.window_end;
      this.dispatchEvent(new CustomEvent("settings-changed"));
      this._showToast(t("vacation_ended", this._lang));
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  // --- Section: Print QR codes (v1.1.0) ---

  private _renderPrintQr(L: string) {
    const selectedCount = this._qrSelectedEntries.size || this._qrObjects.length;
    const actionCount = this._qrActions.size;
    const estimatedQrs = selectedCount * actionCount;
    const overLimit = estimatedQrs > 200;

    return html`
      <div class="settings-section qr-print-section">
        <h3>${t("qr_print_title", L)}</h3>
        <p class="section-desc">${t("qr_print_desc", L)}</p>

        ${!this._qrObjectsLoaded
          ? html`<button @click=${this._loadQrObjects}>${t("qr_print_load", L)}</button>`
          : html`
            <details open class="qr-filter-panel">
              <summary>${t("qr_print_filter", L)}</summary>

              <div class="qr-filter-group">
                <div class="qr-filter-label">${t("qr_print_objects", L)}</div>
                <div class="qr-object-list">
                  ${this._qrObjects.length === 0
                    ? html`<div class="hint">${t("no_objects", L)}</div>`
                    : this._qrObjects.map((obj) => html`
                      <label class="qr-object-row">
                        <input type="checkbox"
                          .checked=${this._qrSelectedEntries.size === 0 || this._qrSelectedEntries.has(obj.entry_id)}
                          @change=${(e: Event) => this._toggleQrObject(obj.entry_id, (e.target as HTMLInputElement).checked)} />
                        <span>${obj.name}</span>
                        <span class="qr-task-count">${obj.task_count}</span>
                      </label>
                    `)}
                </div>
              </div>

              <div class="qr-filter-group">
                <div class="qr-filter-label">${t("qr_print_actions", L)}</div>
                <div class="qr-action-chips">
                  ${["view", "complete", "skip"].map((a) => html`
                    <label class="qr-action-chip ${this._qrActions.has(a) ? "active" : ""}">
                      <input type="checkbox"
                        .checked=${this._qrActions.has(a)}
                        @change=${(e: Event) => this._toggleQrAction(a, (e.target as HTMLInputElement).checked)} />
                      ${t("qr_action_" + a, L)}
                    </label>
                  `)}
                </div>
              </div>

              <div class="qr-filter-group">
                <div class="qr-filter-label">${t("qr_print_url_mode", L)}</div>
                <select .value=${this._qrUrlMode}
                  @change=${(e: Event) => { this._qrUrlMode = (e.target as HTMLSelectElement).value as typeof this._qrUrlMode; }}>
                  <option value="companion">${t("qr_mode_companion", L)}</option>
                  <option value="local">${t("qr_mode_local", L)}</option>
                  <option value="server">${t("qr_mode_server", L)}</option>
                </select>
              </div>

              <div class="qr-filter-group qr-filter-actions">
                <div class="qr-estimate ${overLimit ? "error" : ""}">
                  ${t("qr_print_estimate", L)}: <strong>${estimatedQrs}</strong>
                  ${overLimit ? html` — ${t("qr_print_over_limit", L)}` : nothing}
                </div>
                <button
                  ?disabled=${this._qrBatchLoading || overLimit || actionCount === 0}
                  @click=${this._generateBatch}>
                  ${this._qrBatchLoading ? t("qr_print_generating", L) : t("qr_print_generate", L)}
                </button>
              </div>
            </details>

            ${this._qrBatchResults.length > 0
              ? html`
                <div class="qr-results-toolbar">
                  <span>${this._qrBatchResults.length} ${t("qr_print_ready", L)}</span>
                  <button @click=${this._printQrs}>${t("qr_print_print_button", L)}</button>
                </div>
                <div class="qr-print-grid">
                  ${this._qrBatchResults.map((q) => html`
                    <div class="qr-print-cell">
                      <div class="qr-svg">${unsafeHTML(q.svg)}</div>
                      <div class="qr-label">
                        <div class="qr-label-obj">${q.object_name}</div>
                        <div class="qr-label-task">${q.task_name}</div>
                        <div class="qr-label-action">${t("qr_action_" + q.action, L)}</div>
                      </div>
                    </div>
                  `)}
                </div>
              `
              : nothing}
          `}
      </div>
    `;
  }

  private async _loadQrObjects(): Promise<void> {
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/objects",
      }) as { objects: Array<{ entry_id: string; object: { name: string }; tasks: unknown[] }> };
      this._qrObjects = (result.objects || []).map((o) => ({
        entry_id: o.entry_id,
        name: o.object.name,
        task_count: (o.tasks || []).length,
      })).sort((a, b) => a.name.localeCompare(b.name));
      this._qrObjectsLoaded = true;
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private _toggleQrObject(entryId: string, on: boolean): void {
    const next = new Set(this._qrSelectedEntries);
    // First toggle off "all implicit" by materialising the current all-selected state
    if (next.size === 0) {
      for (const o of this._qrObjects) next.add(o.entry_id);
    }
    if (on) next.add(entryId); else next.delete(entryId);
    // If user re-selects everything, collapse back to "empty = all"
    if (next.size === this._qrObjects.length) next.clear();
    this._qrSelectedEntries = next;
  }

  private _toggleQrAction(action: string, on: boolean): void {
    const next = new Set(this._qrActions);
    if (on) next.add(action); else next.delete(action);
    this._qrActions = next;
  }

  private async _generateBatch(): Promise<void> {
    this._qrBatchLoading = true;
    this._qrBatchResults = [];
    try {
      const msg: Record<string, unknown> = {
        type: "maintenance_supporter/qr/batch_generate",
        actions: [...this._qrActions],
        url_mode: this._qrUrlMode,
      };
      if (this._qrSelectedEntries.size > 0) {
        msg.entry_ids = [...this._qrSelectedEntries];
      }
      const result = await this.hass.connection.sendMessagePromise<{
        qrs: Array<{
          entry_id: string; task_id: string;
          object_name: string; task_name: string;
          action: string; svg: string;
        }>;
      }>(msg);
      this._qrBatchResults = result.qrs || [];
      if (this._qrBatchResults.length === 0) {
        this._showToast(t("qr_print_empty", this._lang));
      }
    } catch (e: unknown) {
      const msg = (e as { message?: string })?.message || t("action_error", this._lang);
      this._showToast(msg);
    } finally {
      this._qrBatchLoading = false;
    }
  }

  private _printQrs(): void {
    // Open a clean popup window with only the QR grid + print stylesheet.
    // The earlier `window.print()` approach inherited the full HA shell
    // (sidebar, top bar, menu) because @media print rules in this Lit
    // component's shadow DOM don't reach those outer elements.
    if (this._qrBatchResults.length === 0) return;
    const L = this._lang;
    const cells = this._qrBatchResults.map((q) => {
      const actionLabel = t("qr_action_" + q.action, L);
      // Each cell: SVG + 3 label lines (object / task / action). The SVG
      // string already comes from the backend; embed verbatim.
      return `
        <div class="cell">
          <div class="qr">${q.svg}</div>
          <div class="label">
            <div class="obj">${this._escapeHtml(q.object_name)}</div>
            <div class="task">${this._escapeHtml(q.task_name)}</div>
            <div class="action">${this._escapeHtml(actionLabel)}</div>
          </div>
        </div>`;
    }).join("");

    const title = t("qr_print_title", L);
    const html = `<!DOCTYPE html>
<html lang="${this._escapeHtml(L)}">
<head>
  <meta charset="utf-8" />
  <title>${this._escapeHtml(title)}</title>
  <style>
    @page { size: A4; margin: 10mm; }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: #fff; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body { padding: 8mm; }
    .toolbar { padding-bottom: 6mm; display: flex; justify-content: space-between; align-items: center; }
    .toolbar h1 { font-size: 14pt; margin: 0; font-weight: 600; }
    .toolbar button { font: inherit; padding: 6px 14px; cursor: pointer; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
    .cell { border: 1px solid #ddd; border-radius: 4px; padding: 4mm; display: flex; flex-direction: column; align-items: center; gap: 3mm; page-break-inside: avoid; break-inside: avoid; }
    .cell .qr { width: 100%; max-width: 50mm; }
    .cell .qr svg { width: 100%; height: auto; display: block; }
    .label { text-align: center; width: 100%; font-size: 9pt; line-height: 1.25; word-break: break-word; }
    .label .obj { font-weight: 600; }
    .label .task { color: #444; }
    .label .action { color: #777; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2mm; }
    @media print {
      .toolbar { display: none; }
      body { padding: 0; }
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <h1>${this._escapeHtml(title)} — ${this._qrBatchResults.length}</h1>
    <button onclick="window.print()">${this._escapeHtml(t("qr_print_print_button", L))}</button>
  </div>
  <div class="grid">${cells}</div>
  <script>window.addEventListener("load", function () { setTimeout(function () { window.print(); }, 250); });</script>
</body>
</html>`;

    const win = window.open("", "_blank", "width=900,height=1100");
    if (!win) {
      // Popup blocker — fall back to the legacy in-place print so the user
      // still gets *something* (with the HA shell drawback they reported).
      window.print();
      return;
    }
    win.document.open();
    win.document.write(html);
    win.document.close();
  }

  private _escapeHtml(s: string): string {
    return s.replace(/[&<>"']/g, (c) => ({
      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
    }[c] as string));
  }

  private _renderImportExport(L: string) {
    return html`
      <div class="settings-section">
        <h3>${t("settings_import_export", L)}</h3>
        <div class="settings-actions">
          <label class="export-history-toggle">
            <input type="checkbox" .checked=${this._includeHistory}
              @change=${(e: Event) => { this._includeHistory = (e.target as HTMLInputElement).checked; }} />
            ${t("settings_include_history", L)}
          </label>
        </div>
        <div class="settings-actions">
          ${!this._exportObjectsLoaded
            ? html`<button @click=${this._loadExportObjects}>${t("settings_export_selection", L)}</button>`
            : html`
              <details class="qr-filter-panel">
                <summary>${t("settings_export_selection", L)}</summary>
                <div class="qr-object-list">
                  ${this._exportObjects.length === 0
                    ? html`<div class="hint">${t("no_objects", L)}</div>`
                    : this._exportObjects.map((obj) => html`
                      <label class="qr-object-row">
                        <input type="checkbox"
                          .checked=${this._exportSelectedEntries.size === 0 || this._exportSelectedEntries.has(obj.entry_id)}
                          @change=${(e: Event) => this._toggleExportObject(obj.entry_id, (e.target as HTMLInputElement).checked)} />
                        <span>${obj.name}</span>
                        <span class="qr-task-count">${obj.task_count}</span>
                      </label>
                    `)}
                </div>
              </details>
            `}
        </div>
        <div class="settings-actions">
          <button @click=${this._exportJson}>${t("settings_export_json", L)}</button>
          <button @click=${this._exportYaml}>${t("settings_export_yaml", L)}</button>
          <button @click=${this._exportCsv}>${t("settings_export_csv", L)}</button>
        </div>
        <div class="settings-actions docs-archive-block">
          <h4>${t("settings_docs_archive", L)}</h4>
          <p class="section-desc">${t("settings_docs_archive_hint", L)}</p>
          <div class="settings-actions">
            <button ?disabled=${this._docArchiveLoading} @click=${this._exportDocsArchive}>
              ${t("settings_docs_export_btn", L)}
            </button>
            <button ?disabled=${this._docArchiveLoading} @click=${this._triggerDocsArchiveImport}>
              ${this._docArchiveLoading ? "…" : t("settings_docs_import_btn", L)}
            </button>
            <input class="docs-archive-file" type="file" accept=".zip" hidden
              @change=${this._importDocsArchive} />
          </div>
        </div>
        <div class="import-section">
          <textarea class="import-area" .value=${this._importCsv}
            placeholder=${t("settings_import_placeholder", L)}
            @input=${(e: Event) => { this._importCsv = (e.target as HTMLTextAreaElement).value; }}
          ></textarea>
          <div class="settings-actions">
            <button ?disabled=${!this._importCsv.trim() || this._importLoading}
              @click=${this._importCsvAction}>
              ${this._importLoading ? "…" : t("settings_import_btn", L)}
            </button>
          </div>
        </div>
      </div>
    `;
  }

  // --- Export / Import actions ---

  private get _selectedEntryIds(): string[] | undefined {
    return this._exportSelectedEntries.size ? [...this._exportSelectedEntries] : undefined;
  }

  private async _loadExportObjects(): Promise<void> {
    try {
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/objects",
      }) as { objects: Array<{ entry_id: string; object: { name: string }; tasks: unknown[] }> };
      this._exportObjects = (result.objects || []).map((o) => ({
        entry_id: o.entry_id,
        name: o.object.name,
        task_count: (o.tasks || []).length,
      })).sort((a, b) => a.name.localeCompare(b.name));
      this._exportObjectsLoaded = true;
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private _toggleExportObject(entryId: string, on: boolean): void {
    const next = new Set(this._exportSelectedEntries);
    if (next.size === 0) {
      for (const o of this._exportObjects) next.add(o.entry_id);
    }
    if (on) next.add(entryId); else next.delete(entryId);
    if (next.size === this._exportObjects.length) next.clear();
    this._exportSelectedEntries = next;
  }

  private async _exportJson(): Promise<void> {
    try {
      const ids = this._selectedEntryIds;
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/export",
        format: "json",
        include_history: this._includeHistory,
        ...(ids ? { entry_ids: ids } : {}),
      }) as { data: string };
      const ts = new Date().toISOString().slice(0, 10);
      this._downloadFile(result.data, `maintenance_export_${ts}.json`, "application/json");
      this._showToast(t("settings_export_success", this._lang));
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private async _exportYaml(): Promise<void> {
    try {
      const ids = this._selectedEntryIds;
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/export",
        format: "yaml",
        include_history: this._includeHistory,
        ...(ids ? { entry_ids: ids } : {}),
      }) as { data: string };
      const ts = new Date().toISOString().slice(0, 10);
      this._downloadFile(result.data, `maintenance_export_${ts}.yaml`, "application/yaml");
      this._showToast(t("settings_export_success", this._lang));
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private async _exportCsv(): Promise<void> {
    try {
      const ids = this._selectedEntryIds;
      const result = await this.hass.connection.sendMessagePromise({
        type: "maintenance_supporter/csv/export",
        ...(ids ? { entry_ids: ids } : {}),
      }) as { csv: string };
      const ts = new Date().toISOString().slice(0, 10);
      this._downloadFile(result.csv, `maintenance_export_${ts}.csv`, "text/csv");
      this._showToast(t("settings_export_success", this._lang));
    } catch {
      this._showToast(t("action_error", this._lang));
    }
  }

  private async _importCsvAction(): Promise<void> {
    const content = this._importCsv.trim();
    if (!content) return;
    this._importLoading = true;
    try {
      // CSV exports start with the "object_name" header; anything else
      // (JSON `{`/`[` or YAML `version:`) goes to the structured importer,
      // which parses JSON and YAML alike.
      const isCsv = content.startsWith("object_name");
      const result = await this.hass.connection.sendMessagePromise(
        isCsv
          ? { type: "maintenance_supporter/csv/import", csv_content: content }
          : { type: "maintenance_supporter/json/import", json_content: content }
      ) as { created: number };
      const count = result.created ?? 0;
      this._showToast(t("settings_import_success", this._lang).replace("{count}", String(count)));
      this._importCsv = "";
      this.dispatchEvent(new CustomEvent("settings-changed"));
    } catch {
      this._showToast(t("action_error", this._lang));
    }
    this._importLoading = false;
  }

  // --- Documents archive (ZIP with file contents) ---

  private async _exportDocsArchive(): Promise<void> {
    this._docArchiveLoading = true;
    try {
      const raw = this._selectedEntryIds;
      const q = raw ? `?entry_ids=${encodeURIComponent(raw.join(","))}` : "";
      const signed = await this.hass.connection.sendMessagePromise<{ path: string }>({
        type: "auth/sign_path",
        path: `/api/maintenance_supporter/documents/archive${q}`,
        expires: 300,
      });
      const a = document.createElement("a");
      a.href = signed.path;
      a.download = "maintenance-documents.zip";
      document.body.appendChild(a);
      a.click();
      a.remove();
    } catch {
      this._showToast(t("action_error", this._lang));
    }
    this._docArchiveLoading = false;
  }

  private _triggerDocsArchiveImport(): void {
    const input = this.renderRoot.querySelector(".docs-archive-file") as HTMLInputElement | null;
    input?.click();
  }

  private async _importDocsArchive(e: Event): Promise<void> {
    const input = e.target as HTMLInputElement;
    const file = input.files?.[0];
    if (!file) return;
    this._docArchiveLoading = true;
    try {
      const form = new FormData();
      form.append("file", file, file.name);
      const resp = await fetch("/api/maintenance_supporter/documents/archive", {
        method: "POST",
        headers: { Authorization: `Bearer ${this.hass.auth?.data?.access_token ?? ""}` },
        body: form,
      });
      if (!resp.ok) {
        this._showToast(t("action_error", this._lang));
      } else {
        const result = (await resp.json()) as { blobs_written: number; documents_created: number };
        this._showToast(
          t("settings_docs_import_success", this._lang)
            .replace("{blobs}", String(result.blobs_written ?? 0))
            .replace("{docs}", String(result.documents_created ?? 0))
        );
        this.dispatchEvent(new CustomEvent("settings-changed"));
      }
    } catch {
      this._showToast(t("action_error", this._lang));
    }
    input.value = "";
    this._docArchiveLoading = false;
  }

  // --- Styles ---

  static styles = css`
    :host { display: block; }

    .settings-loading {
      text-align: center;
      padding: 32px;
      color: var(--secondary-text-color);
    }

    .settings-section {
      margin-bottom: 24px;
      padding: 16px;
      background: var(--card-background-color, #fff);
      border-radius: 12px;
      border: 1px solid var(--divider-color, #e0e0e0);
    }
    .settings-section h3 {
      margin: 0 0 4px 0;
      font-size: 16px;
    }
    .section-desc {
      font-size: 13px;
      color: var(--secondary-text-color);
      margin: 0 0 16px 0;
    }

    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--divider-color, #e0e0e0);
      cursor: pointer;
      gap: 12px;
    }
    /* v2.27: template gallery clustered by category */
    .tpl-group { margin-top: 14px; }
    .tpl-group-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0 6px;
      border-bottom: 2px solid var(--divider-color, #e0e0e0);
      cursor: pointer;
      font-weight: 600;
    }
    .tpl-group-head ha-icon { --mdc-icon-size: 18px; color: var(--primary-color); }
    .tpl-group-head .tpl-chevron { color: var(--secondary-text-color); }
    .tpl-group-head:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
    .tpl-group-name { flex: 1; }
    .tpl-group-count {
      font-size: 12px;
      color: var(--secondary-text-color);
      font-weight: 400;
    }
    .tpl-row { padding-left: 26px; }
    .setting-row:last-child { border-bottom: none; }
    .setting-row.sub-row {
      padding-left: 16px;
    }

    .setting-label { font-size: 14px; display: block; }
    .setting-desc { font-size: 12px; color: var(--secondary-text-color); display: block; }

    .setting-row input[type="checkbox"] {
      width: 18px; height: 18px; flex-shrink: 0;
    }
    .setting-row input[type="number"],
    .setting-row input[type="text"],
    .setting-row input[type="time"] {
      width: 120px;
      padding: 6px 8px;
      border: 1px solid var(--divider-color, #e0e0e0);
      border-radius: 4px;
      background: var(--card-background-color, #fff);
      color: var(--primary-text-color);
      font-size: 14px;
      flex-shrink: 0;
    }
    .setting-row input[type="number"] {
      text-align: right;
    }
    .setting-row select {
      padding: 6px 8px;
      border: 1px solid var(--divider-color, #e0e0e0);
      border-radius: 4px;
      background: var(--card-background-color, #fff);
      color: var(--primary-text-color);
      font-size: 14px;
      flex-shrink: 0;
    }

    .settings-actions {
      display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
    }
    .settings-actions button {
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid var(--divider-color, #e0e0e0);
      background: var(--card-background-color, #fff);
      color: var(--primary-text-color);
      cursor: pointer;
      font-size: 14px;
    }
    .settings-actions button:hover {
      background: var(--secondary-background-color, #f5f5f5);
    }
    .settings-actions button[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .export-history-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      cursor: pointer;
    }
    .export-history-toggle input { width: 16px; height: 16px; }

    .import-section { margin-top: 16px; }

    .import-area {
      width: 100%;
      min-height: 120px;
      padding: 8px;
      border: 1px solid var(--divider-color, #e0e0e0);
      border-radius: 8px;
      font-family: monospace;
      font-size: 12px;
      resize: vertical;
      background: var(--card-background-color, #fff);
      color: var(--primary-text-color);
      box-sizing: border-box;
    }

    .settings-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary-color, #03a9f4);
      color: #fff;
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(0,0,0,.3);
      animation: toast-in .3s ease;
    }
    @keyframes toast-in {
      from { opacity: 0; transform: translateX(-50%) translateY(16px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ─── Vacation mode section (v1.2.0) ─── */

    .vacation-section h3 {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .vac-badge {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .vac-badge.active {
      background: var(--success-color, #4caf50);
      color: #fff;
    }
    .vac-badge.stale {
      background: var(--warning-color, #ff9800);
      color: #fff;
    }
    .vac-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      margin: 8px 0 12px;
    }
    .vac-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 12px;
    }
    .vac-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .vac-field input {
      padding: 6px 8px;
      border: 1px solid var(--divider-color);
      border-radius: 4px;
      background: var(--card-background-color, #fff);
      color: var(--primary-text-color);
    }
    .vac-exempt-panel {
      border: 1px solid var(--divider-color);
      border-radius: 6px;
      padding: 10px;
      margin: 12px 0;
    }
    .vac-exempt-panel summary {
      cursor: pointer;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .section-badge {
      background: var(--primary-color, #03a9f4);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 8px;
      border-radius: 10px;
    }
    .vac-task-list {
      max-height: 280px;
      overflow-y: auto;
      margin-top: 8px;
    }
    .vac-task-group {
      margin: 8px 0;
    }
    .vac-task-group-name {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: var(--secondary-text-color);
      padding: 4px 0;
    }
    .vac-task-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 4px;
    }
    .vac-task-row:hover { background: var(--secondary-background-color, rgba(127,127,127,0.1)); }
    .vac-preview-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 12px 0 8px;
    }
    .vac-preview-count {
      color: var(--secondary-text-color);
      font-size: 13px;
    }
    .vac-preview-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .vac-preview-row {
      display: flex;
      gap: 12px;
      padding: 10px 12px;
      background: var(--secondary-background-color, rgba(127,127,127,0.08));
      border-radius: 6px;
      border-left: 3px solid var(--warning-color, #ff9800);
    }
    .vac-preview-row.exempt {
      border-left-color: var(--success-color, #4caf50);
    }
    .vac-preview-info { flex: 1; }
    .vac-preview-name { font-size: 14px; }
    .vac-preview-kind {
      font-size: 11px;
      color: var(--secondary-text-color);
      margin-left: 6px;
    }
    .vac-preview-events {
      font-size: 12px;
      color: var(--secondary-text-color);
      margin-top: 2px;
    }
    .vac-preview-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }
    .vac-preview-actions button {
      font-size: 12px;
      padding: 4px 10px;
    }
    .vac-notify-on { background: var(--success-color, #4caf50) !important; color: #fff; }
    .vac-end-now {
      margin-top: 12px;
      background: var(--error-color, #f44336);
      color: #fff;
    }

    /* ─── Print QR codes section (v1.1.0) ─── */

    .qr-filter-panel {
      border: 1px solid var(--divider-color);
      border-radius: 6px;
      padding: 12px;
      margin-top: 8px;
    }
    .qr-filter-panel > summary {
      cursor: pointer;
      font-weight: 500;
    }
    .qr-filter-group {
      margin-top: 12px;
    }
    .qr-filter-label {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: var(--secondary-text-color);
      margin-bottom: 4px;
    }
    .qr-object-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 4px 12px;
      max-height: 240px;
      overflow-y: auto;
    }
    .qr-object-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px;
      cursor: pointer;
      border-radius: 4px;
    }
    .qr-object-row:hover { background: var(--secondary-background-color, rgba(127,127,127,0.1)); }
    .qr-object-row > span:nth-of-type(1) { flex: 1; }
    .qr-task-count {
      color: var(--secondary-text-color);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .qr-action-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .qr-action-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 14px;
      border: 1px solid var(--divider-color);
      cursor: pointer;
      user-select: none;
    }
    .qr-action-chip.active {
      background: var(--primary-color, #03a9f4);
      color: #fff;
      border-color: transparent;
    }
    .qr-action-chip input { accent-color: currentColor; }

    .qr-filter-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .qr-estimate { font-size: 13px; }
    .qr-estimate.error { color: var(--error-color, #f44336); }

    .qr-results-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      padding: 8px 12px;
      background: var(--secondary-background-color, rgba(127,127,127,0.1));
      border-radius: 6px;
    }

    .qr-print-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }
    .qr-print-cell {
      border: 1px solid var(--divider-color);
      border-radius: 6px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: #fff;
      color: #000;
    }
    .qr-print-cell .qr-svg {
      width: 100%;
      max-width: 160px;
    }
    .qr-print-cell .qr-svg svg { width: 100%; height: auto; display: block; }
    .qr-label {
      margin-top: 6px;
      font-size: 11px;
      line-height: 1.3;
    }
    .qr-label-obj { font-weight: 600; }
    .qr-label-task { color: #444; }
    .qr-label-action {
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: 10px;
      color: #777;
    }

    /* ─── Print stylesheet ─── */
    @media print {
      /* Strip everything except the QR grid itself */
      :host { color: #000; background: #fff; }
      .qr-print-section h3,
      .qr-print-section .section-desc,
      .qr-filter-panel,
      .qr-results-toolbar,
      .settings-section:not(.qr-print-section),
      .settings-toast {
        display: none !important;
      }
      .qr-print-section { padding: 0; margin: 0; }
      .qr-print-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12mm 8mm;
        margin: 0;
      }
      .qr-print-cell {
        border: none;
        padding: 0;
        page-break-inside: avoid;
      }
      .qr-print-cell .qr-svg { max-width: 48mm; }
      .qr-label { font-size: 9pt; }
    }
  `;
}

customElements.define("maintenance-settings-view", MaintenanceSettingsView);