---
name: elixforms-css-design-system
description: >
  Strategia CSS e design system del progetto elixForms.
  Documenta come vengono importati i CSS remoti della piattaforma,
  il layout a griglia elixForms, le classi CSS specifiche della piattaforma,
  gli stili SCSS modules nella libreria common, e la struttura visiva delle pagine.
  Attiva questa skill quando lavori sugli stili, sul layout delle pagine,
  o devi capire come funzionano le classi CSS del design system elixForms.
---

# CSS e Design System elixForms

## Strategia CSS

Il progetto utilizza **tre livelli di stili**:

1. **CSS remoti** — Design system dell'Università di Parma, caricati via `@import url(...)` da `console-unipr.elixforms.it`
2. **SCSS Modules** — Stili specifici dei componenti in `common/` (es. `ElixFormsComponent.module.scss`)
3. **CSS locali** — Stili specifici della pagina (es. `App.css`, `index.css`)

## CSS Remoti (Design System UniPR/elixForms)

Importati in `App.css` di ogni pagina:

```css
/* CSS principali del design system */
@import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css');
@import url('https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css');
```

> **IMPORTANTE**: Questi CSS sono caricati a runtime dal CDN e **non vengono bundlati** nel JS.
> La pagina deve avere connessione internet per visualizzarsi correttamente.

## Layout della Pagina (Struttura HTML)

Le pagine seguono un layout standard elixForms con classi CSS specifiche:

```html
<div class="container_12" id="pageBody">
  <div class="grid_12">
    <div id="userConsole" class="fe-behaviour">
      
      <!-- HEADER -->
      <header>
        <div class="neutral">
          <div class="grid_12">
            <div class="console_header">
              <div class="leftDiv">
                <h1>elixForms</h1>
                <div class="logo"><!-- Logo UniPR --></div>
              </div>
              <div class="rightDiv">...</div>
            </div>
          </div>
        </div>
      </header>

      <!-- CONTENUTO PRINCIPALE -->
      <div class="grid_12 console_main">
        <div class="inside">
          <div class="fe-module-header-container">
            <h2>Titolo Modulo</h2>
          </div>
          <div class="receipt">
            <div class="container">
              <!-- Contenuto custom della pagina -->
            </div>
          </div>
        </div>
      </div>

      <!-- FOOTER -->
      <footer class="it-footer">
        <div class="it-footer-main">
          <div class="container">
            <div class="subfooter-top">powered by elixForms</div>
            <div class="subfooter-bottom">versione X.XX.X</div>
          </div>
        </div>
      </footer>

    </div>
  </div>
</div>
```

## Classi CSS del Design System

### Layout a Griglia
| Classe | Scopo |
|---|---|
| `container_12` | Container principale a 12 colonne |
| `grid_12` | Occupa tutte le 12 colonne |
| `clear` | Clearfix |

### Struttura Pagina
| Classe | Scopo |
|---|---|
| `fe-behaviour` | Container principale della console utente |
| `console_header` | Header della console |
| `console_main` | Area contenuto principale |
| `fe-module-header-container` | Header del modulo/form |
| `receipt` | Container del contenuto del form |

### Layout Campi Form (ElixFormsElement)
| Classe | Scopo |
|---|---|
| `iuFieldContainer` | Container di un campo form (label + input) |
| `attrDisplay_left` | Colonna sinistra (label) |
| `attrDisplay_right` | Colonna destra (input) |
| `attrDisplay_label` | Marcatore per la label |
| `attrDisplay_input` | Marcatore per l'input |
| `iuLabelContainer` | Container interno della label |
| `iuInputContainer` | Container interno dell'input |
| `iuTypeString` | Tipo di input stringa |
| `iuClearContainer` | Clearfix interno |

### Classi Input FluentUI Custom
| Classe | Componente |
|---|---|
| `isiportalPartialAdminFormFieldSingleLineText` | TextField singola riga |
| `isiportalPartialAdminFormFieldMultiLineText` | TextField multiriga |
| `isiportalPartialAdminFormFieldRadio` | ChoiceGroup radio |
| `isiportalPartialAdminFormFieldSelect` | Dropdown select |
| `isiportalPartialAdminCheckboxFieldItem` | Checkbox singolo |

## SCSS Modules (common/)

`ElixFormsComponent.module.scss`:
```scss
@import '~@fluentui/react/dist/sass/References.scss';

.elixFormsComponent {
  overflow: hidden;
  padding: 1em;
  color: "[theme:bodyText, default: #323130]";
  color: var(--bodyText);
  &.teams {
    font-family: $ms-font-family-fallbacks;
  }
}
```

> **Nota**: Gli stili usano il **theming di FluentUI** con variabili CSS e placeholder di tema SharePoint.

## Logo e Risorse Esterne

- **Logo UniPR**: `https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png`
- Le immagini locali vanno in `src/assets/` e importate come moduli ES
- Le immagini vengono copiate nella `dist/` durante la build

## Note Importanti

1. Il CSS di `index.css` nella pagina `scelta-carriera` è **attualmente tutto commentato** — si usano solo i CSS remoti
2. Il CSS injection plugin (`vite-plugin-css-injected-by-js`) gestisce solo i CSS locali e SCSS, non gli `@import url(...)` che restano come riferimenti esterni
3. Per funzionare correttamente, la pagina deployata deve poter raggiungere `console-unipr.elixforms.it`