Redesign facility grids as unified playground surfaces

Replace floating card buttons with a single sport-surface container that
feels like one field/court/pool divided by painted lines. Type-based
theming (green turf for fields, aqua for pools, tan for courts, neutral
for gyms). CSS component system via @theme + @layer components.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/Livewire/Facilities/SpaceAssignmentWizard.php

@@ -311,8 +311,11 @@ public function render()
                 ->get();
         }
 
+        $facilityType = collect($this->facilities)->firstWhere('id', $this->selectedFacilityId)['type'] ?? 'other';
+
         return view('livewire.facilities.space-assignment-wizard', [
             'searchResults' => $searchResults,
+            'facilityType' => $facilityType,
         ]);
     }
 }

resources/css/app.css

 @import 'tailwindcss';
 
+@theme {
+    --color-surface-field: oklch(0.95 0.025 145);
+    --color-surface-pool: oklch(0.94 0.035 220);
+    --color-surface-court: oklch(0.94 0.02 65);
+    --color-surface-neutral: oklch(0.96 0.005 260);
+    --color-boundary-field: oklch(0.40 0.12 150);
+    --color-boundary-pool: oklch(0.40 0.14 230);
+    --color-boundary-court: oklch(0.45 0.08 55);
+    --color-boundary-neutral: oklch(0.50 0.02 260);
+    --color-line-field: oklch(0.82 0.04 145);
+    --color-line-pool: oklch(0.78 0.06 220);
+    --color-line-court: oklch(0.80 0.03 60);
+    --color-line-neutral: oklch(0.85 0.008 260);
+}
+
+@layer components {
+    .facility-surface {
+        display: grid;
+        gap: 0;
+        border-radius: 1rem;
+        overflow: hidden;
+        border: 3px solid var(--surface-boundary);
+        box-shadow: inset 0 2px 12px oklch(0 0 0 / 0.06);
+        background: var(--surface-bg);
+        --surface-line: var(--color-line-neutral);
+        --surface-bg: var(--color-surface-neutral);
+        --surface-boundary: var(--color-boundary-neutral);
+    }
+
+    .facility-surface > * {
+        border-color: var(--surface-line);
+    }
+
+    .facility-surface--field,
+    .facility-surface--outdoor,
+    .facility-surface--track {
+        --surface-bg: var(--color-surface-field);
+        --surface-boundary: var(--color-boundary-field);
+        --surface-line: var(--color-line-field);
+    }
+
+    .facility-surface--pool {
+        --surface-bg: var(--color-surface-pool);
+        --surface-boundary: var(--color-boundary-pool);
+        --surface-line: var(--color-line-pool);
+    }
+
+    .facility-surface--court {
+        --surface-bg: var(--color-surface-court);
+        --surface-boundary: var(--color-boundary-court);
+        --surface-line: var(--color-line-court);
+    }
+
+    .facility-surface--gym,
+    .facility-surface--hall,
+    .facility-surface--room,
+    .facility-surface--other {
+        --surface-bg: var(--color-surface-neutral);
+        --surface-boundary: var(--color-boundary-neutral);
+        --surface-line: var(--color-line-neutral);
+    }
+
+    .facility-surface--lanes {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .facility-surface--lanes > *:not(:last-child) {
+        border-bottom: 2px dashed var(--surface-line);
+    }
+
+    .facility-cell--unavailable {
+        background-image: repeating-linear-gradient(
+            -45deg,
+            transparent,
+            transparent 5px,
+            oklch(0.5 0 0 / 0.08) 5px,
+            oklch(0.5 0 0 / 0.08) 6px
+        );
+    }
+
+    .facility-cell--occupied {
+        background-image: repeating-linear-gradient(
+            -45deg,
+            transparent,
+            transparent 6px,
+            oklch(0.6 0.15 25 / 0.08) 6px,
+            oklch(0.6 0.15 25 / 0.08) 7px
+        );
+    }
+
+    .facility-cell--selected {
+        background-color: oklch(0.65 0.2 250 / 0.2);
+        box-shadow: inset 0 0 0 2.5px oklch(0.55 0.2 250 / 0.7);
+    }
+
+    .facility-cell--drop-target {
+        background-color: oklch(0.7 0.15 155 / 0.2);
+        box-shadow: inset 0 0 0 2.5px oklch(0.55 0.15 155 / 0.6);
+    }
+}
+
 @layer base {
     html {
         direction: rtl;