Build [v1.14.27]

.planning/STATE.md

@@ -0,0 +1,22 @@
+# STATE.md
+
+## Current Position
+- **Phase:** 07.1-frontend-overhaul
+- **Plan:** 07.1-frontend-overhaul-PLAN.md
+- **Task:** 2 (Completed)
+
+## Progress
+- [x] Task 1: Update Tailwind Configuration
+- [x] Task 2: Implement Global Sharp Edges & Borders
+- [ ] Task 3: Component-Level Overhaul (Buttons & Inputs)
+- [ ] Task 4: StatCard & Data Table Refinement
+- [ ] Task 5: Layout & Viewport Adjustments
+- [ ] Task 6: Final Audit & Rule Alignment
+
+## Decisions
+- Enforced `font-weight: 400 !important` and `text-transform: none !important` globally in `globals.css` to ensure strict compliance with `AI_RULES.md` (Industrial Precision aesthetic).
+- Set `border-radius: 0 !important` and `box-shadow: none !important` globally.
+- Used `Space Grotesk` from Google Fonts.
+
+## Blockers
+- None.

.planning/phases/07.1-frontend-overhaul/PLAN.md

@@ -0,0 +1,136 @@
+---
+wave: 1
+depends_on: ["07-config-consolidation"]
+files_modified: [
+  "frontend/tailwind.config.ts",
+  "frontend/styles/globals.css",
+  "frontend/components/ui/StatCard.tsx",
+  "frontend/components/ui/Button.tsx",
+  "frontend/components/ui/Input.tsx",
+  "frontend/app/layout.tsx",
+  "frontend/app/page.tsx",
+  "AI_RULES.md"
+]
+autonomous: true
+---
+
+# Phase 7.1: Frontend UI/UX Overhaul (Industrial Precision) - Implementation Plan
+
+**Objective:** Implement the "Industrial Precision" design system from `DESIGN.md` across all frontend pages, ensuring high-contrast signaling, sharp corners (0px radius), and a technical, utilitarian aesthetic while maintaining compliance with mandatory typography rules.
+
+**Success Criteria:**
+- Tailwind configuration updated with the new "Industrial Precision" color palette.
+- Global styles updated to enforce 0px border radius (sharp corners) for all components.
+- Typography updated to use "Space Grotesk" as the primary font.
+- Visual hierarchy achieved through size, color, and spacing (preserving the "NO BOLD" and "NO UPPERCASE" rules from AI_RULES.md).
+- StatCards, Buttons, and Inputs reflect the new brutalist/industrial aesthetic.
+- All pages (Dashboard, Inventory, Admin, Logs) updated to use the new container and margin system.
+
+---
+
+## Task 1: Update Tailwind Configuration [COMPLETED]
+
+**Read First:**
+- `DESIGN.md` for color palette and spacing units.
+- `frontend/tailwind.config.ts` for current configuration.
+
+**Action:**
+1. Update `tailwind.config.ts` with the "Industrial Precision" colors:
+   - Primary: `#F58618` (Caution Orange)
+   - Background: `#131313`
+   - Surfaces: `#0A0A0A`, `#121212`, `#1A1A1A`
+2. Add "Space Grotesk" to the fontFamily configuration.
+3. Configure the spacing unit (4px) and 12-column grid.
+
+**Acceptance Criteria:**
+- `tailwind.config.ts` includes the new color palette.
+- `Space Grotesk` is defined as the default sans font.
+- Spacing units are aligned with `DESIGN.md`.
+
+---
+
+## Task 2: Implement Global Sharp Edges & Borders [COMPLETED]
+
+**Read First:**
+- `DESIGN.md` (Elevation & Depth, Shapes).
+- `frontend/styles/globals.css`.
+
+**Action:**
+1. Update `globals.css` to set `border-radius: 0` globally or through Tailwind layer overrides.
+2. Implement the "Bold Borders" style: 1px or 2px solid borders for levels 1 and 2.
+3. Remove all shadows and blurs, replacing them with tonal layers as per `DESIGN.md`.
+
+**Acceptance Criteria:**
+- UI components have sharp 90-degree corners.
+- Shadows are removed from the entire application.
+- Borders use the specified technical colors (`#222222`, `#F58618`).
+
+---
+
+## Task 3: Component-Level Overhaul (Buttons & Inputs)
+
+**Read First:**
+- `DESIGN.md` (Components section).
+- `frontend/components/ui/Button.tsx` (if it exists, otherwise standard elements).
+- `frontend/components/ui/Input.tsx`.
+
+**Action:**
+1. Update Button styles: Solid `#F58618` for primary, transparent with 1px border for secondary.
+2. Update Input styles: Darker background (`#000000`), bottom-only or full 1px border.
+3. Ensure no rounded corners and no bold text.
+
+**Acceptance Criteria:**
+- Buttons and Inputs match the "Industrial Precision" visual style.
+- Active/Focus states use the Caution Orange border.
+
+---
+
+## Task 4: StatCard & Data Table Refinement
+
+**Read First:**
+- `DESIGN.md` (StatCards, Data Tables).
+- `AI_RULES.md` (StatCard Typography Rule).
+- `frontend/components/ui/StatCard.tsx`.
+
+**Action:**
+1. Refine StatCards to use high-contrast blocks and tight internal padding.
+2. Ensure numeric values match label size (as per AI_RULES.md) but use color for emphasis.
+3. Update Data Tables: remove zebra-striping, use 1px horizontal dividers, apply technical headers.
+
+**Acceptance Criteria:**
+- StatCards provide high "glanceability" without overwhelming font sizes.
+- Data Tables reflect the "glass cockpit" philosophy with high information density.
+
+---
+
+## Task 5: Layout & Viewport Adjustments
+
+**Read First:**
+- `DESIGN.md` (Layout & Spacing).
+- `frontend/app/layout.tsx`.
+- `frontend/app/page.tsx` and major route pages.
+
+**Action:**
+1. Set the primary viewport margins (24px-32px).
+2. Ensure main containers use `max-w-7xl` (consistent with AI_RULES.md).
+3. Update page headers to match the unified icon box + title standard.
+
+**Acceptance Criteria:**
+- Spacing is compressed internally but framed by generous outer margins.
+- All pages feel consistent with the "high-end command center" aesthetic.
+
+---
+
+## Task 6: Final Audit & Rule Alignment
+
+**Read First:**
+- `AI_RULES.md` and `GEMINI.md`.
+
+**Action:**
+1. Audit the new UI for any accidental BOLD or UPPERCASE text.
+2. Re-verify contrast ratios (7:1 target for status-critical text).
+3. Ensure "Lucide Icons" are used exclusively.
+
+**Acceptance Criteria:**
+- 100% compliance with AI_RULES.md.
+- Visual style perfectly aligns with `DESIGN.md` spirit.

.standalone.pid

@@ -1,3 +1,2 @@
-5813
-5814
-5831
+21336
+21347

AI_RULES.md

@@ -15,7 +15,7 @@ This is the **Single Source of Truth** for ALL AI agents. Refer to [PROJECT_ARCH
 
 ## 2. ENGINEERING & OPERATIONAL LAWS
 - **ENGLISH ONLY**: Interfaces, code, variables, and docs MUST be in English. Translate any Romanian text found in code immediately.
-- **GIT PROTOCOL**: Use system `git`. Never push or use `--force` unless explicitly asked.
+- **GIT PROTOCOL**: Use system `git`. Never push or use `--force` unless explicitly asked. Never push to master unless user say so. The maik work is done in "dev" git branch, and in other branches only user say so explicitly.
 - **VERSIONING**: Update `VERSION.json` on every commit using `scripts/save_version.py`.
 - **SSOT INTEGRITY**: Every feature change MUST update: `README.md`, `USER_GUIDE.md`, `PROJECT_ARCHITECTURE.md`, `DEPLOYMENT.md`, and `dev_docs/PLAN.md`.
 - **CODE QUALITY**: Files under 300 lines, complexity < 10, strict Single Responsibility Principle.
@@ -27,6 +27,7 @@ This is the **Single Source of Truth** for ALL AI agents. Refer to [PROJECT_ARCH
   - **NO BOLD FONTS**: Use `font-normal` throughout. Hierarchy via size and color only.
   - **NO `tracking-widest`**.
   - **StatCard Typography**: Numeric values in StatCards MUST match the exact text size of their corresponding labels (e.g., `text-base md:text-lg`) to avoid overwhelming the density of the component.
+- **Shapes**: All components MUST use 0px border radius (sharp corners) and NO box-shadows. Depth via tonal layers and borders only.
 - **Layout**: Main pages MUST use `max-w-7xl`.
 - **Unified Headers**: Icon box (`p-4 bg-primary/10 border-primary/20`) + Title (`text-3xl font-normal`).
 - **Iconography**: Use **Lucide Icons** exclusively.

DESIGN.md

@@ -0,0 +1,149 @@
+---
+name: Industrial Precision
+colors:
+  surface: '#131313'
+  surface-dim: '#131313'
+  surface-bright: '#3a3939'
+  surface-container-lowest: '#0e0e0e'
+  surface-container-low: '#1c1b1b'
+  surface-container: '#201f1f'
+  surface-container-high: '#2a2a2a'
+  surface-container-highest: '#353534'
+  on-surface: '#e5e2e1'
+  on-surface-variant: '#ddc1af'
+  inverse-surface: '#e5e2e1'
+  inverse-on-surface: '#313030'
+  outline: '#a48c7c'
+  outline-variant: '#564335'
+  surface-tint: '#ffb781'
+  primary: '#ffb781'
+  on-primary: '#4e2600'
+  primary-container: '#f58618'
+  on-primary-container: '#5b2d00'
+  inverse-primary: '#924c00'
+  secondary: '#c8c6c5'
+  on-secondary: '#303030'
+  secondary-container: '#474746'
+  on-secondary-container: '#b7b5b4'
+  tertiary: '#00e639'
+  on-tertiary: '#003907'
+  tertiary-container: '#00bd2d'
+  on-tertiary-container: '#00440a'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#ffdcc4'
+  primary-fixed-dim: '#ffb781'
+  on-primary-fixed: '#2f1400'
+  on-primary-fixed-variant: '#6f3800'
+  secondary-fixed: '#e5e2e1'
+  secondary-fixed-dim: '#c8c6c5'
+  on-secondary-fixed: '#1b1c1c'
+  on-secondary-fixed-variant: '#474746'
+  tertiary-fixed: '#72ff70'
+  tertiary-fixed-dim: '#00e639'
+  on-tertiary-fixed: '#002203'
+  on-tertiary-fixed-variant: '#00530e'
+  background: '#131313'
+  on-background: '#e5e2e1'
+  surface-variant: '#353534'
+typography:
+  headline-lg:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: '1.1'
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+    letterSpacing: -0.01em
+  headline-sm:
+    fontFamily: Space Grotesk
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.2'
+  body-lg:
+    fontFamily: Space Grotesk
+    fontSize: 18px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  body-md:
+    fontFamily: Space Grotesk
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  label-md:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: '500'
+    lineHeight: '1'
+    letterSpacing: 0.05em
+  mono-data:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: '700'
+    lineHeight: '1'
+    letterSpacing: 0.02em
+spacing:
+  unit: 4px
+  gutter: 16px
+  margin: 32px
+  container-gap: 24px
+  stack-sm: 8px
+  stack-md: 16px
+---
+
+## Brand & Style
+
+This design system is engineered for the high-stakes environment of a datacenter, where speed of comprehension and operational uptime are paramount. The brand personality is technical, authoritative, and unapologetically utilitarian. It draws heavily from **Minimalist Industrialism** and **Brutalism**, stripping away decorative flourishes in favor of structural clarity and high-contrast signaling.
+
+The emotional response is one of controlled intensity—evoking the feeling of a high-end command center. It prioritizes "glanceability," ensuring that critical status changes are immediately perceptible against a void-like backdrop. The aesthetic mimics physical hardware interfaces: rack-mounted servers, heavy-duty machinery, and tactical displays.
+
+## Colors
+
+The palette is anchored by a deep charcoal and true black foundation to minimize eye strain in low-light environments and maximize contrast. 
+
+- **Primary (#F58618):** "Caution Orange" is used exclusively for primary actions, critical state indicators, and highlighting active technical paths.
+- **Surface Palette:** Backgrounds utilize a tiered black system: `#0A0A0A` for the base, `#121212` for containers, and `#1A1A1A` for hover states.
+- **Functional Accents:** A terminal-inspired green (`#00FF41`) is used for "Healthy" status, while a cold white (`#FFFFFF`) and mid-grey (`#888888`) handle content hierarchy.
+- **Contrast:** Maintain a minimum 7:1 contrast ratio for all status-critical text against the dark backgrounds.
+
+## Typography
+
+The typography utilizes **Space Grotesk** across all levels to maintain a technical, geometric rigour. Its idiosyncratic letterforms provide a futuristic "code-like" feel while remaining highly legible at small sizes.
+
+- **Headlines:** Use tight tracking and heavy weights to create a sense of structural density.
+- **Labels:** Small caps or all-caps are preferred for metadata and technical specs to differentiate them from prose.
+- **Numeric Data:** Ensure tabular figures are used for metrics, alignment of IP addresses, and throughput values to facilitate easy vertical scanning of logs and tables.
+
+## Layout & Spacing
+
+This design system employs a **fixed grid** model for primary dashboards to ensure telemetry data remains in a predictable location. A 12-column system is used for high-level layouts, but interior modules utilize a strict 4px baseline grid.
+
+Spacing is compressed to increase information density, reflecting the "glass cockpit" philosophy where more data is preferable to excessive whitespace. Use heavy 24px-32px margins for the primary viewport to frame the content, but keep internal component padding tight (8px-12px) to maximize screen real estate for logs and graphs.
+
+## Elevation & Depth
+
+Depth is conveyed through **Bold Borders** and **Tonal Layers** rather than shadows. In a datacenter environment, shadows can muddy the interface; instead, we use high-contrast outlines to define hierarchy.
+
+- **Level 0 (Base):** `#0A0A0A`
+- **Level 1 (Cards/Panels):** `#121212` with a 1px solid border of `#222222`.
+- **Level 2 (Modals/Popovers):** `#1A1A1A` with a 2px solid border of the Primary Orange or a high-visibility grey.
+- **Active State:** Elements in focus or active operation receive a 1px solid `#F58618` border to immediately draw the eye. No blurs or gradients are permitted.
+
+## Shapes
+
+The shape language is strictly **Sharp (0px)**. 90-degree angles reinforce the industrial, hardware-centric aesthetic. This lack of rounding suggests precision and eliminates the "friendly" softness typical of consumer SaaS. Every button, input, and container must maintain a hard edge to align with the rigid grid of a server rack.
+
+## Components
+
+- **Buttons:** Rectangular with no radius. Primary buttons are solid `#F58618` with black text. Secondary buttons are transparent with a 1px white or grey border.
+- **Input Fields:** Darker than the container background (`#000000`). Use a bottom-only border or a full 1px border that changes to the primary orange on focus.
+- **Status Chips:** High-contrast blocks. "Success" is a solid green block with black text; "Alert" is a solid orange block. No rounded corners.
+- **Data Tables:** Zebra-striping is prohibited. Use 1px horizontal dividers only. Header cells must be all-caps Space Grotesk with a subtle background tint.
+- **Telemetry Charts:** Lines should be 2px thick with no smoothing (stair-step/linear interpolation only) to represent raw data accuracy. 
+- **Log Viewers:** Use the `mono-data` type style. Background should be `#000000` with a dim grey border to separate the feed from the management UI.

PROJECT_ARCHITECTURE.md

@@ -20,7 +20,7 @@ A unified system for inventory management featuring web administration, offline
 
 ### 2.2 Frontend (Web & PWA)
 - **Architecture**: Next.js 15+ (App Router, TypeScript Strict)
-- **Styling**: Tailwind CSS v3.4 (Standard typography, normal weight only)
+- **Styling**: Tailwind CSS v3.4 (Industrial Precision, Space Grotesk, normal weight only)
 - **Icons**: Lucide Icons (exclusive)
 - **Offline Persistence**: Dexie.js (IndexedDB)
 - **Scanner**: `html5-qrcode` (Client-side, offline)

README.md

@@ -56,5 +56,5 @@ To generate a clean production package:
 
 ---
 
-**Last Updated**: 2026-05-15  
-**Version**: 1.15.0 (Phase 7)
+**Last Updated**: 2026-04-25  
+**Version**: 1.14.25 (Phase 7.1)

dev_docs/PLAN.md

@@ -21,6 +21,13 @@ A unified inventory management system that eliminates manual data entry through
 
 ## 3. Active Roadmap
 
+### Phase 7.1: Frontend UI/UX Overhaul (Industrial Precision) [ACTIVE]
+- **Design System Integration**: Apply the "Industrial Precision" system from `DESIGN.md`.
+- **Component Refactoring**: Update all UI components to use sharp corners (0px) and bold borders.
+- **Color Palette Update**: Implement the high-contrast Caution Orange and tiered black surface system.
+- **Typography Alignment**: Apply Space Grotesk while strictly adhering to the "NO BOLD" and "NO UPPERCASE" rules from AI_RULES.md.
+- **Glanceability Optimization**: Increase information density in StatCards and Data Tables.
+
 ### Phase 8: Hardening & Release (PLANNED)
 - **Production Runbook**: Finalized guide for production deployment.
 - **Stress Testing**: Verify system performance with 10k+ items and multiple users.

dev_docs/SESSION_STATE.md

@@ -1,64 +1,32 @@
 # CURRENT AI WORKING SESSION — HANDOVER
 
-**Active AI:** Gemini CLI
-**Last Updated:** 2026-04-23
-<<<<<<< HEAD
-**Current Version:** v1.14.22
-**Status**: ✅ MILESTONE 7 VERIFIED | 🟢 READY FOR PHASE 8
+**Active AI:** Gemini Executor
+**Last Updated:** 2026-04-25
+**Current Version:** v1.14.26
+**Status**: 🟢 PHASE 7.1 TASK 2 COMPLETE
 
 ---
 
-## SESSION 42 EXECUTION SUMMARY — Milestone Audit & Infrastructure Hardening
+## SESSION EXECUTION SUMMARY — Task 2: Global Sharp Edges & Borders
 
-### 1. Milestone 7 Audit (COMPLETE)
-- **Verified Definition of Done**: Confirmed all Phase 7 (Config Consolidation) requirements are met.
-- **Integration Check**: Fixed a critical gap where `run_standalone.py` was not updating the frontend's `network.json`.
-- **Legacy Cleanup**: Deleted `start_server.sh`, `inventory.env.template`, and shell-based backup/restore scripts.
-- **Script Unification**: Converted `backup.sh` and `restore.sh` to modern Python tools (`scripts/restore_prod.py`).
+### 1. Global CSS Update (COMPLETE)
+- Updated `frontend/app/globals.css` to enforce `border-radius: 0 !important` globally.
+- Removed all box-shadows globally (`box-shadow: none !important`).
+- Enforced `font-weight: 400 !important` and `text-transform: none !important` to comply with `AI_RULES.md`.
+- Implemented `level-1` and `level-2` classes for "Industrial Precision" borders.
+- Updated scrollbar to match industrial aesthetic (no radius, technical colors).
+- Added `status-success` and `status-alert` high-contrast utility classes.
 
-### 2. UI/UX "Premium" Fidelity Fixes
-- **Typography**: Removed all `font-weight: 600` and `font-medium` instances to comply with "NO BOLD" rule.
-- **Copywriting**: Replaced generic "Cancel" buttons with contextual verbs ("Keep Item", "Discard Draft", etc.).
-- **Consistency**: Fixed uppercase "DELETE" to Title Case "Delete" while preserving safety confirmation logic.
+### 2. AI Rules Update
+- Updated `AI_RULES.md` to include a mandatory rule for 0px border radius and no shadows.
 
-### 3. Infrastructure Stability
-- **LDAP Config**: Refactored `auth.py` to use `ConfigManager` for saving settings directly to `backend.yaml`, eliminating legacy JSON side-files.
-- **Caddy Proxy**: Resolved Port 80 conflict by disabling automatic HTTP->HTTPS redirects in standalone mode.
-=======
-**Current Version:** v1.14.20
-**Status**: ✅ STATCARD TYPOGRAPHY REFINED | 🟢 READY FOR PHASE 8
+### 3. Documentation Update
+- Marked Task 2 as completed in `.planning/phases/07.1-frontend-overhaul/PLAN.md`.
 
 ---
 
-## SESSION 44 EXECUTION SUMMARY — StatCard UI Tweak
+## NEXT STEPS (Phase 7.1: Frontend UI/UX Overhaul)
 
-### 1. StatCard Typography Adjustment
-- **Constraint**: Reduced numeric value font size in dashboard cards (`StatCard.tsx`) to match their label text size (`text-base md:text-lg`).
-- **Rationale**: User feedback indicated the previous large font sizes (`text-2xl md:text-3xl`) were overwhelming and disproportionate to the card's density.
-
-### 2. Rule Standardization
-- **AI_RULES.md Updated**: Formally documented the new standard in Section 3 (UI/UX Fidelity Standards). Numeric values in StatCards MUST now match label sizes to maintain visual balance.
->>>>>>> dev
-
----
-
-## NEXT STEPS (Phase 8: Hardening & Release)
-
-<<<<<<< HEAD
-1. **Production Runbook**: Create a finalized guide for production deployment.
-2. **Stress Testing**: Verify system performance with 10k+ items and multiple users.
-3. **E2E Validation**: Verify data consistency in multi-page Excel exports and Python management scripts.
-4. **Final Polish**: Perform a final accessibility and performance audit before v1.15.0 stable release.
-=======
-1. **Extraction Validation**:
-   - Run sample images of RAID cards and NVMe drives to confirm `spare parts - <type>` categorization.
-2. **UX Refinement**:
-   - Ensure the Admin UI displays these new categories correctly.
-3. **v1.15.0 Milestone**:
-   - Finalize the release candidate.
-
----
-
-✓ All tasks for this session are implemented, verified, and committed. 
-✓ Services are currently RUNNING in the background.
->>>>>>> dev
+1. **Task 3: Component-Level Overhaul**: Update Buttons and Inputs.
+2. **Task 4: StatCard & Data Table Refinement**.
+3. **Task 5: Layout & Viewport Adjustments**.

frontend/VERSION.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.14.23",
-  "last_build": "2026-04-23-1823",
+  "version": "1.14.27",
+  "last_build": "2026-04-25-1226",
   "codename": "ConfigCore",
-  "commit": "7c4441a9"
+  "commit": "c15a80a5"
 }

frontend/app/globals.css

@@ -1,54 +1,92 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  /* Dark Mode (OLED) - Improved Contrast Palette */
-  --background: #0A0E27;
-  --foreground: #F0F4F8;
-  --primary: #3B82F6;
-  --primary-foreground: #FFFFFF;
-  --font-code: 'Fira Code', monospace;
-  --font-sans: 'Fira Sans', sans-serif;
+@layer base {
+  :root {
+    --background: #131313;
+    --foreground: #FFFFFF;
+    --primary: #F58618;
+    --border: #222222;
+    --muted: #888888;
+  }
+
+  * {
+    @apply border-border;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased font-normal;
+    font-family: 'Space Grotesk', sans-serif;
+    letter-spacing: -0.01em;
+  }
+
+  /* Strict "NO BOLD" enforcement from AI_RULES.md */
+  *, *::before, *::after {
+    font-weight: 400 !important;
+  }
+
+  /* No uppercase/italics as per AI_RULES.md */
+  *, *::before, *::after {
+    text-transform: none !important;
+    font-style: normal !important;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply tracking-tighter;
+  }
 }
 
-body {
-  color: var(--foreground);
-  background-color: var(--background);
-  font-family: var(--font-sans);
-  font-weight: 400;
+@layer components {
+  /* Level 1 (Cards/Panels): #121212 with a 1px solid border of #222222 */
+  .level-1 {
+    @apply bg-[#121212] border border-[#222222];
+  }
+
+  /* Level 2 (Modals/Popovers): #1A1A1A with a 2px solid border of the Primary Orange */
+  .level-2 {
+    @apply bg-[#1A1A1A] border-2 border-primary;
+  }
+  
+  /* Active State */
+  .active-border {
+    @apply border border-primary;
+  }
+
+  /* High-contrast status blocks */
+  .status-success {
+    @apply bg-[#00FF41] text-black px-2 py-0.5;
+  }
+
+  .status-alert {
+    @apply bg-[#F58618] text-black px-2 py-0.5;
+  }
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-code);
-  font-weight: 400;
-}
-
-/* Custom Scrollbar Styling */
+/* Custom Industrial Scrollbar Styling */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #020617; /* slate-950 */
+  background: #0A0A0A;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #1e293b; /* slate-800 */
-  border-radius: 10px;
-  border: 2px solid #020617; /* adds padding effect */
+  background: #222222;
+  border-radius: 0;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #334155; /* slate-700 */
+  background: #F58618;
 }
 
-/* Removed: glass-card utility (eliminated glassmorphism aesthetic) */
 @layer utilities {
-
   .text-fluid-lg {
     font-size: clamp(1.125rem, 3cqi, 1.5rem);
   }
@@ -58,15 +96,20 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   .card-title {
-    @apply text-base font-normal text-slate-100 tracking-tight;
+    @apply text-base font-normal tracking-tight;
   }
   
   .card-subtitle {
-     @apply text-xs font-normal text-slate-500 tracking-[0.08em] mt-0.5;
+     @apply text-xs font-normal text-muted-foreground tracking-tight mt-0.5;
+  }
+
+  .mono-data {
+    @apply font-normal tracking-normal;
+    font-variant-numeric: tabular-nums;
   }
 }
 
-/* Safe Area Insets for Modern Mobile Devices (iOS Notch/Home Bar) */
+/* Safe Area Insets for Modern Mobile Devices */
 .pb-safe {
   padding-bottom: env(safe-area-inset-bottom);
 }

frontend/public/network.json

@@ -4,4 +4,4 @@
   "BACKEND_SSL_PORT": 8918,
   "FRONTEND_PORT": 8917,
   "FRONTEND_SSL_PORT": 8919
-}
+}

frontend/tailwind.config.ts

@@ -4,40 +4,47 @@ const config: Config = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     fontSize: {
-      'xs': '13px',    // increased from 12px
-      'sm': '15px',    // increased from 14px
-      'base': '18px',  // increased from 16px
-      'lg': '20px',    // increased from 18px
-      'xl': '22px',    // increased from 20px
-      '2xl': '26px',   // increased from 24px
-      '3xl': '32px',   // increased from 30px
-      '4xl': '36px',
-      '5xl': '48px',
+      'xs': '12px',
+      'sm': '14px',    // Design: label-md, mono-data
+      'base': '16px',  // Design: body-md
+      'lg': '18px',    // Design: body-lg
+      'xl': '20px',
+      '2xl': '24px',   // Design: headline-sm
+      '3xl': '30px',
+      '4xl': '32px',   // Design: headline-md
+      '5xl': '48px',   // Design: headline-lg
+      '6xl': '64px',
     },
     extend: {
+      fontFamily: {
+        sans: ["'Space Grotesk'", "sans-serif"],
+      },
       colors: {
-        background: "#0A0E27",
-        foreground: "#F0F4F8",
-        surface: "#1A1F3A",
+        background: "#131313",
+        foreground: "#FFFFFF",
+        surface: "#0A0A0A",
+        "surface-container": "#121212",
+        "surface-bright": "#1A1A1A",
         primary: {
-          DEFAULT: "#3B82F6",
-          foreground: "#FFFFFF",
+          DEFAULT: "#F58618",
+          foreground: "#000000",
         },
         secondary: {
-          DEFAULT: "#C7D2E0",
-          foreground: "#0A0E27",
+          DEFAULT: "#888888",
+          foreground: "#FFFFFF",
         },
         muted: {
-          DEFAULT: "#8B95AD",
-          foreground: "#F0F4F8",
+          DEFAULT: "#444444",
+          foreground: "#888888",
         },
-        border: "#2D3561",
-        success: "#10B981",
-        error: "#EF4444",
-        warning: "#F59E0B",
+        border: "#222222",
+        success: "#00FF41",
+        error: "#FF3131",
+        warning: "#F58618",
       },
       keyframes: {
         scan: {