<template>
  <div class="geenforce-section">
    <div class="section-header">
      <h1>GE-Enforce</h1>
      <p class="section-sub">Desired-state install manifests for imaging PC types, and the fleet's reported results.</p>
    </div>
    <nav class="section-tabs">
      <router-link to="/geenforce/manifests" class="tab">Manifests</router-link>
      <router-link to="/geenforce/reports" class="tab">Enforcement Reports</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script setup>
// Tabbed shell for the GE-Enforce section. Children render the manifest editor
// and the fleet-compliance reports full-width (not squeezed into the settings rail).
</script>

<style scoped>
/* No cap on the shell. The reports tab is a wide fleet table and was being
   squeezed into 1400px with empty page beside it; views that read better
   narrow (the manifest editor) cap themselves instead. */
.geenforce-section { width: 100%; }
.section-header { margin-bottom: 0.5rem; }
.section-header h1 { margin: 0; }
.section-sub { color: var(--text-light); margin: 0.25rem 0 0; }
.section-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin: 1rem 0 1.25rem;
}
.tab {
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.tab:hover { color: var(--text); }
.tab.router-link-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
</style>
