# Lunar Observatory — Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Transform Moon ERP's visual identity into a premium dark-first "Lunar Observatory" persona with crescent moon motifs, glassmorphism, ambient golden glow, and celestial backgrounds.

**Architecture:** Pure CSS/SCSS + SVG changes. Update global color tokens in `styles.scss`, then cascade the dark glass aesthetic through layout (sidebar, topbar), pages (login, dashboard), and global component overrides. The existing `ThemeService` dynamically applies color scheme CSS variables — we update the `navy-gold` default scheme values and add new CSS tokens. Dark mode becomes the enhanced default.

**Tech Stack:** Angular 21, SCSS, Tailwind CSS 4, PrimeNG 21, SVG

---

## Task 1: Create Moon Crescent SVG Asset

**Files:**
- Create: `src/assets/moon-crescent.svg`

**Step 1: Create the SVG file**

A thin golden crescent moon with a subtle glow filter. This will be used as the brand logo across sidebar, login, and dashboard.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
  <defs>
    <linearGradient id="moonGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffd466"/>
      <stop offset="100%" stop-color="#f5a623"/>
    </linearGradient>
    <filter id="moonGlow">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M32 4C18.745 4 8 14.745 8 28s10.745 24 24 24c5.17 0 9.99-1.637 13.926-4.42C40.09 51.717 33.16 54 26 54 13.85 54 4 44.15 4 32S13.85 10 26 10c7.16 0 13.09 2.283 18.926 6.42C41.99 12.637 37.17 4 32 4z"
        fill="url(#moonGrad)" filter="url(#moonGlow)"/>
</svg>
```

**Step 2: Verify file exists**

Run: `ls -la src/assets/moon-crescent.svg`
Expected: file exists, ~600 bytes

---

## Task 2: Update Color Tokens & Add New CSS Variables

**Files:**
- Modify: `src/styles.scss` (lines 6-35 — @theme block)

**Step 1: Update the @theme color tokens**

Replace the existing `@theme { ... }` color variables with the Lunar Observatory palette. Add new tokens `--color-lunar-glow`, `--color-star`, and `--color-glass`.

Old values → New values:
```
--color-brand:         #0f172a  →  #080c1a
--color-brand-dark:    #020617  →  #040710
--color-brand-light:   #1e293b  →  #111827
--color-brand-mid:     #334155  →  #1e293b
--color-accent:        #f59e0b  →  #f5a623
--color-accent-dark:   #d97706  →  #d4911e
--color-accent-light:  #fbbf24  →  #ffd466
--color-accent-glow:   rgba(245,158,11,0.15)  →  rgba(245,166,35,0.12)
```

Add new tokens after `--color-accent-glow`:
```scss
--color-lunar-glow: rgba(245, 166, 35, 0.06);
--color-star: rgba(255, 255, 255, 0.4);
--color-glass: rgba(8, 12, 26, 0.75);
--color-glass-border: rgba(255, 255, 255, 0.08);
--color-glass-light: rgba(255, 255, 255, 0.04);
```

Update `--color-surface-muted` (warm tint for light mode):
```
--color-surface-muted: #f8fafc  →  #faf8f3
```

**Step 2: Update the navy-gold color scheme in theme.model.ts**

Modify: `src/app/core/models/theme.model.ts` (lines 46-57)

Update the `navy-gold` scheme to match new values:
```typescript
{
  id: 'navy-gold',
  label: 'THEME.SCHEME_NAVY_GOLD',
  brand: '#080c1a',
  brandDark: '#040710',
  brandLight: '#111827',
  brandMid: '#1e293b',
  accent: '#f5a623',
  accentDark: '#d4911e',
  accentLight: '#ffd466',
  accentGlow: 'rgba(245, 166, 35, 0.12)',
},
```

**Step 3: Add new CSS tokens to ThemeService.applyColorScheme()**

Modify: `src/app/core/services/theme.service.ts` (lines 308-318)

After the existing `setProperty` calls, add:
```typescript
// Lunar glow tokens (derived from accent)
root.style.setProperty('--color-lunar-glow', scheme.accentGlow.replace(/[\d.]+\)$/, '0.06)'));
```

**Step 4: Build and verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds with no errors

**Step 5: Commit**

```bash
git add src/assets/moon-crescent.svg src/styles.scss src/app/core/models/theme.model.ts src/app/core/services/theme.service.ts
git commit -m "feat: update color tokens to Lunar Observatory palette"
```

---

## Task 3: Add Global CSS Animations (Stars, Shimmer, Glow)

**Files:**
- Modify: `src/styles.scss` (add after the existing @keyframes in @theme block)

**Step 1: Add new keyframes to the @theme block**

Add these after the existing `glow-pulse` keyframe (around line 58):

```scss
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes shimmer-sweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes crescent-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes lunar-halo {
  0%, 100% { box-shadow: 0 0 20px rgba(245,166,35,0.15), 0 0 60px rgba(245,166,35,0.05); }
  50% { box-shadow: 0 0 30px rgba(245,166,35,0.25), 0 0 80px rgba(245,166,35,0.08); }
}
```

Add animation tokens below existing `--animate-glow`:
```scss
--animate-twinkle: twinkle 3s ease-in-out infinite;
--animate-shimmer: shimmer-sweep 2s linear;
--animate-crescent-spin: crescent-spin 1.5s linear infinite;
--animate-lunar-halo: lunar-halo 3s ease-in-out infinite;
```

**Step 2: Add star field utility class (after @theme block)**

Add after the `router-outlet + *` rule (~line 86):

```scss
/* ===== Star Field Background ===== */
.star-field {
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 10% 20%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 30% 70%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 50% 30%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 70% 80%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 90% 10%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 20% 50%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 60% 60%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 80% 40%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 40% 15%, var(--color-star) 50%, transparent 100%),
      radial-gradient(1px 1px at 15% 85%, var(--color-star) 50%, transparent 100%);
    background-size: 300px 300px;
    animation: twinkle 4s ease-in-out infinite;
  }
  &::after {
    background-size: 400px 400px;
    animation-delay: 1.5s;
    animation-duration: 5s;
    opacity: 0.6;
  }
}

/* ===== Glass Surface Utility ===== */
.glass-surface {
  background: var(--color-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--color-glass-border) !important;
}

/* ===== Gold Shimmer Button ===== */
.shimmer-btn:hover {
  background-size: 200% auto !important;
  background-image: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent-light) 50%,
    var(--color-accent) 100%
  ) !important;
  animation: shimmer-sweep 1.5s ease-in-out !important;
}
```

**Step 3: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 4: Commit**

```bash
git add src/styles.scss
git commit -m "feat: add star field, glass surface, and shimmer animations"
```

---

## Task 4: Dark Mode Overrides — Glass & Lunar Glow

**Files:**
- Modify: `src/styles.scss` (dark mode section, lines 512-625)

**Step 1: Update the dark mode base overrides**

Update `body.dark-mode { ... }` section. Key changes:

1. Background → deeper:
```scss
body.dark-mode {
  background: #040710;  /* was #0f172a */
```

2. Surface overrides → darker:
```scss
  --color-surface: #111827;        /* was #1e293b */
  --color-surface-muted: #080c1a;  /* was #0f172a */
  --color-surface-hover: #1e293b;  /* was #334155 */
  --color-surface-border: #1e293b; /* was #475569 */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #64748b;
```

3. Scrollbar → dimmer:
```scss
  ::-webkit-scrollbar-thumb { background: #1e293b; }  /* was #475569 */
```

4. Table card → glass:
```scss
  .table-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    border-color: var(--color-glass-border);
  }
```

5. Table rows → glass background:
```scss
  .p-datatable {
    background: transparent !important;
  }
  .p-datatable .p-datatable-table-container,
  .p-datatable .p-datatable-wrapper,
  .p-datatable-table-container {
    background: transparent !important;
  }
  .p-datatable .p-datatable-tbody > tr {
    background: transparent !important;
    &:hover > td, &:hover > .p-datatable-row-cell {
      background: var(--color-lunar-glow) !important;
      color: #f1f5f9 !important;
    }
  }
```

6. Table header → deeper dark:
```scss
  .p-datatable .p-datatable-thead > tr > th,
  .p-datatable-header-cell {
    background: rgba(4, 7, 16, 0.8) !important;  /* was #0f172a */
    color: #94a3b8 !important;
    border-bottom-color: var(--color-glass-border) !important;
  }
```

7. Dialog → glass effect:
```scss
  .p-dialog .p-dialog-header {
    background: rgba(17, 24, 39, 0.95) !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--color-glass-border) !important;
  }
  .p-dialog .p-dialog-content {
    background: rgba(17, 24, 39, 0.95) !important;
  }
  .p-dialog .p-dialog-footer {
    background: rgba(8, 12, 26, 0.95) !important;
    border-top-color: var(--color-glass-border) !important;
  }
```

8. Inputs → deeper dark with glow on focus:
```scss
  .p-inputtext, .p-select, .p-datepicker .p-inputtext, .p-textarea {
    background: #080c1a !important;  /* was #0f172a */
    border-color: rgba(255, 255, 255, 0.1) !important;  /* was #475569 */
    color: #f1f5f9 !important;
    &:focus {
      border-color: var(--color-accent) !important;
      box-shadow: 0 0 0 3px var(--color-accent-glow), 0 0 20px var(--color-lunar-glow) !important;
    }
  }
```

9. Topbar → glass:
```scss
  header.fixed {
    background: rgba(8, 12, 26, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--color-glass-border) !important;
  }
```

10. Paginator, select overlay, popover, tabs → glass dark:
```scss
  .p-paginator {
    background: rgba(17, 24, 39, 0.7) !important;
    border-top-color: var(--color-glass-border) !important;
  }
  .p-select-overlay { background: rgba(17, 24, 39, 0.95) !important; backdrop-filter: blur(12px); }
  .p-popover { background: rgba(17, 24, 39, 0.95) !important; border-color: var(--color-glass-border) !important; backdrop-filter: blur(12px); }
  .p-tabs .p-tablist { background: rgba(17, 24, 39, 0.7) !important; border-bottom-color: var(--color-glass-border) !important; }
```

11. Info cards → glass:
```scss
  .info-card, .chart-card {
    background: rgba(17, 24, 39, 0.6);
    border-color: var(--color-glass-border);
    backdrop-filter: blur(12px);
  }
```

12. Add gold primary button shimmer:
```scss
  .p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):not(.p-button-success):not(.p-button-danger):not(.p-button-warning):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):not(.p-button-contrast) {
    &:hover {
      background-size: 200% auto !important;
      background-image: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%) !important;
    }
  }
```

**Step 2: Update dark mode + filled inputs**

```scss
body.dark-mode.input-filled {
  .p-inputtext, .p-select, .p-datepicker .p-inputtext, .p-textarea, .p-inputnumber-input {
    background: rgba(8, 12, 26, 0.8) !important;  /* was #0f172a */
    border-color: transparent !important;
    &:focus { background: #111827 !important; }  /* was #1e293b */
  }
}
```

**Step 3: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 4: Commit**

```bash
git add src/styles.scss
git commit -m "feat: dark mode glass surfaces and lunar glow effects"
```

---

## Task 5: Login Page — Moonrise Redesign

**Files:**
- Modify: `src/app/features/auth/login/login.component.html`
- Modify: `src/app/features/auth/login/login.component.scss`

**Step 1: Update login HTML**

Replace the brand panel (login-left) to use the crescent SVG and add star-field class:

```html
<div class="login-container star-field">
  <div class="login-left">
    <div class="brand-section">
      <div class="moon-icon">
        <img src="assets/moon-crescent.svg" alt="Moon" width="64" height="64" />
      </div>
      <h1>Moon ERP</h1>
      <p>{{ 'APP.SUBTITLE' | translate }}</p>
    </div>
  </div>

  <div class="login-right">
    <!-- keep existing login-right content unchanged -->
```

**Step 2: Update login SCSS**

Major changes:
- `login-container`: dark bg (`#040710`), star-field
- `login-left`: background becomes glass over starfield, crescent glow effect
- `login-right` → `login-form-wrapper`: glass card effect
- `moon-icon`: golden lunar halo animation

```scss
.login-container {
  display: flex;
  min-height: 100vh;
  background: #040710;
  position: relative;
  overflow: hidden;
}

.login-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,166,35,0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: lunar-halo 4s ease-in-out infinite;
  }

  .brand-section {
    text-align: center;
    color: #fff;
    z-index: 2;

    .moon-icon {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgba(245, 166, 35, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      border: 1px solid rgba(245, 166, 35, 0.15);
      animation: lunar-halo 3s ease-in-out infinite;

      img { width: 56px; height: 56px; }
    }

    h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      letter-spacing: 1px;
      background: linear-gradient(135deg, #fff 0%, var(--color-accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    p {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 0.3px;
    }
  }
}

.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem;
  z-index: 2;
}

.lang-toggle {
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 3;

  .lang-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.45rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8125rem;
    transition: all 0.15s;
    backdrop-filter: blur(8px);

    &:hover {
      background: rgba(245, 166, 35, 0.12);
      border-color: rgba(245, 166, 35, 0.25);
      color: var(--color-accent);
    }
  }
}

.login-form-wrapper {
  width: 100%;
  max-width: 420px;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

  h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 1.5rem;
  }
}

.form-field {
  margin-bottom: 1.25rem;

  label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: #cbd5e1;
    font-size: 0.8125rem;
  }

  .p-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
  }
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  label { color: #94a3b8; }
}

:host ::ng-deep {
  .login-btn {
    background: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-brand) !important;
    font-weight: 700 !important;
    height: 48px;
    font-size: 0.9375rem;
    border-radius: 10px !important;
    margin-top: 0.75rem;
    box-shadow: 0 4px 20px rgba(245, 166, 35, 0.2) !important;
    transition: all 0.15s ease !important;

    &:hover {
      background-size: 200% auto !important;
      background-image: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%) !important;
      box-shadow: 0 6px 30px rgba(245, 166, 35, 0.3) !important;
    }
  }

  .p-password { width: 100%; }

  .p-inputtext {
    width: 100%;
    height: 44px;
    border-radius: 8px !important;
    background: rgba(8, 12, 26, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    transition: border-color 0.15s ease !important;

    &::placeholder { color: rgba(255, 255, 255, 0.3) !important; }
    &:hover { border-color: rgba(255, 255, 255, 0.18) !important; }
    &:focus {
      border-color: var(--color-accent) !important;
      box-shadow: 0 0 0 3px var(--color-accent-glow), 0 0 20px var(--color-lunar-glow) !important;
    }
  }
}

.register-link {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: #94a3b8;

  a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    margin-inline-start: 0.25rem;
    &:hover { text-decoration: underline; }
  }
}

@media (max-width: 768px) {
  .login-container { flex-direction: column; }
  .login-left {
    min-height: 200px;
    flex: none;
    .brand-section {
      .moon-icon { width: 70px; height: 70px; img { width: 42px; height: 42px; } }
      h1 { font-size: 2rem; }
    }
  }
  .login-form-wrapper { padding: 1.5rem; }
}
```

**Step 3: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 4: Commit**

```bash
git add src/app/features/auth/login/
git commit -m "feat: login page moonrise redesign with star field and glass card"
```

---

## Task 6: Sidebar — Glass Effect & Crescent Logo

**Files:**
- Modify: `src/app/layout/sidebar/sidebar.component.html` (lines 6-21, 155-161, 288-293)
- Modify: `src/app/layout/sidebar/sidebar.component.scss`

**Step 1: Replace pi-moon icon with crescent SVG in all 3 sidebar variants**

In compact sidebar (~line 17): replace `<i class="pi pi-moon text-accent text-[1.6rem] min-w-8 text-center"></i>` with:
```html
<img src="assets/moon-crescent.svg" alt="Moon" class="w-7 h-7 min-w-8" />
```

In full sidebar (~line 159): replace `<i class="pi pi-moon text-accent text-[1.5rem]"></i>` with:
```html
<img src="assets/moon-crescent.svg" alt="Moon" class="w-6 h-6" />
```

In mini sidebar (~line 292): replace `<i class="pi pi-moon text-accent text-[1.6rem]"></i>` with:
```html
<img src="assets/moon-crescent.svg" alt="Moon" class="w-7 h-7" />
```

**Step 2: Add glass effect to compact sidebar Tailwind classes**

On the compact sidebar `<aside>` element (~line 7-9), change:
```
bg-gradient-to-b from-brand to-brand-dark
```
to:
```
bg-brand/85 backdrop-blur-xl border-e border-white/[0.08]
```

**Step 3: Update sidebar SCSS — add golden top border and glow**

Add to sidebar.component.scss:

```scss
/* Golden accent line at top of sidebar */
.sidebar-expanded, .sidebar-mini {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    z-index: 10;
  }
}

/* Active nav link — crescent-style arc indicator */
.nav-link.active {
  background: rgba(245, 166, 35, 0.12);
  color: var(--color-accent);
  font-weight: 600;
  &::before {
    content: '';
    position: absolute;
    top: 4px;
    inset-inline-start: 0;
    width: 3px;
    height: calc(100% - 8px);
    background: var(--color-accent);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.4);
  }
}
```

**Step 4: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 5: Commit**

```bash
git add src/app/layout/sidebar/
git commit -m "feat: sidebar glass effect, crescent logo SVG, golden accent line"
```

---

## Task 7: Topbar — Glass Observatory Bar

**Files:**
- Modify: `src/app/layout/topbar/topbar.component.html` (line 1-3)
- Modify: `src/app/layout/topbar/topbar.component.scss`

**Step 1: Update topbar HTML classes**

On the `<header>` element, change:
```
bg-white/95 backdrop-blur-sm border-b border-surface-border shadow-[0_1px_4px_rgba(0,0,0,0.06)]
```
to:
```
bg-white/95 backdrop-blur-sm border-b border-surface-border shadow-[0_1px_4px_rgba(0,0,0,0.06)]
dark:bg-brand/85 dark:backdrop-blur-xl dark:border-white/[0.08]
```

Note: Since Tailwind's `dark:` prefix won't work here (the app uses `body.dark-mode` class, not `dark` on html), we handle this in the existing dark mode SCSS override instead. The HTML stays the same — the topbar dark mode is already handled in topbar.component.scss `body.dark-mode` block.

**Step 2: Update topbar SCSS dark mode**

Replace the existing `body.dark-mode` block with enhanced glass styles:

```scss
body.dark-mode {
  .topbar {
    background: rgba(8, 12, 26, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 0 rgba(245, 166, 35, 0.08) !important; /* subtle gold line */
  }

  .topbar-nav-btn {
    color: #cbd5e1;
    &:hover {
      background: rgba(245, 166, 35, 0.08);
      color: var(--color-accent);
    }
    &.active {
      background: rgba(245, 166, 35, 0.12);
      color: var(--color-accent);
    }
  }

  .topbar-action-btn {
    color: #cbd5e1;
    &:hover {
      background: rgba(245, 166, 35, 0.08);
      color: var(--color-accent);
    }
  }

  .mega-panel {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(245, 166, 35, 0.2);
  }

  .mega-backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .mega-group-title {
    color: var(--color-accent);
    border-color: rgba(245, 166, 35, 0.12);
  }

  .mega-item {
    color: #cbd5e1;
    i { color: #64748b; }
    &:hover {
      background: rgba(245, 166, 35, 0.08);
      color: var(--color-accent);
      i { color: var(--color-accent); }
    }
    &.active {
      background: rgba(245, 166, 35, 0.12);
      color: var(--color-accent);
    }
  }
}
```

**Step 3: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 4: Commit**

```bash
git add src/app/layout/topbar/
git commit -m "feat: topbar glass effect with golden accent border"
```

---

## Task 8: Dashboard — Mission Control Redesign

**Files:**
- Modify: `src/app/features/dashboard/dashboard.component.html`
- Modify: `src/app/features/dashboard/dashboard.component.scss`

**Step 1: Update dashboard HTML**

1. Add `star-field` class to the hero-banner (already has dark gradient bg):
```html
<div class="hero-banner star-field">
```

2. Replace `pi-moon` icon in hero with crescent SVG:
```html
<div class="hero-icon">
  <img src="assets/moon-crescent.svg" alt="Moon" width="40" height="40" />
</div>
```

**Step 2: Update dashboard SCSS for dark glass cards**

Key updates:
- Hero banner — keep gradient, add decorative crescent SVG silhouette
- Stat cards → support dark glass in dark mode
- Chart/info cards → glass in dark mode

Add at the end of the dashboard SCSS:

```scss
/* Dark mode dashboard glass overrides */
body.dark-mode {
  .dashboard-container {
    .stat-card {
      background: rgba(17, 24, 39, 0.6);
      backdrop-filter: blur(12px);
      border-color: rgba(255, 255, 255, 0.06);
      .stat-value { color: #f1f5f9; }
    }
    .chart-card, .info-card {
      background: rgba(17, 24, 39, 0.6);
      backdrop-filter: blur(12px);
      border-color: rgba(255, 255, 255, 0.06);
    }
    .chart-header { border-bottom-color: rgba(255, 255, 255, 0.06); }
    .chart-title-wrap {
      h3 { color: #f1f5f9; }
      p { color: #94a3b8; }
    }
    .info-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
    .info-label { color: #94a3b8; }
    .info-value { color: #f1f5f9; }
    .entry-row { border-bottom-color: rgba(255, 255, 255, 0.06); &:hover { background: var(--color-lunar-glow); } }
    .entry-ref { color: #f1f5f9; }
    .entry-amount { color: #f1f5f9; }
    .action-btn {
      background: rgba(17, 24, 39, 0.5);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .action-label { color: #cbd5e1; }
    .loading-state, .error-state {
      background: rgba(17, 24, 39, 0.6);
      backdrop-filter: blur(12px);
      border-color: rgba(255, 255, 255, 0.06);
    }
  }
}
```

**Step 3: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 4: Commit**

```bash
git add src/app/features/dashboard/
git commit -m "feat: dashboard mission control with star field and glass cards"
```

---

## Task 9: Register Page — Match Login Style

**Files:**
- Modify: `src/app/features/auth/register/register.component.ts` (inline template + styles)

**Step 1: Update register template**

Replace the `pi-moon` icon with crescent SVG:
```html
<img src="assets/moon-crescent.svg" alt="Moon" width="48" height="48" />
```

Add `star-field` class to register-container.

**Step 2: Update register inline styles**

Add dark glass background to `.register-container`, glass card to `.register-card`, same input styles as login.

**Step 3: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 4: Commit**

```bash
git add src/app/features/auth/register/
git commit -m "feat: register page matches moonrise login style"
```

---

## Task 10: Feature Components — Dark Glass Batch Update

**Files:**
- Modify: ~12 feature component SCSS files with hardcoded `#1e293b`, `#94a3b8` colors

The following files have hardcoded dark colors that should use CSS variables or glass effects instead:

1. `src/app/features/product-detail/product-detail.component.scss` (16 refs)
2. `src/app/features/inventory-reports/inventory-reports.component.scss` (15 refs)
3. `src/app/features/stock-card/stock-card.component.scss` (11 refs)
4. `src/app/features/stock-balances/stock-balances.component.scss` (3 refs)
5. `src/app/features/stock-adjustments/stock-adjustments.component.scss` (1 ref)
6. `src/app/features/stock-issues/stock-issues.component.scss` (4 refs)
7. `src/app/features/stock-receipts/stock-receipts.component.scss` (1 ref)
8. `src/app/features/inventory-counts/inventory-counts.component.scss` (2 refs)
9. `src/app/features/warehouse-transfers/warehouse-transfers.component.scss` (1 ref)
10. `src/app/features/opening-balance-inventory/opening-balance-inventory.component.scss` (1 ref)
11. `src/app/shared/components/module-nav/module-nav.component.ts` (2 refs)

**Step 1: Batch replace in all feature SCSS files**

Replace all instances:
- `#1e293b` → `var(--color-surface)` (for backgrounds in dark mode blocks)
- `#0f172a` → `var(--color-surface-muted)` (for deeper backgrounds)
- `#334155` → `var(--color-surface-hover)` (for hover/border states)
- `#94a3b8` → `var(--color-text-muted)` or `#64748b` (for muted text — already partially done)
- `#475569` → `var(--color-surface-border)` (for borders)
- `#f1f5f9` → `var(--color-text-primary)` (for primary text in dark mode)
- `#cbd5e1` → `var(--color-text-secondary)` (for secondary text)

Use the CSS variables so they automatically adapt to the Lunar Observatory palette when dark mode is active.

**Step 2: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 3: Commit**

```bash
git add src/app/features/ src/app/shared/
git commit -m "refactor: replace hardcoded dark colors with CSS variables across features"
```

---

## Task 11: Default Theme — Dark Mode Default

**Files:**
- Modify: `src/app/core/models/theme.model.ts` (line 136)

**Step 1: Change default dark mode to true**

```typescript
export const DEFAULT_THEME: ThemeConfig = {
  sidebarStyle: 'compact',
  colorScheme: 'navy-gold',
  darkMode: true,  // was false — Lunar Observatory is dark-first
  ...
```

**Step 2: Build to verify**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/ 2>&1 | tail -5`
Expected: Build succeeds

**Step 3: Commit**

```bash
git add src/app/core/models/theme.model.ts
git commit -m "feat: set dark mode as default for Lunar Observatory persona"
```

---

## Task 12: Deploy & Verify

**Step 1: Production build**

Run: `cd /home/moonui/public_html/moon-erp && npx ng build --base-href /app/`
Expected: Build succeeds

**Step 2: Deploy**

```bash
rm -f /home/moonui/public_html/app/*.js /home/moonui/public_html/app/*.css /home/moonui/public_html/app/*.html /home/moonui/public_html/app/*.ico
\cp -rf /home/moonui/public_html/moon-erp/dist/moon-erp/browser/* /home/moonui/public_html/app/
```

**Step 3: Visual verification checklist**

Open `https://moonui.elbaset.com/app/` and verify:
- [ ] Login page: dark background with twinkling stars, glass form card, golden crescent
- [ ] Login form: inputs have dark glass background, golden glow on focus
- [ ] After login: sidebar has glass effect, crescent SVG logo, golden top accent
- [ ] Topbar: glass background in dark mode, golden bottom accent
- [ ] Dashboard: star field in hero, glass stat cards, glass chart cards
- [ ] Any data table page: glass table background, lunar glow on row hover
- [ ] Dialog: glass background, gold header divider
- [ ] Theme settings: can toggle light mode (warm-tinted white surfaces)

---

## Summary of All Files Modified

| File | Change Type |
|------|-------------|
| `src/assets/moon-crescent.svg` | **NEW** — brand crescent icon |
| `src/styles.scss` | Color tokens, animations, star field, glass utilities, dark mode overrides |
| `src/app/core/models/theme.model.ts` | Navy-gold scheme values, dark mode default |
| `src/app/core/services/theme.service.ts` | Lunar glow token derivation |
| `src/app/features/auth/login/login.component.html` | Star field class, crescent SVG |
| `src/app/features/auth/login/login.component.scss` | Full moonrise redesign |
| `src/app/features/auth/register/register.component.ts` | Match login style |
| `src/app/features/dashboard/dashboard.component.html` | Star field, crescent SVG |
| `src/app/features/dashboard/dashboard.component.scss` | Dark glass card overrides |
| `src/app/layout/sidebar/sidebar.component.html` | Crescent SVG logo, glass classes |
| `src/app/layout/sidebar/sidebar.component.scss` | Golden accent line, glow indicator |
| `src/app/layout/topbar/topbar.component.scss` | Glass dark mode, gold border |
| `~12 feature SCSS files` | Replace hardcoded colors → CSS variables |