# TacForce Pro — Design-System (04 „Minimal Slate", Hell + Dunkel)
Verbindliche Vorlage für **alle** Blade-Views. Ziel: der saubere, seriöse shadcn/ui-Look — dunkel als Default, **heller Modus per Toggle** (in `localStorage` gespeichert). Tailwind läuft per **Play-CDN** (kein Node-Build für die Web-App).
## 1. Farb-Tokens
Wir nutzen Tailwinds `zinc` + `blue` + Semantik-Farben, via `class`-basiertem Dark Mode.
| Rolle | Dunkel (default) | Hell |
|------|------------------|------|
| App-Hintergrund | `zinc-950` #09090B | `zinc-50` #FAFAFA |
| Panel / Card | `zinc-900` #18181B | `white` |
| Panel-2 / hover | `zinc-800/50` | `zinc-100` |
| Border | `zinc-800` #27272A | `zinc-200` #E4E4E7 |
| Text primär | `zinc-50` | `zinc-900` |
| Text muted | `zinc-400` | `zinc-500` |
| **Akzent** | `blue-500` #3B82F6 | `blue-600` #2563EB |
| Erfolg | `emerald-500` | `emerald-600` |
| Warnung | `amber-500` | `amber-500` |
| Gefahr | `red-500` | `red-600` |
**Status-Badges:** Offen = blau, In Bearbeitung = amber, Geschlossen = zinc/muted, Angenommen = emerald, Abgelehnt = red.
## 2. Head-Snippet (in JEDEM Layout, genau so)
```html
{{-- Default dunkel; JS unten korrigiert vor Paint --}}
@yield('title', 'TacForce Pro')
{{-- FOUC-frei: Theme aus localStorage VOR dem Rendern setzen --}}
{{-- Sonne (hell) / Mond (dunkel) via dark:hidden bzw. hidden dark:inline --}}
```
## 4. Wiederverwendbare Klassen-Rezepte
```
Card: rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900
Card-Header: px-5 py-4 border-b border-zinc-200 dark:border-zinc-800
Button primär: inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2.5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500
Button sekundär: … border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200
Button gefahr: … bg-red-600 hover:bg-red-500 text-white
Input: w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none
Label: block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5
Badge: inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium
→ Offen: bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20
→ In Bearbeitung: bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-1 ring-amber-500/20
→ Geschlossen: bg-zinc-500/10 text-zinc-500 ring-1 ring-zinc-500/20
Table: w-full text-sm; thead th: text-left text-xs font-medium text-zinc-500 uppercase tracking-wide px-4 py-3;
tbody tr: border-t border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-800/40
Toggle-Switch (Alpine x-data="{on:true}"):
```
Icons: **inline Lucide-SVG** (stroke 1.75, `stroke="currentColor"`, `fill="none"`). **Keine Emojis.** Radius durchgängig `rounded-lg`/`rounded-xl`. Abstände im 4/8-Raster (`gap-4`, `p-5`, `space-y-6`).
## 5. Layouts
### `layouts/public.blade.php` (Website)
- Sticky Header (transparent → `backdrop-blur` beim Scrollen): Logo links, Nav-Links (Features, Preise, Tickets, FiveM), rechts Theme-Toggle + „Anmelden" (sekundär) + „Bot hinzufügen" (primär).
- `@yield('content')`.
- Footer: Logo, Spalten (Produkt / Rechtliches / Community), DSGVO/Impressum-Links, Copyright.
- Yields: `@section('title')`, `@section('content')`.
### `layouts/dashboard.blade.php` (Dashboard **und** Admin — eine Datei, Nav schaltet um)
- **Fixe Sidebar links** (`w-64`), Card-Hintergrund, Border rechts:
- oben Logo + Wortmarke.
- **Nav-Modus per Route erkannt:**
- `request()->routeIs('admin.*')` → **Admin-Nav:** Übersicht (`admin.index`), Nutzer, Server, Bots. Badge „ADMIN".
- sonst wenn `$guild` gesetzt → **Guild-Nav:** Übersicht, Einstellungen, Tickets, Bewerbungen, Logs, Billing (jeweils `route('dashboard.*', $guild)`), Divider, gedimmte „Bald verfügbar"-Gruppe: Guard, Level, Partner (mit „Bald"-Pill).
- sonst → nur „Übersicht" (Serverauswahl).
- Aktiver Link: `bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white` + linker Akzentstrich; sonst `text-zinc-500 hover:…`.
- unten User-Chip: Avatar + `{{ auth()->user()->global_name ?? auth()->user()->username }}` + gedimmter Discord-Tag + Logout-Icon (POST `route('logout')`).
- **Topbar** (sticky, `h-16`, border-b): links Server-Selector (nur im Guild-Kontext: rundes Guild-Icon + Name + Chevron — Dropdown zu anderen Servern), rechts „● Bot Online"-Pill (nur wenn `$guild->bot_joined`), Plan-Badge, Theme-Toggle, Glocke, Avatar.
- **Content-Bereich:** `p-6 md:p-8`, `max-w-7xl mx-auto`, `@yield('content')`.
- Flash-Messages (`session('success')`/`session('error')`) als Toast oben rechts (Alpine, auto-dismiss 4s).
- Erwartet optional `$guild` (Guild-Kontext). Views setzen `@section('title')` + `@section('content')`.
### Verwendung in Views
```blade
@extends('layouts.dashboard')
@section('title', 'Übersicht · TacForce Pro')
@section('content')
Übersicht
...
@endsection
```
## 6. Referenz-Optik
Das fertige Vorbild ist **`design-mockups/04-minimal-slate.html`** — Sidebar, Stat-Cards, Modul-Toggles, Ticket-Tabelle, Activity-Feed, Mini-Chart. Views sollen diesen Look 1:1 treffen, nur eben serverseitig mit echten Daten (Blade `@foreach`, `@if`, `$variablen`) statt statischem HTML — und **zusätzlich hell-fähig** (alle Farben mit `dark:`-Varianten wie oben).
## 7. Build (Produktion, optional/später)
CDN-Tailwind ist super für Dev. Für Prod: `npm i -D tailwindcss`, `npx tailwindcss -i resources/css/app.css -o public/css/app.css --minify` (Config `content: ['./resources/views/**/*.blade.php']`), dann im Layout die CDN-Zeile durch `