<template>
  <div
    class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
    <!-- Export Controls -->
    <div v-if="charterGenerated" class="export-controls no-print no-pdf">
      <div class="export-content">
        <div class="export-section">
          <h3 class="export-title">Export to:</h3>
          <div class="export-buttons">
            <button
              @click="exportPDF"
              class="export-btn primary"
              title="Download PDF">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path
                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14,2 14,8 20,8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <polyline points="10,9 9,9 8,9" />
              </svg>
              PDF
            </button>
            <button
              @click="handlePrint"
              class="export-btn"
              title="Print Document">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <polyline points="6,9 6,2 18,2 18,9" />
                <path
                  d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
                <rect x="6" y="14" width="12" height="8" />
              </svg>
              PRINT
            </button>
            <button
              @click="exportText"
              class="export-btn"
              title="Download Text">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path
                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14,2 14,8 20,8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <line x1="12" y1="9" x2="8" y2="9" />
              </svg>
              TXT
            </button>
            <button
              @click="exportMarkdown"
              class="export-btn"
              title="Download Markdown">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path
                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14,2 14,8 20,8" />
                <line x1="12" y1="18" x2="12" y2="12" />
                <path d="m9 15 3-3 3 3" />
              </svg>
              MD
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="document-page">
      <div class="max-w-5xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-t-lg shadow-xl overflow-hidden">
          <div class="bg-blue-600 text-white p-8 md:p-12 text-center">
            <h1
              class="text-3xl md:text-5xl font-bold mb-3 content-title text-neutral-50 dark:text-neutral-100">
              Co-op Tech Charter Builder
            </h1>
            <p class="text-lg opacity-95">
              Build technology decisions on cooperative values, not corporate
              defaults
            </p>
          </div>

          <!-- Progress Bar -->
          <div
            class="flex bg-neutral-50 px-8 py-4 border-b"
            role="tablist"
            aria-label="Charter builder steps">
            <button
              v-for="(step, idx) in steps"
              :key="idx"
              @click="currentStep = idx"
              :aria-selected="currentStep === idx"
              :aria-label="`Step ${idx + 1}: ${step.label}`"
              :tabindex="currentStep === idx ? 0 : -1"
              role="tab"
              class="flex-1 text-center relative cursor-pointer group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset">
              <div class="flex flex-col items-center">
                <div
                  :class="[
                    'w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all',
                    currentStep === idx
                      ? 'bg-blue-600 text-white scale-110'
                      : currentStep > idx
                      ? 'bg-green-500 text-white'
                      : 'bg-neutral-300 text-neutral-600',
                  ]">
                  {{ idx + 1 }}
                </div>
                <span
                  :class="[
                    'mt-2 text-sm',
                    currentStep === idx
                      ? 'text-blue-600 font-semibold'
                      : 'text-neutral-600',
                  ]">
                  {{ step.label }}
                </span>
              </div>
            </button>
          </div>

          <!-- Content -->
          <div class="p-8">
            <!-- Step 1: Principles -->
            <div
              v-show="currentStep === 0"
              class="space-y-6"
              role="tabpanel"
              :aria-labelledby="`step-${currentStep}-tab`">
              <div>
                <h2
                  class="text-2xl font-bold text-neutral-800 mb-2"
                  id="principles-heading">
                  Define Your Principles
                </h2>
                <p class="text-neutral-600 mb-4">
                  Select the values that guide your technology choices.
                </p>
                <div
                  class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                  <h3 class="font-semibold text-blue-900 mb-2">How to use:</h3>
                  <ul class="text-sm text-blue-800 space-y-1">
                    <li>• Click once to select a principle</li>
                    <li>
                      • Click again to mark as "NON-NEGOTIABLE" (vendors must
                      meet this requirement)
                    </li>
                    <li>• Click a third time to deselect</li>
                  </ul>
                </div>
              </div>

              <fieldset class="space-y-4">
                <legend class="sr-only">
                  Select your technology principles
                </legend>
                <div class="grid md:grid-cols-2 gap-4 principle-grid">
                  <button
                    v-for="principle in principles"
                    :key="principle.id"
                    @click="togglePrinciple(principle.id)"
                    @keydown.enter="togglePrinciple(principle.id)"
                    @keydown.space.prevent="togglePrinciple(principle.id)"
                    :aria-pressed="selectedPrinciples.includes(principle.id)"
                    :aria-describedby="`principle-${principle.id}-desc`"
                    :class="[
                      'p-6 rounded-lg border-2 transition-all text-left focus:outline-none focus:ring-2 focus:ring-blue-500',
                      selectedPrinciples.includes(principle.id)
                        ? 'bg-blue-600 text-white border-transparent shadow-md'
                        : 'border-neutral-200 hover:border-blue-400 hover:shadow-md',
                    ]">
                    <div class="flex items-start justify-between gap-3">
                      <div>
                        <h3 class="font-semibold text-lg mb-2">
                          <span>{{ principle.name }}</span>
                        </h3>
                        <p
                          :id="`principle-${principle.id}-desc`"
                          :class="
                            selectedPrinciples.includes(principle.id)
                              ? 'opacity-90'
                              : 'text-neutral-600'
                          "
                          class="text-sm">
                          {{ principle.description }}
                        </p>
                      </div>
                      <span
                        v-if="nonNegotiables.includes(principle.id)"
                        class="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-semibold whitespace-nowrap"
                        aria-label="Non-negotiable requirement">
                        NON-NEGOTIABLE
                      </span>
                    </div>
                  </button>
                </div>
              </fieldset>
            </div>

            <!-- Step 2: Constraints -->
            <div
              v-show="currentStep === 1"
              class="space-y-6"
              role="tabpanel"
              :aria-labelledby="`step-${currentStep}-tab`">
              <div>
                <h2
                  class="text-2xl font-bold text-neutral-800 mb-2"
                  id="constraints-heading">
                  Technical Constraints
                </h2>
                <p class="text-neutral-600">
                  Define your technical requirements and operational
                  constraints.
                </p>
              </div>

              <div class="space-y-6">
                <fieldset class="bg-neutral-50 p-6 rounded-lg">
                  <legend class="font-semibold text-lg mb-4">
                    Authentication
                  </legend>
                  <div
                    class="flex flex-wrap gap-3 constraint-buttons"
                    role="radiogroup"
                    aria-labelledby="auth-heading">
                    <button
                      v-for="option in authOptions"
                      :key="option.value"
                      @click="constraints.sso = option.value"
                      :aria-pressed="constraints.sso === option.value"
                      role="radio"
                      :aria-checked="constraints.sso === option.value"
                      :class="[
                        'px-5 py-2 rounded-md border-2 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500',
                        constraints.sso === option.value
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-neutral-300 hover:border-blue-400',
                      ]">
                      {{ option.label }}
                    </button>
                  </div>
                </fieldset>

                <div class="bg-neutral-50 p-6 rounded-lg">
                  <h3 class="font-semibold text-lg mb-4">Hosting Model</h3>
                  <div class="flex flex-wrap gap-3 constraint-buttons">
                    <button
                      v-for="option in hostingOptions"
                      :key="option.value"
                      @click="constraints.hosting = option.value"
                      :class="[
                        'px-5 py-2 rounded-md border-2 transition-all',
                        constraints.hosting === option.value
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-neutral-300 hover:border-blue-400',
                      ]">
                      {{ option.label }}
                    </button>
                  </div>
                </div>

                <fieldset class="bg-neutral-50 p-6 rounded-lg">
                  <legend class="font-semibold text-lg mb-2">
                    Required Integrations
                  </legend>
                  <p class="text-sm text-neutral-600 mb-4">
                    Select all that apply (multiple selections allowed)
                  </p>
                  <div class="flex flex-wrap gap-3 constraint-buttons">
                    <button
                      v-for="integration in integrationOptions"
                      :key="integration"
                      @click="toggleIntegration(integration)"
                      :aria-pressed="
                        constraints.integrations.includes(integration)
                      "
                      :class="[
                        'px-5 py-2 rounded-md border-2 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500',
                        constraints.integrations.includes(integration)
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-neutral-300 hover:border-blue-400',
                      ]">
                      {{ integration }}
                    </button>
                  </div>
                </fieldset>

                <div class="bg-neutral-50 p-6 rounded-lg">
                  <h3 class="font-semibold text-lg mb-4">
                    Support Expectations
                  </h3>
                  <div class="flex flex-wrap gap-3 constraint-buttons">
                    <button
                      v-for="option in supportOptions"
                      :key="option.value"
                      @click="constraints.support = option.value"
                      :class="[
                        'px-5 py-2 rounded-md border-2 transition-all',
                        constraints.support === option.value
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-neutral-300 hover:border-blue-400',
                      ]">
                      {{ option.label }}
                    </button>
                  </div>
                </div>

                <div class="bg-neutral-50 p-6 rounded-lg">
                  <h3 class="font-semibold text-lg mb-4">Migration Timeline</h3>
                  <div class="flex flex-wrap gap-3 constraint-buttons">
                    <button
                      v-for="option in timelineOptions"
                      :key="option.value"
                      @click="constraints.timeline = option.value"
                      :class="[
                        'px-5 py-2 rounded-md border-2 transition-all',
                        constraints.timeline === option.value
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-neutral-300 hover:border-blue-400',
                      ]">
                      {{ option.label }}
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 3: Weights -->
            <div
              v-show="currentStep === 2"
              class="space-y-6"
              role="tabpanel"
              :aria-labelledby="`step-${currentStep}-tab`">
              <div>
                <h2
                  class="text-2xl font-bold text-neutral-800 mb-2"
                  id="weights-heading">
                  Set Evaluation Weights
                </h2>
                <p class="text-neutral-600 mb-4">
                  Adjust the importance of each criterion (0 = ignore, 5 =
                  critical).
                </p>
                <div
                  class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                  <p class="text-sm text-blue-800">
                    Use the sliders or click the number values to set weights.
                    Higher weights mean the criterion is more important in your
                    vendor evaluation.
                  </p>
                </div>
              </div>

              <div class="space-y-4">
                <div
                  v-for="weight in weightOptions"
                  :key="weight.id"
                  class="bg-neutral-50 p-6 rounded-lg">
                  <div
                    class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex-1">
                      <label
                        :for="`weight-${weight.id}`"
                        class="font-semibold text-lg mb-1 block"
                        >{{ weight.name }}</label
                      >
                      <p class="text-neutral-600 text-sm">
                        {{ weight.description }}
                      </p>
                    </div>
                    <div class="flex items-center gap-4">
                      <div class="flex items-center gap-2">
                        <span class="text-sm text-neutral-500 w-4">0</span>
                        <input
                          :id="`weight-${weight.id}`"
                          type="range"
                          min="0"
                          max="5"
                          v-model.number="weights[weight.id]"
                          :aria-label="`${weight.name} importance weight`"
                          :aria-describedby="`weight-${weight.id}-desc`"
                          class="w-32 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                        <span class="text-sm text-neutral-500 w-4">5</span>
                      </div>
                      <div class="flex flex-col items-center">
                        <input
                          type="number"
                          min="0"
                          max="5"
                          v-model.number="weights[weight.id]"
                          :aria-label="`${weight.name} weight value`"
                          class="w-16 text-center text-xl font-bold text-blue-600 bg-white border border-neutral-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" />
                        <span class="text-xs text-neutral-400 mt-1"
                          >Weight</span
                        >
                      </div>
                    </div>
                  </div>
                  <div :id="`weight-${weight.id}-desc`" class="sr-only">
                    Current weight: {{ weights[weight.id] }} out of 5.
                    {{
                      weights[weight.id] === 0
                        ? "Ignored"
                        : weights[weight.id] === 5
                        ? "Critical importance"
                        : `${weights[weight.id]} out of 5 importance`
                    }}
                  </div>
                </div>
              </div>
            </div>

            <!-- Navigation -->
            <div class="flex justify-between items-center mt-8 pt-8 border-t">
              <button
                v-if="currentStep > 0"
                @click="previousStep"
                class="px-6 py-3 bg-neutral-200 text-neutral-700 rounded-lg hover:bg-neutral-300 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500"
                :aria-label="`Go back to step ${currentStep}: ${
                  steps[currentStep - 1]?.label
                }`">
                ← Back
              </button>
              <div v-else>
                <button
                  @click="resetForm"
                  class="px-4 py-2 text-neutral-500 text-sm hover:text-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded"
                  title="Clear all form data and start over">
                  Reset Form
                </button>
              </div>

              <div class="flex items-center gap-4">
                <div class="text-sm text-neutral-500">
                  Step {{ currentStep + 1 }} of {{ steps.length }}
                </div>
                <button
                  v-if="currentStep < 2"
                  @click="nextStep"
                  :disabled="!canProceed"
                  :class="[
                    'px-6 py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500',
                    canProceed
                      ? 'bg-blue-600 text-white hover:bg-blue-700'
                      : 'bg-neutral-300 text-neutral-500 cursor-not-allowed',
                  ]"
                  :aria-label="`Proceed to step ${currentStep + 2}: ${
                    steps[currentStep + 1]?.label
                  }`">
                  Next →
                </button>
                <button
                  v-else
                  @click="generateCharter"
                  :disabled="!canGenerateCharter"
                  :class="[
                    'px-8 py-3 rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-green-500',
                    canGenerateCharter
                      ? 'bg-green-600 text-white hover:bg-green-700'
                      : 'bg-neutral-300 text-neutral-500 cursor-not-allowed',
                  ]"
                  aria-describedby="generate-charter-help">
                  Generate Charter
                </button>
              </div>
            </div>

            <div
              v-if="currentStep === 2"
              id="generate-charter-help"
              class="text-sm text-neutral-500 text-right mt-2">
              {{
                canGenerateCharter
                  ? "Ready to generate your charter"
                  : "Select at least one principle to generate charter"
              }}
            </div>
          </div>
        </div>

        <!-- Generated Charter Output -->
        <div
          v-if="charterGenerated"
          class="mt-8 bg-white rounded-lg shadow-xl p-8 animate-fadeIn"
          role="main"
          aria-label="Generated Technology Charter">
          <div class="text-center mb-8 pb-6 border-b-2 border-neutral-200">
            <h2 class="text-3xl font-bold text-neutral-800" id="charter-title">
              Technology Charter
            </h2>
            <p class="text-neutral-600 mt-2">
              Generated
              {{
                new Date().toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })
              }}
            </p>
            <div class="mt-4">
              <button
                @click="scrollToTop"
                class="text-sm text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded">
                Back to form
              </button>
            </div>
          </div>

          <div class="prose max-w-none">
            <section class="mb-8">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">Purpose</h3>
              <p class="text-neutral-700 leading-relaxed">
                This charter guides our cooperative's technology decisions based
                on our shared values and operational needs. It ensures we choose
                tools that support our mission while respecting our principles
                of autonomy, sustainability, and mutual aid.
              </p>
            </section>

            <section
              class="mb-8"
              v-if="
                selectedPrinciples.filter((p) => !nonNegotiables.includes(p))
                  .length > 0
              ">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Core Principles
              </h3>
              <ul class="space-y-2">
                <li
                  v-for="principleId in selectedPrinciples.filter(
                    (p) => !nonNegotiables.includes(p)
                  )"
                  :key="principleId"
                  class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span>{{
                    principles.find((p) => p.id === principleId)?.name
                  }}</span>
                </li>
              </ul>
            </section>

            <section class="mb-8" v-if="nonNegotiables.length > 0">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Non-Negotiable Requirements
              </h3>
              <p class="text-red-600 font-semibold mb-3">
                Any vendor failing these requirements is automatically
                disqualified.
              </p>
              <ul class="space-y-2">
                <li
                  v-for="principleId in nonNegotiables"
                  :key="principleId"
                  class="flex items-start text-red-600 font-semibold">
                  <span class="mr-2">→</span>
                  <span>{{
                    principles.find((p) => p.id === principleId)?.name
                  }}</span>
                </li>
              </ul>
            </section>

            <section class="mb-8">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Technical Constraints
              </h3>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Authentication:
                    {{
                      authOptions.find((o) => o.value === constraints.sso)
                        ?.label
                    }}</span
                  >
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Hosting:
                    {{
                      hostingOptions.find(
                        (o) => o.value === constraints.hosting
                      )?.label
                    }}</span
                  >
                </li>
                <li
                  v-if="constraints.integrations.length > 0"
                  class="flex items-start">
                  <span class="text-purple-600 mr-2">→</span>
                  <span
                    >Required Integrations:
                    {{ constraints.integrations.join(", ") }}</span
                  >
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Support Level:
                    {{
                      supportOptions.find(
                        (o) => o.value === constraints.support
                      )?.label
                    }}</span
                  >
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Migration Timeline:
                    {{
                      timelineOptions.find(
                        (o) => o.value === constraints.timeline
                      )?.label
                    }}</span
                  >
                </li>
              </ul>
            </section>

            <section class="mb-8">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Evaluation Rubric
              </h3>
              <p class="text-neutral-700 mb-4">
                Score each vendor option using these weighted criteria (0-5
                scale):
              </p>
              <div class="overflow-x-auto">
                <table class="w-full border-collapse">
                  <thead>
                    <tr class="bg-neutral-100">
                      <th class="border p-3 text-left">Criterion</th>
                      <th class="border p-3 text-left">Description</th>
                      <th class="border p-3 text-center">Weight</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="weight in sortedWeights"
                      :key="weight.id"
                      class="hover:bg-neutral-50">
                      <td class="border p-3 font-semibold">
                        {{ weight.name }}
                      </td>
                      <td class="border p-3 text-sm text-neutral-600">
                        {{ weight.rubricDescription }}
                      </td>
                      <td
                        class="border p-3 text-center font-bold text-blue-600">
                        {{ weights[weight.id] }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            <section class="mb-8">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Decision Heuristics
              </h3>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Any vendor failing a non-negotiable requirement is
                    automatically eliminated</span
                  >
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Prefer open standards and clear data export over feature
                    abundance</span
                  >
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >When scores are within 10%, choose based on alignment with
                    cooperative values</span
                  >
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Document all decisions in the Vendor Decision Log for
                    transparency</span
                  >
                </li>
              </ul>
            </section>

            <section class="mb-8">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Procurement Process
              </h3>
              <ol class="space-y-2 list-decimal list-inside">
                <li>Identify need through collective discussion</li>
                <li>Research 3-5 potential vendors/solutions</li>
                <li>Eliminate any failing non-negotiables</li>
                <li>Score remaining options using rubric</li>
                <li>Trial top 2 options if possible</li>
                <li>Make collective decision with documented rationale</li>
                <li>Create migration/exit plan before commitment</li>
              </ol>
            </section>

            <section class="mb-8">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Review & Accountability
              </h3>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span>Review this charter annually at minimum</span>
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span>Audit existing tools against charter quarterly</span>
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span>Document any exceptions with clear justification</span>
                </li>
                <li class="flex items-start">
                  <span class="text-blue-600 mr-2">→</span>
                  <span
                    >Share learnings with other cooperatives in our
                    network</span
                  >
                </li>
              </ul>
            </section>

            <section class="mt-12 pt-8 border-t-2 border-neutral-200">
              <h3 class="text-xl font-bold text-neutral-800 mb-3">
                Vendor Decision Log Template
              </h3>
              <div class="bg-neutral-50 p-6 rounded-lg font-mono text-sm">
                <div class="space-y-1">
                  <p>
                    <strong>Tool Category:</strong> [e.g., Project Management]
                  </p>
                  <p>
                    <strong>Date:</strong> {{ new Date().toLocaleDateString() }}
                  </p>
                  <p><strong>Participants:</strong> [Names]</p>
                  <p><strong>Options Evaluated:</strong> [List vendors]</p>
                  <p>
                    <strong>Eliminated (Non-Negotiables):</strong> [Vendor -
                    Reason]
                  </p>
                  <p><strong>Scores:</strong></p>
                  <p class="ml-4">• Option A: [Total weighted score]</p>
                  <p class="ml-4">• Option B: [Total weighted score]</p>
                  <p><strong>Decision:</strong> [Selected vendor]</p>
                  <p><strong>Rationale:</strong> [2-3 sentences]</p>
                  <p><strong>Safeguards/Mitigations:</strong> [If any risks]</p>
                  <p><strong>Exit Strategy:</strong> [How we'd migrate away]</p>
                  <p><strong>Review Date:</strong> [One year from today]</p>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";

definePageMeta({
  layout: false,
});

// Import PDF export composable
const { exportToPDF } = usePdfExportBasic();

// State
const currentStep = ref(0);
const charterGenerated = ref(false);
const selectedPrinciples = ref([]);
const nonNegotiables = ref([]);

const constraints = ref({
  sso: "optional",
  hosting: "either",
  integrations: [],
  support: "business",
  timeline: "quarter",
});

const weights = ref({
  privacy: 4,
  accessibility: 5,
  interop: 3,
  lockin: 4,
  opensource: 3,
  cost: 4,
  sustainability: 2,
  localization: 2,
  usability: 3,
});

// Data
const steps = [
  { label: "Principles" },
  { label: "Constraints" },
  { label: "Weights" },
];

const principles = [
  {
    id: "privacy",
    icon: "🔒",
    name: "Privacy & Data Minimization",
    description:
      "Collect only necessary data, encrypt everything, respect user autonomy",
  },
  {
    id: "sovereignty",
    icon: "🏛️",
    name: "Data Sovereignty",
    description:
      "Data residency requirements, EU adequacy, local jurisdiction control",
  },
  {
    id: "accessibility",
    icon: "♿",
    name: "Accessibility First",
    description:
      "WCAG 2.2 AA compliance, screen reader support, keyboard navigation",
  },
  {
    id: "interop",
    icon: "🔗",
    name: "Interoperability",
    description:
      "Open standards, API access, webhook support, standard formats",
  },
  {
    id: "portability",
    icon: "📦",
    name: "Data Portability",
    description: "Clear export paths, no vendor lock-in, migration-friendly",
  },
  {
    id: "opensource",
    icon: "🌍",
    name: "Open Source Preference",
    description: "FOSS first, community-driven, transparent development",
  },
  {
    id: "cost",
    icon: "💰",
    name: "Cost Sustainability",
    description: "Predictable pricing, no surprise fees, budget-appropriate",
  },
  {
    id: "environmental",
    icon: "🌱",
    name: "Environmental Impact",
    description: "Green hosting, carbon neutral, efficient resource use",
  },
  {
    id: "localization",
    icon: "🌐",
    name: "Localization Support",
    description: "Multi-language, timezone awareness, cultural sensitivity",
  },
  {
    id: "mutual-aid",
    icon: "🤝",
    name: "Community Health",
    description: "Vendor supports mutual aid, fair labor, cooperative values",
  },
];

const authOptions = [
  { value: "required", label: "SSO Required" },
  { value: "preferred", label: "SSO Preferred" },
  { value: "optional", label: "SSO Optional" },
];

const hostingOptions = [
  { value: "self", label: "Self-Hosted Only" },
  { value: "either", label: "Either" },
  { value: "managed", label: "Managed Only" },
];

const integrationOptions = ["Slack", "OIDC/OAuth", "Webhooks", "REST API"];

const supportOptions = [
  { value: "community", label: "Community Only OK" },
  { value: "business", label: "Business Hours" },
  { value: "24-7", label: "24/7 Required" },
];

const timelineOptions = [
  { value: "immediate", label: "This Month" },
  { value: "quarter", label: "This Quarter" },
  { value: "year", label: "This Year" },
  { value: "exploring", label: "Just Exploring" },
];

const weightOptions = [
  {
    id: "privacy",
    name: "Privacy & Data Control",
    description:
      "How much the vendor respects data sovereignty and minimization",
    rubricDescription: "Data collection practices, encryption, user consent",
  },
  {
    id: "accessibility",
    name: "Accessibility",
    description: "WCAG compliance and inclusive design practices",
    rubricDescription: "Screen readers, keyboard nav, WCAG compliance",
  },
  {
    id: "interop",
    name: "Interoperability & Export",
    description: "API access, webhooks, standard formats, data export",
    rubricDescription: "APIs, webhooks, standard formats, integrations",
  },
  {
    id: "lockin",
    name: "Lock-in Risk",
    description: "How hard it would be to migrate away (higher = riskier)",
    rubricDescription:
      "Migration difficulty, proprietary formats, switching costs",
  },
  {
    id: "opensource",
    name: "Community & Open Source",
    description: "FOSS preference, community governance, transparency",
    rubricDescription: "FOSS status, community governance, transparency",
  },
  {
    id: "cost",
    name: "Total Cost of Ownership",
    description: "Including licenses, hosting, maintenance, training",
    rubricDescription: "Licenses, hosting, training, ongoing maintenance",
  },
  {
    id: "sustainability",
    name: "Sustainability",
    description: "Environmental impact, green hosting, efficiency",
    rubricDescription: "Carbon footprint, green hosting, efficiency",
  },
  {
    id: "localization",
    name: "Localization & Support",
    description: "Multi-language, timezone support, cultural awareness",
    rubricDescription: "Multi-language, timezones, cultural awareness",
  },
  {
    id: "usability",
    name: "Usability",
    description: "User experience, learning curve, day-to-day efficiency",
    rubricDescription: "Learning curve, daily efficiency, user satisfaction",
  },
];

// Computed
const sortedWeights = computed(() => {
  return weightOptions
    .filter((w) => weights.value[w.id] > 0)
    .sort((a, b) => weights.value[b.id] - weights.value[a.id]);
});

const canProceed = computed(() => {
  if (currentStep.value === 0) {
    // Step 1: At least one principle should be selected
    return selectedPrinciples.value.length > 0;
  }
  if (currentStep.value === 1) {
    // Step 2: All constraint sections are optional, always can proceed
    return true;
  }
  return true;
});

const canGenerateCharter = computed(() => {
  // Must have at least one principle selected to generate charter
  return selectedPrinciples.value.length > 0;
});

// Methods
const togglePrinciple = (principleId) => {
  const idx = selectedPrinciples.value.indexOf(principleId);
  const nonNegIdx = nonNegotiables.value.indexOf(principleId);

  if (idx === -1) {
    // Not selected - select it
    selectedPrinciples.value.push(principleId);
  } else if (nonNegIdx === -1) {
    // Selected but not non-negotiable - make it non-negotiable
    nonNegotiables.value.push(principleId);
  } else {
    // Non-negotiable - deselect entirely
    selectedPrinciples.value.splice(idx, 1);
    nonNegotiables.value.splice(nonNegIdx, 1);
  }
};

const toggleIntegration = (integration) => {
  const idx = constraints.value.integrations.indexOf(integration);
  if (idx === -1) {
    constraints.value.integrations.push(integration);
  } else {
    constraints.value.integrations.splice(idx, 1);
  }
};

const nextStep = () => {
  if (currentStep.value < 2 && canProceed.value) {
    currentStep.value++;
  }
};

const previousStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const resetForm = () => {
  if (confirm("Are you sure you want to clear all form data and start over?")) {
    selectedPrinciples.value = [];
    nonNegotiables.value = [];
    constraints.value = {
      sso: "optional",
      hosting: "either",
      integrations: [],
      support: "business",
      timeline: "quarter",
    };
    weights.value = {
      privacy: 4,
      accessibility: 5,
      interop: 3,
      lockin: 4,
      opensource: 3,
      cost: 4,
      sustainability: 2,
      localization: 2,
      usability: 3,
    };
    currentStep.value = 0;
    charterGenerated.value = false;
    localStorage.removeItem("tech-charter-data");
  }
};

const scrollToTop = () => {
  document
    .querySelector(".template-wrapper")
    .scrollIntoView({ behavior: "smooth" });
};

const generateCharter = () => {
  if (canGenerateCharter.value) {
    charterGenerated.value = true;
    autoSave(); // Save the completed form
    setTimeout(() => {
      document
        .querySelector("#charter-title")
        .scrollIntoView({ behavior: "smooth" });
    }, 100);
  }
};

// Load saved data
const loadSavedData = () => {
  const saved = localStorage.getItem("tech-charter-data");
  if (saved) {
    try {
      const parsedData = JSON.parse(saved);
      selectedPrinciples.value = parsedData.selectedPrinciples || [];
      nonNegotiables.value = parsedData.nonNegotiables || [];
      constraints.value = { ...constraints.value, ...parsedData.constraints };
      weights.value = { ...weights.value, ...parsedData.weights };
    } catch (error) {
      console.error("Error loading saved data:", error);
    }
  }
};

// Auto-save data
const autoSave = () => {
  const data = {
    selectedPrinciples: selectedPrinciples.value,
    nonNegotiables: nonNegotiables.value,
    constraints: constraints.value,
    weights: weights.value,
    lastUpdated: new Date().toISOString(),
  };
  localStorage.setItem("tech-charter-data", JSON.stringify(data));
};

// Export functions
const exportPDF = async () => {
  if (process.server || typeof window === "undefined") {
    console.warn("PDF export attempted on server side");
    return;
  }

  try {
    const filename = "tech_charter.pdf";
    await exportToPDF(".document-page", filename);
  } catch (error) {
    console.error("PDF export failed:", error);
    alert("PDF generation failed. Falling back to print dialog.");
    window.print();
  }
};

const handlePrint = () => {
  window.print();
};

const exportText = () => {
  const content = extractTextContent();
  downloadFile(content, "tech_charter.txt", "text/plain");
};

const exportMarkdown = () => {
  const content = convertToMarkdown();
  downloadFile(content, "tech_charter.md", "text/markdown");
};

const extractTextContent = () => {
  const today = new Date().toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  let content = `TECHNOLOGY CHARTER\n==================\n\nGenerated ${today}\n\n`;

  content += `PURPOSE\n-------\n\nThis charter guides our cooperative's technology decisions based on our shared values and operational needs. It ensures we choose tools that support our mission while respecting our principles of autonomy, sustainability, and mutual aid.\n\n`;

  if (
    selectedPrinciples.value.filter((p) => !nonNegotiables.value.includes(p))
      .length > 0
  ) {
    content += `CORE PRINCIPLES\n---------------\n\n`;
    selectedPrinciples.value
      .filter((p) => !nonNegotiables.value.includes(p))
      .forEach((pId) => {
        const principle = principles.find((p) => p.id === pId);
        if (principle) {
          content += `• ${principle.name}\n`;
        }
      });
    content += "\n";
  }

  if (nonNegotiables.value.length > 0) {
    content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
    nonNegotiables.value.forEach((pId) => {
      const principle = principles.find((p) => p.id === pId);
      if (principle) {
        content += `• ${principle.name}\n`;
      }
    });
    content += "\n";
  }

  content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
  content += `• Authentication: ${
    authOptions.find((o) => o.value === constraints.value.sso)?.label
  }\n`;
  content += `• Hosting: ${
    hostingOptions.find((o) => o.value === constraints.value.hosting)?.label
  }\n`;
  if (constraints.value.integrations.length > 0) {
    content += `• Required Integrations: ${constraints.value.integrations.join(
      ", "
    )}\n`;
  }
  content += `• Support Level: ${
    supportOptions.find((o) => o.value === constraints.value.support)?.label
  }\n`;
  content += `• Migration Timeline: ${
    timelineOptions.find((o) => o.value === constraints.value.timeline)?.label
  }\n\n`;

  content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
  sortedWeights.value.forEach((weight) => {
    content += `${weight.name} (Weight: ${weights.value[weight.id]})\n${
      weight.rubricDescription
    }\n\n`;
  });

  return content;
};

const convertToMarkdown = () => {
  const today = new Date().toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  let content = `# Technology Charter\n\n*Generated ${today}*\n\n`;

  content += `## Purpose\n\nThis charter guides our cooperative's technology decisions based on our shared values and operational needs. It ensures we choose tools that support our mission while respecting our principles of autonomy, sustainability, and mutual aid.\n\n`;

  if (
    selectedPrinciples.value.filter((p) => !nonNegotiables.value.includes(p))
      .length > 0
  ) {
    content += `## Core Principles\n\n`;
    selectedPrinciples.value
      .filter((p) => !nonNegotiables.value.includes(p))
      .forEach((pId) => {
        const principle = principles.find((p) => p.id === pId);
        if (principle) {
          content += `- ${principle.name}\n`;
        }
      });
    content += "\n";
  }

  if (nonNegotiables.value.length > 0) {
    content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
    nonNegotiables.value.forEach((pId) => {
      const principle = principles.find((p) => p.id === pId);
      if (principle) {
        content += `- **${principle.name}**\n`;
      }
    });
    content += "\n";
  }

  content += `## Technical Constraints\n\n`;
  content += `- Authentication: ${
    authOptions.find((o) => o.value === constraints.value.sso)?.label
  }\n`;
  content += `- Hosting: ${
    hostingOptions.find((o) => o.value === constraints.value.hosting)?.label
  }\n`;
  if (constraints.value.integrations.length > 0) {
    content += `- Required Integrations: ${constraints.value.integrations.join(
      ", "
    )}\n`;
  }
  content += `- Support Level: ${
    supportOptions.find((o) => o.value === constraints.value.support)?.label
  }\n`;
  content += `- Migration Timeline: ${
    timelineOptions.find((o) => o.value === constraints.value.timeline)?.label
  }\n\n`;

  content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
  content += `| Criterion | Description | Weight |\n`;
  content += `|-----------|-------------|--------|\n`;
  sortedWeights.value.forEach((weight) => {
    content += `| ${weight.name} | ${weight.rubricDescription} | ${
      weights.value[weight.id]
    } |\n`;
  });

  return content;
};

const downloadFile = (content, filename, type) => {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
};

// Load data on mount
onMounted(() => {
  loadSavedData();
});

// Auto-save when data changes
watch([selectedPrinciples, nonNegotiables, constraints, weights], autoSave, {
  deep: true,
});
</script>

<style scoped>
/* Ubuntu font import */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");

/* rely on Tailwind bg utilities applied on wrapper */
.template-wrapper {
  min-height: 100vh;
  padding: 2rem 1rem;
  position: relative;
}
.template-wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
      circle at 25% 25%,
      black 1px,
      transparent 1px
    ),
    radial-gradient(circle at 75% 75%, black 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
}

/* Dark mode dither inversion */
html.dark .template-wrapper::before {
  background-image: radial-gradient(
      circle at 25% 25%,
      white 1px,
      transparent 1px
    ),
    radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
  opacity: 0.12;
}

.document-page {
  max-width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  background: white;
  position: relative;
}
.document-page::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: -4px;
  bottom: -4px;
  background: black;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 2px 2px;
  z-index: -1;
}
.document-page::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid black;
  z-index: 1;
  pointer-events: none;
}

/* Dark mode document page inversion */
html.dark .document-page {
  background: #0a0a0a;
}
html.dark .document-page::before {
  background: white;
  background-image: radial-gradient(black 1px, transparent 1px);
}
html.dark .document-page::after {
  border-color: white;
}

.export-controls {
  max-width: 8.5in;
  margin: 0 auto 1.5rem;
  background: white;
  border: 1px solid black;
  padding: 1rem;
  position: relative;
}
.export-controls::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: -2px;
  bottom: -2px;
  background: black;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 2px 2px;
  z-index: -1;
}

/* Dark mode export controls */
html.dark .export-controls {
  background: #0a0a0a;
  border-color: white;
}
html.dark .export-controls::before {
  background: white;
  background-image: radial-gradient(black 1px, transparent 1px);
}

.export-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 1rem;
}

.export-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.export-title {
  font-weight: 600;
  color: #374151;
  margin: 0;
  white-space: nowrap;
}

html.dark .export-title {
  color: #e5e7eb;
}

.export-btn {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  min-width: fit-content;
}

.export-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.export-btn.primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.export-btn.primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.export-btn svg {
  flex-shrink: 0;
}

.content-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: inherit;
  text-align: center;
  margin-bottom: 0.5rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out;
}

/* Bitmap aesthetic overrides - remove all rounded corners */
* {
  border-radius: 0 !important;
  font-family: "Ubuntu", monospace !important;
}

/* Form fields with bitmap styling */
input,
textarea,
select {
  border: 1px solid black !important;
  background: white !important;
  color: black !important;
  font-family: "Ubuntu Mono", monospace !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid black !important;
  outline-offset: -2px !important;
  background: white !important;
}

/* Dark mode form fields */
html.dark input,
html.dark textarea,
html.dark select {
  border: 1px solid white !important;
  background: #0a0a0a !important;
  color: white !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  outline: 2px solid white !important;
  background: #0a0a0a !important;
}

/* Buttons with bitmap styling */
button:not(.export-btn) {
  background: white !important;
  border: 1px solid black !important;
  color: black !important;
  font-family: "Ubuntu Mono", monospace !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
}

button:not(.export-btn):hover {
  background: black !important;
  color: white !important;
  transform: translateY(-1px) translateX(-1px) !important;
}

/* Dark mode buttons */
html.dark button:not(.export-btn) {
  background: #0a0a0a !important;
  border: 1px solid white !important;
  color: white !important;
}

html.dark button:not(.export-btn):hover {
  background: white !important;
  color: black !important;
}

/* Export buttons specifically */
.export-btn {
  background: white !important;
  border: 1px solid black !important;
  color: black !important;
  font-family: "Ubuntu Mono", monospace !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
}

.export-btn:hover {
  background: black !important;
  color: white !important;
  transform: translateY(-1px) translateX(-1px) !important;
}

/* Dark mode export buttons */
html.dark .export-btn {
  background: #0a0a0a !important;
  border: 1px solid white !important;
  color: white !important;
}

html.dark .export-btn:hover {
  background: white !important;
  color: black !important;
}

.export-btn.primary {
  background: black !important;
  color: white !important;
}

.export-btn.primary:hover {
  background: black !important;
  transform: translateY(-1px) translateX(-1px) !important;
}

/* Card and form styling */
.charter-card,
.section-card,
.form-group-large {
  border-radius: 0 !important;
  border: 1px solid black !important;
}

/* Checkbox and radio button styling */
input[type="checkbox"],
input[type="radio"] {
  border: 2px solid black !important;
  background: white !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: black !important;
  color: white !important;
}

/* Override any gray colors with black/white only */
:deep(.text-neutral-900),
:deep(.text-neutral-800),
:deep(.text-neutral-700),
:deep(.text-neutral-600),
:deep(.text-neutral-500) {
  color: black !important;
}

:deep(.bg-neutral-50),
:deep(.bg-neutral-100),
:deep(.bg-neutral-200) {
  background-color: white !important;
}

html.dark :deep(.bg-neutral-50),
html.dark :deep(.bg-neutral-100),
html.dark :deep(.bg-neutral-200) {
  background-color: #0a0a0a !important;
}

:deep(.border-neutral-200),
:deep(.border-neutral-300) {
  border-color: black !important;
}

/* Document titles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Ubuntu", monospace !important;
  color: inherit !important;
}

/* All text */
p,
span,
div {
  color: inherit !important;
  font-family: "Ubuntu", monospace !important;
}

/* Dark mode typography overrides */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #f9fafb !important;
}
html.dark p,
html.dark span,
html.dark div {
  color: #e5e7eb !important;
}

/* Nuxt UI gray utility overrides in dark */
html.dark :deep(.text-neutral-900),
html.dark :deep(.text-neutral-800),
html.dark :deep(.text-neutral-700),
html.dark :deep(.text-neutral-600),
html.dark :deep(.text-neutral-500) {
  color: #e5e7eb !important;
}

@media (max-width: 768px) {
  .template-wrapper {
    padding: 1rem;
  }

  .export-content {
    flex-direction: column;
    align-items: stretch;
  }

  .export-section {
    justify-content: center;
  }

  .export-buttons {
    justify-content: center;
  }

  .content-title {
    font-size: 2rem;
  }

  /* Make principle cards full width on mobile */
  .principle-grid {
    grid-template-columns: 1fr;
  }

  /* Stack constraint buttons vertically on mobile */
  .constraint-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .constraint-buttons button {
    width: 100%;
    justify-content: center;
  }

  /* Improve weight control layout on mobile */
  .weight-control-mobile {
    flex-direction: column;
    gap: 1rem;
  }
}

@media print {
  body > *:not(.template-wrapper),
  #__nuxt > *:not(.template-wrapper),
  .export-controls,
  .no-print,
  .no-pdf,
  button,
  [class*="button"] {
    display: none !important;
  }

  body *:not(.template-wrapper):not(.template-wrapper *) {
    visibility: hidden !important;
  }

  .template-wrapper,
  .template-wrapper * {
    visibility: visible !important;
  }

  .template-wrapper {
    background: white !important;
    padding: 0 !important;
    min-height: auto !important;
  }

  .document-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .document-page::before {
    content: "";
    display: block;
    height: 0.5in;
  }
}
</style>
