# BMC Hub - Design System & UI Plan

## 1. Design Filosofi: "Nordic Top"
Dette designdokument beskriver UI/UX-strategien for BMC Hub, baseret på templaten **10_nordic_top**. Designet er forankret i skandinavisk minimalisme med fokus på funktionalitet, luft og overskuelighed.

**Nøgleprincipper:**
*   **Fuld Bredde (Fluid Layout):** Udnytter hele skærmens bredde for maksimalt overblik, ideelt til store datatabeller og dashboards.
*   **Top-Navigation:** En fastgjort topbar frigiver plads i siderne og giver en velkendt, hierarkisk navigationsstruktur med dropdowns.
*   **Kort-baseret UI:** Indhold grupperes i "cards" med bløde skygger og rundede hjørner for at skabe visuelt hierarki.
*   **Accent-farver:** En dyb blå (`#0f4c75`) bruges konsekvent til handlinger og branding, suppleret af lyse baggrunde.

---

## 2. Visuel Identitet

### Farvepalette
Designet benytter en stram palette defineret via CSS variabler for nem vedligeholdelse.

| Variabel | Farvekode | Anvendelse |
| :--- | :--- | :--- |
| `--accent` | `#0f4c75` (Dyb Blå) | Primære knapper, aktiv navigation, branding, ikoner |
| `--accent-light` | `#eef2f5` (Lys Blå/Grå) | Hover-effekter, baggrund for ikoner, aktive menupunkter |
| `--text-primary` | `#2c3e50` (Mørkegrå) | Overskrifter, primær tekst |
| `--text-secondary` | `#6c757d` (Mellemgrå) | Brødtekst, labels, meta-data |
| `--bg-body` | `#f8f9fa` (Off-white) | Sidens baggrundsfarve |
| `--bg-card` | `#ffffff` (Hvid) | Kort, navbar, modaler |

### Typografi
*   **Font:** 'Inter', system-ui, sans-serif.
*   **Vægtning:**
    *   **Bold (700):** Overskrifter, KPI-tal.
    *   **Medium (500):** Labels, menupunkter, knaptekst.
    *   **Regular (400):** Brødtekst.

---

## 3. Komponentbibliotek

### Navigation (Topbar)
*   **Struktur:** Logo venstre, Menu center, Profil/Notifikationer højre.
*   **Dropdowns:** Bruges til underkategorier (f.eks. Kunder -> Oversigt, Opret, Rapporter).
*   **Aktiv Tilstand:** Markeres med `--accent-light` baggrund og `--accent` tekstfarve.

### Knapper (Buttons)
*   **Primær:** Fuld `--accent` baggrund. Bruges til hovedhandlinger (f.eks. "Opret Kunde", "Gem").
*   **Sekundær/Filter:** Hvid baggrund med border. Bliver farvet ved aktiv/hover.
*   **Ikon-knapper:** Runde knapper til hurtige handlinger (f.eks. notifikationer, rediger).

### Tabeller (Data Lists)
*   **Design:** Clean look uden lodrette streger.
*   **Features:**
    *   Avatar/Initialer for virksomheder.
    *   Status badges (pille-formede).
    *   Handlingsmenu (tre prikker) yderst til højre.
    *   Hover-effekt på rækker for læsbarhed.

### Formularer (Inputs)
*   **Styling:** Store, luftige inputfelter med blød border.
*   **Fokus:** Tydelig `--accent` border og skygge ved fokus.
*   **Gruppering:** Logisk opdeling med overskrifter (f.eks. "Virksomhedsoplysninger", "Kontaktperson").
*   **Kort-valg:** Radio buttons designet som klikbare kort (se Abonnement-valg i `form.html`).

### Status Indikatorer (Badges)
Bruges til at vise tilstande hurtigt i tabeller.
*   🟢 **Success:** Aktiv, Fuldført (Grøn baggrund/tekst).
*   🟡 **Warning:** Afventer, Pause (Gul/Orange baggrund/tekst).
*   🔴 **Danger:** Kritisk, Opsagt (Rød baggrund/tekst).
*   ⚪ **Neutral:** Hardware typer (Grå baggrund/tekst).

---

## 4. Side-Skabeloner (Templates)

Systemet består af 5 kerneskabeloner der dækker de fleste behov:

### 1. Dashboard (`index.html`)
*   **Formål:** Give hurtigt overblik over forretningens tilstand.
*   **Indhold:**
    *   4 KPI-kort i toppen (Kunder, Hardware, Support, Omsætning).
    *   Grafisk visning (placeholder) eller lister.
    *   "Seneste Aktiviteter" tabel.
    *   System Status panel (Server load, memory).

### 2. Listevisning (`customers.html`)
*   **Formål:** Administration af store datamængder.
*   **Indhold:**
    *   Søgefelt og "Opret" knap i header.
    *   Filter-bar (Alle, Aktive, Inaktive, VIP).
    *   Datatabel med rig information.
    *   Paginering i bunden.

### 3. Formular / Opret (`form.html`)
*   **Formål:** Indtastning af data (CRUD operationer).
*   **Indhold:**
    *   "Tilbage" knap for nem navigation.
    *   Opdelt formular i sektioner.
    *   Forskellige input typer: Text, Email, Tel, Select, Radio Cards, Textarea.

### 4. Indstillinger (`settings.html`)
*   **Formål:** Brugerprofil og systemkonfiguration.
*   **Indhold:**
    *   2-kolonne layout.
    *   Venstre: Vertikal navigationsmenu.
    *   Højre: Indholdspaneler (Profilbillede, Stamdata, Toggles for notifikationer/Dark mode).

### 5. Login (`login.html`)
*   **Formål:** Adgangskontrol.
*   **Indhold:**
    *   Centreret kort på fuld skærm.
    *   Logo og velkomsttekst.
    *   Email/Password felter.
    *   "Husk mig" og "Glemt kode" funktioner.

---

## 5. Brugerrejse & Navigation

### Flow Eksempel: Opret ny kunde
1.  **Login:** Bruger logger ind via `login.html`.
2.  **Dashboard:** Lander på `index.html` og ser overblik.
3.  **Navigation:** Klikker på "Kunder" i topmenuen -> Vælger "Oversigt" (eller direkte "Opret ny kunde").
4.  **Liste:** Ser listen på `customers.html`, søger evt. efter eksisterende.
5.  **Handling:** Klikker "Opret Kunde" knappen.
6.  **Formular:** Udfylder data på `form.html`.
    *   Vælger branche via dropdown.
    *   Vælger abonnementspakke via visuelle kort.
7.  **Afslutning:** Klikker "Opret Kunde" -> Sendes tilbage til `customers.html` (eller detaljevisning).

---

## 6. Teknisk Implementation

*   **Framework:** Bootstrap 5.3.2 (CSS/JS).
*   **Ikoner:** Bootstrap Icons (CDN).
*   **Layout:** `container-fluid` for fuld bredde, `row` og `col-*` grid system.
*   **Responsivitet:**
    *   Navbar kollapser til "burger menu" på mobil.
    *   Tabeller bliver scrollbare horisontalt (`table-responsive`).
    *   Grid system tilpasser sig fra 4 kolonner (desktop) til 1 kolonne (mobil).