# Sethflix Theme Context

This file defines the standard "Sethflix" visual theme (Dark Mode with Orange Accents) for use in all web applications.

## 1. Core Identity

*   **Theme Name:** Sethflix Dark
*   **Primary Background:** Black (`#000000`) or Dark Gray (`#1a1a1a` / `#252525`)
*   **Primary Text:** Light Gray (`#e0e0e0`)
*   **Accent Color:** Orange (`#D35400`)
*   **Hover/Active Color:** Lighter/Darker Orange (`#e65c00` / `#a84300`)
*   **Border Color:** Dark Gray (`#333333`) or Orange (`#D35400` for emphasis)

## 2. Assets

*   **Logo (Square/Favicon):** `https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png`
    *   *Usage:* Sidebar icon, Favicon, Mobile Navbar.
    *   *Dimensions:* 55px width (sidebar), 32px-55px (navbar).
*   **Full Logo (Login):** Same image used for login (`login.png`), typically scaled to 150px width.

## 3. CSS Color Palette

| Element | Color Hex | Description |
| :--- | :--- | :--- |
| **Global Background** | `#1a1a1a` | Main body, panels, modals, cards |
| **Sidebar/Navbar** | `#000000` | Navigation bars |
| **Panel/Card (Comfortable)** | `#252525` | Content containers, wells |
| **Primary Text** | `#e0e0e0` | Body text, headings |
| **Secondary Text** | `#cccccc` | Muted text, paragraphs in wells |
| **Accent (Strong/Bold)** | `#D35400` | Links, `<strong>`, Buttons, Active States |
| **Inputs/Forms** | `#2a2a2a` | Text inputs, search bars (Text: `#fff`) |
| **Borders (Subtle)** | `#333333` | Dividers, panel borders |
| **Borders (Highlight)** | `#D35400` | Images, Active Inputs |

## 4. Reusable CSS Snippets

### Global Resets & Typography
```css
body, html {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

h1, h2, h3, h4, h5, h6, strong, b, a {
    color: #D35400 !important;
}

p, span, div {
    color: #e0e0e0;
}
```

### Components (Cards/Panels)
```css
.panel, .card, .well, .modal-content {
    background-color: #252525 !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}
```

### Forms & Inputs
```css
input, textarea, select, .form-control {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

input:focus {
    border-color: #D35400 !important;
    box-shadow: 0 0 5px rgba(211, 84, 0, 0.5) !important;
}
```

### Buttons
```css
.btn-primary, .btn-ghost {
    background-color: #D35400 !important;
    color: #fff !important;
    border-color: #D35400 !important;
}

.btn-primary:hover, .btn-ghost:hover {
    background-color: #e65c00 !important;
}
```

### Navigation & Menus
```css
.navbar, .sidebar {
    background-color: #000000 !important;
}

.nav-link:hover, .nav-item.active {
    background-color: #333 !important;
    color: #D35400 !important;
}

.dropdown-menu {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
}
```

### Images
```css
img {
    border: 2px solid #D35400 !important;
}

.noborder, .logo-img {
    border: none !important;
}
```

## 5. Mautic Specifics (Reference)
*   **Sidebar Logo:** 55px width, 4px top margin, centered.
*   **Navbar:** Flexbox centering, left-aligned logo with margin.
*   **Alerts:** Dark background, left-border accent matching alert type color (Orange/Red/Blue/Green).


## Network Inventory
The master source of truth for all device IPs, LXC IDs, and service mappings can be found at:
 on Node 173.

## Network Inventory
The master source of truth for all device IPs, LXC IDs, and service mappings can be found at:
 on Node 173.

## Network Inventory
The master source of truth for all device IPs, LXC IDs, and service mappings can be found at:
`/root/network_inventory.md` on Node 173.