` → badge → `
{label}
` → optional `({health})` in same color.
+
+#### Deprecated Badge
+
+`resources/views/components/deprecated-badge.blade.php`:
+```
+px-2 py-0.5 text-xs font-medium leading-normal rounded-full bg-warning/15 text-warning border border-warning/30
+```
+
+#### Tag
+
+Utility `.tag`:
+```
+px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200
+```
+
+### Overlays
+
+#### Callout
+
+Four types (`warning`, `danger`, `info`, `success`). Base: `relative p-4 border rounded-lg`.
+
+| Type | Background | Border | Title text | Body text |
+|---|---|---|---|---|
+| warning | `bg-warning-50 dark:bg-warning-900/30` | `border-warning-300 dark:border-warning-800` | `text-warning-800 dark:text-warning-300` | `text-warning-700 dark:text-warning-200` |
+| danger | `bg-red-50 dark:bg-red-900/30` | `border-red-300 dark:border-red-800` | `text-red-800 dark:text-red-300` | `text-red-700 dark:text-red-200` |
+| info | `bg-blue-50 dark:bg-blue-900/30` | `border-blue-300 dark:border-blue-800` | `text-blue-800 dark:text-blue-300` | `text-blue-700 dark:text-blue-200` |
+| success | `bg-green-50 dark:bg-green-900/30` | `border-green-300 dark:border-green-800` | `text-green-800 dark:text-green-300` | `text-green-700 dark:text-green-200` |
+
+Icon colors (600 light / 400 dark) match type.
+
+#### Modal (input variant)
+
+`resources/views/components/modal.blade.php`:
+```
+relative w-full lg:w-auto lg:min-w-2xl lg:max-w-4xl border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col
+```
+
+Backdrop: `bg-black/20 backdrop-blur-xs`. Close button: `w-8 h-8 rounded-full hover:bg-neutral-100 dark:hover:bg-coolgray-300` top-right, 24px `stroke-width=1.5` X icon.
+
+#### Modal Confirmation
+
+`resources/views/components/modal-confirmation.blade.php` — destructive-action 2-or-3-step wizard (checkboxes → confirm text → password):
+```
+relative w-full border rounded-none sm:rounded-sm min-w-full lg:min-w-[36rem] max-w-full sm:max-w-[48rem] h-screen sm:h-auto max-h-screen sm:max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col
+```
+
+Uses `
` for warning. Password step hidden for OAuth users.
+
+#### Confirm Modal
+
+`resources/views/components/confirm-modal.blade.php` — Livewire-bound simpler confirm dialog.
+
+#### Popup / Popup-Small
+
+Fixed bottom-right notification card with title / description / action button. `bg-white dark:bg-coolgray-100 border dark:border-coolgray-300 shadow-lg sm:rounded-sm`. Popup is responsive max-w-4xl, Popup-Small is `max-w-[46rem]`.
+
+#### Slide-Over
+
+`resources/views/components/slide-over.blade.php`:
+
+Outer: `fixed inset-y-0 right-0 flex max-w-full pl-10`
+
+Panel: `max-w-xl w-screen flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-neutral-50 dark:bg-base dark:border-neutral-800 border-neutral-200`
+
+#### Toast
+
+`resources/views/components/toast.blade.php` — Alpine-powered stacked toast system.
+
+- Container: `fixed ... sm:max-w-xs z-9999`, positioned via `position` param (`top-right` / `top-left` / `top-center` / `bottom-right` / `bottom-left` / `bottom-center`).
+- Toast shell: `relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 rounded-sm sm:max-w-xs`.
+- Stacks up to 4 (oldest gets scale 82% then burns).
+- Auto-dismiss after 4 s. Hover on container pauses dismissal and expands stack.
+- HTML payload sanitized via `window.sanitizeHTML` (XSS guard).
+- Per-toast copy-to-clipboard + close buttons.
+
+Icon colors:
+
+| Type | Class |
+|---|---|
+| success | `text-green-500` |
+| info | `text-blue-500` |
+| warning | `text-orange-400` |
+| danger | `text-red-500` |
+| default | `text-gray-800` |
+
+#### Helper / Tooltip
+
+`resources/views/components/helper.blade.php`. Icon utility `.info-helper`:
+```
+cursor-pointer text-coollabs dark:text-warning
+```
+
+Popup utility `.info-helper-popup`:
+```
+hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 max-w-sm whitespace-normal break-words
+```
+
+Shown on parent `.group:hover`. Supports rich HTML (links colored `text-coollabs dark:text-warning underline`).
+
+### Navigation
+
+#### Sidebar / Navbar
+
+Component: `resources/views/components/navbar.blade.php`.
+
+Root nav: `flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 border-neutral-300 dark:bg-base`
+
+Menu list: `flex flex-col flex-1 gap-y-7` → inner `flex flex-col h-full space-y-1.5`.
+
+Utility `.menu-item`:
+```
+flex gap-3 items-center px-2 py-1 w-full text-sm dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 rounded-sm truncate min-w-0
+```
+
+Utility `.menu-item-active`:
+```
+text-black rounded-sm dark:bg-coolgray-200 dark:text-warning bg-neutral-200 overflow-hidden
+```
+
+Icon `.menu-item-icon`: `flex-shrink-0 w-6 h-6 dark:hover:text-white`. Sub-items use `gap-2` + `w-4 h-4` icons.
+
+#### Breadcrumbs
+
+`resources/views/components/resources/breadcrumbs.blade.php` — project → environment → resource trail. Desktop: ``. Each link `text-xs lg:text-sm hover:text-warning`. Chevron buttons `text-warning`. Dropdowns `absolute ... bg-white dark:bg-coolgray-100 rounded-md shadow-lg border`. Active item `dark:text-warning font-semibold`.
+
+#### External-Link
+
+Mini icon — `inline-flex w-3 h-3 dark:text-neutral-400 text-black` with arrow-out-of-box SVG. Appended to external anchors.
+
+#### Internal-Link
+
+Arrow SVG — `inline-flex w-4 h-4 text-black dark:text-white`. Used in CTA links ("go to deployment" etc).
+
+#### Banner
+
+`resources/views/components/banner.blade.php` — dismissible top bar:
+```
+relative z-999 w-full py-2 mx-auto duration-100 ease-out shadow-xs bg-coolgray-100 sm:py-0 sm:h-14
+```
+
+Close button: `w-6 h-6 rounded-full hover:bg-coolgray-500 text-neutral-200`. Reveals via Alpine `x-transition` after 100ms delay.
+
+### Feedback
+
+#### Loading Spinner
+
+`resources/views/components/loading.blade.php` — inline flex with optional text + spinning SVG:
+```
+w-4 h-4 mx-1 ml-3 text-coollabs dark:text-warning animate-spin
+```
+
+SVG has two paths at `opacity-25` (track) + `opacity-75` (arc).
+
+Utility `.loading`: `w-4 dark:text-warning text-coollabs`.
+
+#### Loading-On-Button
+
+`resources/views/components/loading-on-button.blade.php` — same SVG but **no light-mode color** (`w-4 h-4 mx-1 ml-3 dark:text-warning animate-spin`), meant to inherit button text color.
+
+#### Page-Loading
+
+Full-page loader overlay (variant of `loading` component, fills viewport).
+
+### Text
+
+#### Highlighted text
+
+`resources/views/components/highlighted.blade.php` / utility `.text-helper`:
+```
+inline-block font-bold text-coollabs dark:text-warning
+```
+
+Also used for required-field asterisks via ``.
+
+#### Kbd
+
+Utility `.kbd-custom`:
+```
+px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-warning
+```
+
+### Chrome
+
+#### Scrollbar
+
+Utility `.scrollbar` (uses `tailwind-scrollbar` plugin):
+```
+scrollbar-thumb-coollabs-100 scrollbar-track-neutral-200 dark:scrollbar-track-coolgray-200 scrollbar-thin
+```
+
+Applied globally to `` in `app.css`.
+
+#### Table
+
+Styled via base element rules in `app.css` (not a reusable component):
+
+```css
+table { @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300; }
+thead { @apply uppercase; }
+tbody { @apply divide-y dark:divide-coolgray-200 divide-neutral-300; }
+tr { @apply text-black dark:text-neutral-400 dark:hover:bg-coolgray-300 hover:bg-neutral-100; }
+tr th { @apply px-3 py-3.5 text-left text-black dark:text-white; }
+tr th:first-child { @apply py-3.5 pr-3 pl-4 sm:pl-6; }
+tr td { @apply px-3 py-4 whitespace-nowrap; }
+tr td:first-child { @apply pr-3 pl-4 font-bold sm:pl-6; }
+```
+
+#### Dropdown
+
+`resources/views/components/dropdown.blade.php`. Container:
+```
+border border-neutral-300 bg-white p-1 shadow-sm dark:border-coolgray-300 dark:bg-coolgray-200
+```
+
+Utility `.dropdown-item`:
+```
+flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs
+```
+
+Touch variant adds `min-h-10 px-3 py-2 text-sm`.
+
+## Do's and Don'ts
+
+- **Do** force `dark:text-white` on h1–h4 and card titles. Default body text `#a3a3a3` is unreadable on `coolgray-100`.
+- **Do** swap the accent: `coollabs` in light, `warning` in dark. For focus rings, active nav, helpers, spinners, highlighted text, scrollbar thumb, helper links.
+- **Do** use the inset box-shadow system on inputs, selects, and textareas — not a border. It enables the 4px left dirty-bar.
+- **Do** wire the dirty indicator via `wire:dirty.class` so Livewire flips the bar color on modified state.
+- **Do** flip `.box-title` and `.box-description` to the contrast color on hover. On dark hover the card goes purple `#7317ff`; `text-neutral-500` description becomes invisible.
+- **Do** maintain WCAG AA contrast (4.5:1 for normal text).
+- **Do** sanitize HTML passed into toasts via `window.sanitizeHTML`.
+- **Do** use `` for in-button spinners and as `wire:loading.delay.longer` indicators in status components.
+- **Don't** use purple `coollabs` as the dark-mode accent. Always use yellow `warning` in dark.
+- **Don't** mix corner radii — 2px everywhere except callouts (8px) and pills (full).
+- **Don't** use shadows for elevation in dark mode. Use tonal layers from the coolgray ladder.
+- **Don't** set `border` utilities without expecting `coolgray-200` in dark (default override in base layer).
+- **Don't** add gradients. The one exception is the `.bg-coollabs-gradient` upsell strip.
+- **Don't** use more than two font weights on a single screen (typically 400 body + 700 bold).
+
+---
+
+Source files:
+- Theme tokens: `resources/css/app.css` (`@theme` block)
+- Fonts: `resources/css/fonts.css`
+- Component utilities: `resources/css/utilities.css`
+- Blade components: `resources/views/components/**/*.blade.php`