@import "tailwindcss" theme(static);
@source "../views/**/*.blade.php";
@source "../../app/**/*.php";
@source inline("text-right bottom-4 right-4");

/* Tailwind v4 Dark Mode Configuration */
@variant dark (&:where(.dark, .dark *));

/* DaisyUI v5 Plugin Configuration */
@plugin "daisyui" {
  themes: light --default, coffee --prefersdark;
  logs: true;
}

/* Tailwind Typography Plugin */
@plugin "@tailwindcss/typography";

/* Custom Color Overrides */
@theme {
  /* Brand colors - override built-in themes */
  --color-primary: oklch(0.55 0.2 240);
  --color-primary-content: oklch(1 0 0);

  /* Status LED colors for category indicators */
  --color-status-ai: oklch(65% 0.2 290);
  --color-status-dev: oklch(60% 0.2 240);
  --color-status-infra: oklch(65% 0.15 150);
  --color-status-meta: oklch(75% 0.15 60);
  --color-status-homelab: oklch(70% 0.15 200);

  /* DCEO Console Palette (Dark/Terminal) */
  --color-console-bg: #0d1117;
  --color-console-fg: #c9d1d9;
  --color-console-accent: #58a6ff;
  --color-console-success: #2ea043;
  --color-console-warn: #d29922;
  --color-console-border: #30363d;
  --color-console-dim: #21262d;
  --color-console-select: #1f6feb;

  /* DCEO Console Palette (Light/Paper) */
  --color-paper-bg: #ffffff;
  --color-paper-fg: #24292f;
  --color-paper-border: #d0d7de;
  --color-paper-dim: #f6f8fa;
  --color-paper-accent: #0969da;

  /* Console Animations */
  --animate-scan: scan 8s linear infinite;
  --animate-blink: blink 1s step-end infinite;

  @keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
}

/* ============================================================================
   Modal Dialog Backdrop Fix
   ============================================================================ */

/* Override DaisyUI's default backdrop opacity for consistent visibility in both
   light and dark themes. DaisyUI doesn't expose backdrop opacity as a theme variable,
   so we override it here. The default is too transparent in light mode.

   This is safe for future DaisyUI updates because:
   - .modal-backdrop is a stable, documented DaisyUI class
   - We're only overriding background-color, not structural properties
   - If DaisyUI changes this, it would be a breaking change for all users */

/* Native dialog element backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* DaisyUI's modal-backdrop element (the visible overlay) */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* ============================================================================
   Global Link Overrides
   ============================================================================ */

/* Remove underline from logo/brand link */
.navbar-start a {
  text-decoration: none !important;
}

/* Remove underlines from all menu items */
.menu a {
  text-decoration: none !important;
}

/* ============================================================================
   Active Menu Item Indicator (Server Theme)
   LED-style indicator for current page navigation
   ============================================================================ */

/* Active menu item styling - minimal, LED indicator only */
.menu li.current-menu-item > a,
.menu li.current_page_item > a,
.menu li.current-menu-ancestor > a,
.menu li.current_page_ancestor > a {
  position: relative;
  /* Text styling remains default - LED is the only indicator */
}

/* LED indicator dot - large, intense green status light (primary indicator) */
.menu li.current-menu-item > a::before,
.menu li.current_page_item > a::before,
.menu li.current-menu-ancestor > a::before,
.menu li.current_page_ancestor > a::before {
  content: '';
  position: absolute;
  left: 50%; /* Horizontally centered */
  bottom: -8px; /* Below the text */
  transform: translateX(-50%); /* Center the LED itself */
  width: 10px; /* Much larger LED - primary visual indicator */
  height: 10px;
  background: rgb(34, 197, 94); /* Bright green */
  border-radius: 50%;
  /* Intense multi-layer glow - highly visible */
  box-shadow:
    0 0 8px rgba(34, 197, 94, 1),      /* Inner bright glow */
    0 0 16px rgba(34, 197, 94, 0.9),   /* Middle intense glow */
    0 0 28px rgba(34, 197, 94, 0.6),   /* Outer halo */
    0 0 40px rgba(34, 197, 94, 0.3);   /* Extended soft glow */
  animation: ledPulseIntense 1.8s ease-in-out infinite;
}

/* Underline indicator - disabled in favor of LED backlight glow */
.menu li.current-menu-item > a::after,
.menu li.current_page_item > a::after,
.menu li.current-menu-ancestor > a::after,
.menu li.current_page_ancestor > a::after {
  display: none; /* Text glow is sufficient indicator */
}

/* LED pulse animation - subtle breathing effect */
@keyframes ledPulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
  }
}

/* Intense LED pulse animation - more dramatic breathing for primary indicator */
@keyframes ledPulseIntense {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 0 8px rgba(34, 197, 94, 1),
      0 0 16px rgba(34, 197, 94, 0.9),
      0 0 28px rgba(34, 197, 94, 0.6),
      0 0 40px rgba(34, 197, 94, 0.3);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.95);
    box-shadow:
      0 0 6px rgba(34, 197, 94, 0.8),
      0 0 12px rgba(34, 197, 94, 0.6),
      0 0 20px rgba(34, 197, 94, 0.4),
      0 0 30px rgba(34, 197, 94, 0.2);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .menu li.current-menu-item > a::before,
  .menu li.current_page_item > a::before,
  .menu li.current-menu-ancestor > a::before,
  .menu li.current_page_ancestor > a::before {
    animation: none;
  }
}

/* ============================================================================
   Terminal Takeover Menu (Full-Screen Mobile)
   SSH terminal aesthetic with LED status indicators
   ============================================================================ */

/* Terminal overlay background */
.terminal-menu-overlay {
  background: #0a0e0f; /* Deep terminal black */
}

/* Dark theme - slightly lighter for contrast */
[data-theme="coffee"] .terminal-menu-overlay {
  background: #050505;
}

/* Terminal window styling */
.terminal-menu-window {
  background: #0d1117; /* GitHub dark terminal */
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

/* Add subtle scanline effect for CRT monitor feel */
.terminal-menu-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  opacity: 0.3;
}

/* Terminal menu list - remove default ul styling */
.terminal-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Terminal menu items - file listing aesthetic */
.terminal-menu-list li {
  margin-bottom: 4px;
}

.terminal-menu-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 16px;
  color: #8b949e; /* Muted gray */
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}

/* LED indicator dot before each link */
.terminal-menu-list li a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30363d; /* Dim gray */
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Prompt character for active item */
.terminal-menu-list li.current-menu-item a::after,
.terminal-menu-list li.current_page_item a::after {
  content: '>';
  position: absolute;
  left: -8px;
  color: #22c55e; /* Bright green */
  font-weight: bold;
  animation: blinkCursor 1.5s step-end infinite;
  /* Fix iOS Safari rendering jitter */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Active menu item styling - bright green with LED */
.terminal-menu-list li.current-menu-item a,
.terminal-menu-list li.current_page_item a {
  color: #22c55e; /* Bright green */
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid #22c55e;
  padding-left: 13px; /* Compensate for border */
}

/* Active LED - bright green pulsing */
.terminal-menu-list li.current-menu-item a::before,
.terminal-menu-list li.current_page_item a::before {
  background: #22c55e;
  box-shadow:
    0 0 8px rgba(34, 197, 94, 0.8),
    0 0 16px rgba(34, 197, 94, 0.4);
  animation: ledPulse 2s ease-in-out infinite;
  /* Fix iOS Safari rendering jitter */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: box-shadow, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Hover state - dim green */
.terminal-menu-list li a:hover {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.05);
}

.terminal-menu-list li a:hover::before {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

/* Blinking cursor animation for prompt */
@keyframes blinkCursor {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Staggered fade-in animation for menu items */
.terminal-menu-list li {
  opacity: 0;
  animation: terminalFadeIn 0.3s ease-out forwards;
}

.terminal-menu-list li:nth-child(1) { animation-delay: 0.05s; }
.terminal-menu-list li:nth-child(2) { animation-delay: 0.1s; }
.terminal-menu-list li:nth-child(3) { animation-delay: 0.15s; }
.terminal-menu-list li:nth-child(4) { animation-delay: 0.2s; }
.terminal-menu-list li:nth-child(5) { animation-delay: 0.25s; }
.terminal-menu-list li:nth-child(6) { animation-delay: 0.3s; }

@keyframes terminalFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Disable animations on touch devices (mobile) to prevent jitter/shake

   CONTEXT: Tested on iPhone SE 2nd gen (2020) with iOS 26.0.1
   - Hardware acceleration properties (translateZ, will-change, backface-visibility)
     caused text jitter on older iPhones with limited GPU memory
   - Counter-intuitive fix: Remove hardware acceleration on mobile, not add it
   - Progressive enhancement: Desktop gets animations, mobile gets static UI
*/
@media (hover: none) {
  /* Disable blinking cursor on mobile - always visible */
  .terminal-menu-list li.current-menu-item a::after,
  .terminal-menu-list li.current_page_item a::after {
    animation: none;
    opacity: 1; /* Always show prompt character */
    /* Remove hardware acceleration - prevents jitter on iPhone SE 2nd gen and older */
    -webkit-transform: none;
    transform: none;
    will-change: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  /* Disable LED pulse on mobile - static glow */
  .terminal-menu-list li.current-menu-item a::before,
  .terminal-menu-list li.current_page_item a::before {
    animation: none;
    /* Remove hardware acceleration - prevents jitter on iPhone SE 2nd gen and older */
    -webkit-transform: none;
    transform: none;
    will-change: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  /* Disable menu item fade-in stagger on mobile */
  .terminal-menu-list li {
    animation: none;
    opacity: 1;
  }

  /* Disable scanline effect on mobile */
  .terminal-menu-overlay::before {
    display: none;
  }
}

/* Respect reduced motion preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .terminal-menu-list li.current-menu-item a::before,
  .terminal-menu-list li.current_page_item a::before {
    animation: none;
  }

  .terminal-menu-list li.current-menu-item a::after,
  .terminal-menu-list li.current_page_item a::after {
    animation: none;
    opacity: 1;
  }

  .terminal-menu-list li {
    animation: none;
    opacity: 1;
  }

  .terminal-menu-overlay::before {
    display: none;
  }
}

/* ============================================================================
   EK Homelab Showcase SVG Theming
   Datacenter topology diagram with daisyUI theme integration
   ============================================================================ */

/* Base SVG Styles (theme-aware via daisyUI) */
.ek-homelab__svg {
  display: block;
  max-width: 100%;
  height: auto;
  color: oklch(var(--color-info));
}

.ek-homelab__card {
  fill: transparent;
  stroke: currentColor;
  stroke-opacity: 0.6;
  stroke-width: 1.8;
}

.ek-homelab__card--highlight {
  stroke: oklch(var(--color-primary));
  stroke-opacity: 0.85;
  stroke-width: 2.2;
  filter: url(#ekGlow);
}

.ek-homelab__card--qdevice {
  stroke-dasharray: 4 3;
  stroke-opacity: 0.5;
}

.ek-homelab__cluster-frame {
  stroke: currentColor;
  stroke-opacity: 0.35;
  stroke-width: 2;
  fill: transparent;
}

.ek-homelab__link {
  stroke: currentColor;
  stroke-opacity: 0.5;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

/* Text Labels */
.ek-homelab__label {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  fill: currentColor;
  letter-spacing: 0.03em;
}

.ek-homelab__sublabel {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
  fill: currentColor;
  opacity: 0.85;
}

.ek-homelab__sublabel-sm {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
  fill: currentColor;
  opacity: 0.75;
}

.ek-homelab__cluster-title {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  fill: currentColor;
  opacity: 0.9;
  letter-spacing: 0.05em;
}

.ek-homelab__dot {
  fill: currentColor;
}

.ek-homelab__legend-text {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: currentColor;
  opacity: 0.7;
}

/* Animated Flow (respects reduced motion) */
@keyframes ekHlFlow {
  from {
    stroke-dashoffset: 28;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.ek-homelab__link--flow {
  stroke-dasharray: 12 16;
  animation: ekHlFlow 2.4s linear infinite;
  stroke-opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .ek-homelab__link--flow {
    animation: none;
    stroke-dasharray: none;
  }
}

/* Theme-Specific Adjustments for Light Mode (latte) */
[data-theme="latte"] .ek-homelab__svg {
  filter: none;
}

[data-theme="latte"] .ek-homelab__card {
  stroke-opacity: 0.75;
  stroke-width: 2;
}

[data-theme="latte"] .ek-homelab__card--highlight {
  stroke-opacity: 1;
}

[data-theme="latte"] .ek-homelab__cluster-frame {
  stroke-opacity: 0.55;
}

[data-theme="latte"] .ek-homelab__link {
  stroke-opacity: 0.65;
}

/* Theme-Specific Adjustments for Dark Mode (coffee) */
[data-theme="coffee"] .ek-homelab__svg {
  filter: drop-shadow(0 0 8px oklch(var(--color-info) / 0.3));
}

/* Responsive Typography */
@media (max-width: 1024px) {
  .ek-homelab__label {
    font-size: 14px;
  }

  .ek-homelab__sublabel {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .ek-homelab__label {
    font-size: 13px;
  }

  .ek-homelab__sublabel {
    font-size: 10px;
  }

  .ek-homelab__sublabel-sm {
    font-size: 9px;
  }

  .ek-homelab__cluster-title {
    font-size: 12px;
  }

  .ek-homelab__legend-text {
    font-size: 10px;
  }
}

/* ============================================================================
   WordPress Block Image SVG Fix
   Fix for SVG images appearing tiny in WordPress block editor
   ============================================================================ */

/* Force block images with SVGs to take full width of content area */
.wp-block-image img[src$=".svg"] {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

/* Override WordPress's display: table on figure elements for SVGs */
.wp-block-image.aligncenter:has(img[src$=".svg"]),
.wp-block-image.alignleft:has(img[src$=".svg"]),
.wp-block-image.alignright:has(img[src$=".svg"]) {
  display: block !important;
  width: 100%;
}

/* Fallback without :has() for broader browser support */
.wp-block-image.aligncenter,
.wp-block-image.alignleft,
.wp-block-image.alignright {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Center-aligned SVG images should be centered */
.wp-block-image.aligncenter:has(img[src$=".svg"]) {
  margin-left: auto;
  margin-right: auto;
}

.wp-block-image.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix caption display when parent is changed from table to block */
.wp-block-image:has(img[src$=".svg"]) .wp-block-element-caption {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  margin-top: 0.5rem;
}

.wp-block-image .wp-block-element-caption {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0.5rem !important;
}

/* ============================================================================
   Lab Page Styling (Infrastructure Dashboard)
   Datacenter-themed layout with stats cards, tables, and tabs
   ============================================================================ */

/* Intro Section Styling */
.lab-intro {
  margin-bottom: 3rem;
}

.lab-intro h2 {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(66, 99, 235, 0.8);
  margin-bottom: 1rem;
}

.lab-intro p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 2rem;
}

[data-theme="coffee"] .lab-intro p {
  color: rgba(255, 255, 255, 0.7);
}

/* Tab Navigation - Datacenter Style */
.lab-tabs {
  display: flex;
  gap: 0;
  margin: 3rem 0 2rem 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0.75rem;
  overflow-x: auto;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="coffee"] .lab-tabs {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.lab-tab-button {
  flex: 1;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="coffee"] .lab-tab-button {
  color: rgba(255, 255, 255, 0.6);
  border-right-color: rgba(255, 255, 255, 0.08);
}

.lab-tab-button:last-child {
  border-right: none;
}

.lab-tab-button:hover {
  background: rgba(66, 99, 235, 0.05);
  color: rgb(66, 99, 235);
}

.lab-tab-button[aria-selected="true"] {
  background: rgb(66, 99, 235);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(66, 99, 235, 0.3);
  z-index: 1;
}

.lab-tab-button[aria-selected="true"]::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 100%);
}

/* Disabled tabs */
.lab-tab-button.lab-tab-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="coffee"] .lab-tab-button.lab-tab-disabled {
  color: rgba(255, 255, 255, 0.4);
}

.lab-tab-button.lab-tab-disabled:hover {
  background: transparent;
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="coffee"] .lab-tab-button.lab-tab-disabled:hover {
  color: rgba(255, 255, 255, 0.4);
}

/* Coming soon notice */
.lab-tabs-notice {
  background: rgba(66, 99, 235, 0.1);
  border: 1px solid rgba(66, 99, 235, 0.2);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  margin: 1rem 0 2rem 0;
}

[data-theme="coffee"] .lab-tabs-notice {
  background: rgba(66, 99, 235, 0.15);
  border-color: rgba(66, 99, 235, 0.3);
}

.lab-tabs-notice p {
  margin: 0;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.9375rem;
}

[data-theme="coffee"] .lab-tabs-notice p {
  color: rgba(255, 255, 255, 0.9);
}

.lab-tabs-notice strong {
  color: rgb(66, 99, 235);
}

[data-theme="coffee"] .lab-tabs-notice strong {
  color: rgb(99, 132, 255);
}

/* Tab Content */
.lab-tab-content {
  margin-top: 3rem;
}

.lab-tab-content[aria-hidden="true"] {
  display: none;
}

/* Cluster Stats Grid */
.lab-cluster-stats {
  margin: 2rem 0;
}

.lab-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.lab-stat-card {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s;
}

[data-theme="coffee"] .lab-stat-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-stat-card:hover {
  border-color: rgba(66, 99, 235, 0.5);
  box-shadow: 0 0 20px rgba(66, 99, 235, 0.2);
}

.lab-stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: rgb(66, 99, 235);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  margin-bottom: 0.5rem;
}

.lab-stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 0.25rem;
}

[data-theme="coffee"] .lab-stat-label {
  color: rgba(255, 255, 255, 0.7);
}

.lab-stat-detail {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

[data-theme="coffee"] .lab-stat-detail {
  color: rgba(255, 255, 255, 0.5);
}

/* Node Status Table */
.lab-node-table {
  margin: 2rem 0;
  overflow-x: auto;
}

.lab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  border-radius: 0.5rem;
  overflow: hidden;
}

.lab-table thead {
  background: oklch(var(--b2));
}

.lab-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.7);
  border-bottom: 2px solid oklch(var(--bc) / 0.2);
}

.lab-table td {
  padding: 1rem;
  border-bottom: 1px solid oklch(var(--bc) / 0.1);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.875rem;
}

.lab-table tbody tr:last-child td {
  border-bottom: none;
}

.lab-table tbody tr:hover {
  background: oklch(var(--b2) / 0.5);
}

/* Progress Bars */
.lab-progress-bar {
  width: 100%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  overflow: hidden;
  margin-top: 0.25rem;
  position: relative;
}

[data-theme="coffee"] .lab-progress-bar {
  background: rgba(255, 255, 255, 0.1);
}

.lab-progress-fill {
  height: 100%;
  background: rgb(66, 99, 235);
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

.lab-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

[data-theme="coffee"] .lab-progress-text {
  color: rgba(255, 255, 255, 0.9);
}

.lab-progress-fill.warning {
  background: rgb(255, 193, 7);
}

.lab-progress-fill.error {
  background: rgb(244, 67, 54);
}

/* HA Services List */
.lab-ha-service {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.lab-ha-service-icon {
  font-size: 1.5rem;
}

.lab-ha-service-info {
  flex: 1;
}

.lab-ha-service-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.lab-ha-service-detail {
  font-size: 0.875rem;
  color: oklch(var(--bc) / 0.6);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

/* Status Badge */
.lab-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lab-status-badge.online {
  background: oklch(var(--su) / 0.2);
  color: oklch(var(--su));
}

.lab-status-badge.offline {
  background: oklch(var(--er) / 0.2);
  color: oklch(var(--er));
}

/* HA Service Cards (Grid Layout) */
.lab-ha-services {
  margin: 2rem 0;
}

.lab-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.lab-service-card {
  background: var(--fallback-b1, #fff);
  border: 2px solid color-mix(in oklch, var(--fallback-bc, #000) 20%, transparent);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.2s;
}

[data-theme="latte"] .lab-service-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="coffee"] .lab-service-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-service-card:hover {
  border-color: rgba(66, 99, 235, 0.5);
  box-shadow: 0 4px 20px rgba(66, 99, 235, 0.15);
  transform: translateY(-2px);
}

.lab-service-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.lab-service-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

.lab-service-node {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.75rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

[data-theme="coffee"] .lab-service-node {
  color: rgba(255, 255, 255, 0.6);
}

.lab-service-status {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
}

/* Network Architecture Cards */
.lab-network-info {
  margin: 2rem 0;
}

.lab-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 1.5rem 0;
}

.lab-network-card {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.75rem;
  padding: 2rem;
  transition: all 0.2s;
}

[data-theme="coffee"] .lab-network-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-network-card:hover {
  border-color: rgba(66, 99, 235, 0.4);
  box-shadow: 0 4px 20px rgba(66, 99, 235, 0.1);
}

.lab-network-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: rgb(66, 99, 235);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

[data-theme="coffee"] .lab-network-card h4 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.lab-network-detail {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lab-network-detail strong {
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
  display: inline-block;
  min-width: 80px;
}

[data-theme="coffee"] .lab-network-detail strong {
  color: rgba(255, 255, 255, 0.8);
}

.lab-network-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.lab-network-list li {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.375rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.875rem;
}

[data-theme="coffee"] .lab-network-list li {
  background: rgba(255, 255, 255, 0.05);
}

/* Storage Layer Cards */
.lab-storage-info {
  margin: 2rem 0;
}

.lab-storage-card {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 2rem;
}

[data-theme="coffee"] .lab-storage-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-storage-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: rgb(66, 99, 235);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

[data-theme="coffee"] .lab-storage-card h4 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.lab-storage-detail {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lab-storage-detail strong {
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
  display: inline-block;
  min-width: 100px;
}

[data-theme="coffee"] .lab-storage-detail strong {
  color: rgba(255, 255, 255, 0.8);
}

/* Hardware Info Cards */
.lab-hardware-info {
  margin: 2rem 0;
}

.lab-hardware-card {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 2rem;
}

[data-theme="coffee"] .lab-hardware-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-hardware-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: rgb(66, 99, 235);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

[data-theme="coffee"] .lab-hardware-card h4 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.lab-hardware-detail {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lab-hardware-detail strong {
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
  display: inline-block;
  min-width: 100px;
}

[data-theme="coffee"] .lab-hardware-detail strong {
  color: rgba(255, 255, 255, 0.8);
}

/* Typography Overrides for Lab Page */
.lab-tab-content h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: oklch(var(--bc));
  padding-bottom: 0.5rem;
  border-bottom: 3px solid oklch(var(--bc) / 0.2);
}

.lab-tab-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: oklch(var(--bc));
}

.lab-tab-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: oklch(var(--p));
}

.lab-tab-content p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.lab-tab-content ul {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.lab-tab-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Page Header Spacing */
.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Removed: Extra main padding - container already has px-4 padding
  .page-template-template-lab main,
  .page-template-default.page-id-98 main {
    padding: 0 1rem;
  }
  */

  .lab-intro h2 {
    font-size: 1rem;
  }

  .lab-intro p {
    font-size: 1rem;
  }

  .lab-tabs {
    flex-direction: column;
    gap: 0;
  }

  .lab-tab-button {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  [data-theme="coffee"] .lab-tab-button {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .lab-tab-button:last-child {
    border-bottom: none;
  }

  .lab-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .lab-stat-value {
    font-size: 2rem;
  }

  .lab-table {
    font-size: 0.75rem;
  }

  .lab-table th,
  .lab-table td {
    padding: 0.75rem 0.5rem;
  }

  .lab-service-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .lab-network-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .lab-network-card,
  .lab-storage-card,
  .lab-hardware-card {
    padding: 1.5rem;
  }

  .lab-tab-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }

  .lab-tab-content h3 {
    font-size: 1.25rem;
    margin-top: 2rem;
  }

  .page-header h1 {
    font-size: 2rem;
  }
}

/* ============================================================================
   Lab Page - Architecture Tab
   Datacenter infrastructure visualization with 5-layer deep dive
   ============================================================================ */

/* Architecture Layers Container */
.lab-architecture-layers {
  margin: 2rem 0;
}

/* Individual Layer Section */
.lab-layer-section {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-left: 4px solid rgb(66, 99, 235);
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 3rem;
  transition: all 0.3s;
  position: relative;
}

[data-theme="coffee"] .lab-layer-section {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
  border-left-color: rgb(66, 99, 235);
}

.lab-layer-section:hover {
  border-left-width: 6px;
  box-shadow: 0 4px 24px rgba(66, 99, 235, 0.15);
  transform: translateX(2px);
}

/* Layer Title with LED Indicator */
.lab-layer-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  color: rgb(66, 99, 235);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

.lab-layer-title::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(66, 99, 235);
  box-shadow: 0 0 12px rgba(66, 99, 235, 0.8);
  flex-shrink: 0;
  animation: ledPulse 2s ease-in-out infinite;
}

/* Layer Description */
.lab-layer-description {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 2rem;
}

[data-theme="coffee"] .lab-layer-description {
  color: rgba(255, 255, 255, 0.7);
}

/* Architecture Diagram Container */
.lab-arch-diagram {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  position: relative;
}

[data-theme="coffee"] .lab-arch-diagram {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Architecture Node/Component */
.lab-arch-node {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s;
  position: relative;
}

[data-theme="coffee"] .lab-arch-node {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}

.lab-arch-node:hover {
  border-color: rgb(66, 99, 235);
  box-shadow: 0 4px 16px rgba(66, 99, 235, 0.2);
  transform: translateY(-2px);
}

.lab-arch-node-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.lab-arch-node-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: rgba(0, 0, 0, 0.9);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

[data-theme="coffee"] .lab-arch-node-title {
  color: rgba(255, 255, 255, 0.9);
}

.lab-arch-node-subtitle {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.25rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

[data-theme="coffee"] .lab-arch-node-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.lab-arch-node-ip {
  font-size: 0.75rem;
  color: rgb(66, 99, 235);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-weight: 600;
}

/* Highlighted/Primary Node */
.lab-arch-node-highlight {
  border-color: rgb(34, 197, 94);
  border-width: 3px;
}

.lab-arch-node-highlight::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(34, 197, 94);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
  animation: ledPulse 2s ease-in-out infinite;
}

/* Architecture Detail Cards (features/specs) */
.lab-arch-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.lab-arch-detail-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

[data-theme="coffee"] .lab-arch-detail-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.lab-arch-detail-card h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1rem;
  color: rgb(66, 99, 235);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

.lab-arch-detail-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lab-arch-detail-card li {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
  position: relative;
  padding-left: 1.25rem;
}

[data-theme="coffee"] .lab-arch-detail-card li {
  color: rgba(255, 255, 255, 0.7);
}

.lab-arch-detail-card li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: rgb(66, 99, 235);
  font-weight: bold;
}

/* Connection Labels */
.lab-arch-connection-label {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 0.5rem 0;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="coffee"] .lab-arch-connection-label {
  color: rgba(255, 255, 255, 0.5);
}

/* Service Topology (Application Layer) */
.lab-service-topology {
  margin: 2rem 0;
}

.lab-topology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 1.5rem 0;
}

.lab-topology-section {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

[data-theme="coffee"] .lab-topology-section {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-topology-ha {
  border-left: 4px solid rgb(34, 197, 94);
}

.lab-topology-standard {
  border-left: 4px solid rgba(66, 99, 235, 0.5);
}

.lab-topology-section h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: rgb(66, 99, 235);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lab-topology-ha h5::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(34, 197, 94);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
  animation: ledPulse 2s ease-in-out infinite;
}

/* Service Mini Cards */
.lab-service-mini-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  transition: all 0.2s;
}

[data-theme="coffee"] .lab-service-mini-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.lab-service-mini-card:hover {
  background: rgba(66, 99, 235, 0.05);
  border-color: rgb(66, 99, 235);
}

.lab-service-mini-card .lab-service-icon {
  font-size: 1.25rem;
  margin: 0;
}

/* Service List (for standard services) */
.lab-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lab-service-list li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.875rem;
  position: relative;
}

[data-theme="coffee"] .lab-service-list li {
  color: rgba(255, 255, 255, 0.7);
}

.lab-service-list li::before {
  content: '•';
  position: absolute;
  left: 0.5rem;
  color: rgb(66, 99, 235);
  font-weight: bold;
}

/* Small Label (subtitle text) */
.lab-arch-label-small {
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 1rem;
  font-style: italic;
}

[data-theme="coffee"] .lab-arch-label-small {
  color: rgba(255, 255, 255, 0.6);
}

/* Flow Diagram (Request Journey) */
.lab-flow-diagram {
  margin: 2rem 0;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
}

[data-theme="coffee"] .lab-flow-diagram {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Flow Step */
.lab-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  transition: all 0.2s;
}

[data-theme="coffee"] .lab-flow-step {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.15);
}

.lab-flow-step:hover {
  border-color: rgb(66, 99, 235);
  box-shadow: 0 2px 12px rgba(66, 99, 235, 0.15);
}

/* Flow Step Number Badge */
.lab-flow-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(66, 99, 235);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  box-shadow: 0 2px 8px rgba(66, 99, 235, 0.3);
}

/* Flow Step Content */
.lab-flow-content {
  flex: 1;
}

.lab-flow-content h5 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

[data-theme="coffee"] .lab-flow-content h5 {
  color: rgba(255, 255, 255, 0.9);
}

.lab-flow-content p {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
}

[data-theme="coffee"] .lab-flow-content p {
  color: rgba(255, 255, 255, 0.7);
}

/* Flow Arrow Between Steps */
.lab-flow-arrow {
  text-align: center;
  font-size: 1.5rem;
  color: rgb(66, 99, 235);
  margin: 0.5rem 0;
  font-weight: bold;
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
  .lab-layer-section {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .lab-layer-title {
    font-size: 1.25rem;
  }

  .lab-arch-diagram {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1rem;
  }

  .lab-arch-details {
    grid-template-columns: 1fr;
  }

  .lab-topology-grid {
    grid-template-columns: 1fr;
  }

  .lab-flow-step {
    flex-direction: column;
    padding: 1rem;
  }

  .lab-flow-number {
    align-self: flex-start;
  }
}

/* Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .lab-layer-title::before,
  .lab-arch-node-highlight::before,
  .lab-topology-ha h5::before {
    animation: none;
  }

  .lab-layer-section:hover,
  .lab-arch-node:hover,
  .lab-flow-step:hover {
    transform: none;
  }
}

/* ============================================================================
   Resume Terminal Styling
   ============================================================================ */

.resume-terminal-wrapper {
  margin-top: 2rem;
}

/* Resume section spacing */
.resume-terminal-wrapper h1 {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  line-height: 1.2;
}

/* Resume links with terminal aesthetic */
.resume-terminal-wrapper a {
  text-decoration: none;
  transition: all 0.2s;
  border-bottom: 1px dotted currentColor;
}

.resume-terminal-wrapper a:hover {
  text-shadow: 0 0 8px currentColor;
  border-bottom-style: solid;
}

/* Git commit hashes styling */
.resume-terminal-wrapper .text-warning {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-weight: 600;
}

/* Service status indicators */
.resume-terminal-wrapper .text-success:before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 0.25rem;
  box-shadow: 0 0 6px currentColor;
  animation: ledPulse 2s ease-in-out infinite;
}

/* In progress indicator (AWS cert) */
.resume-terminal-wrapper .text-warning:before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 0.25rem;
  box-shadow: 0 0 6px currentColor;
  animation: ledPulse 2s ease-in-out infinite;
}

/* Experience timeline borders */
.resume-terminal-wrapper .border-l-2 {
  border-left-width: 2px;
  border-left-style: solid;
  transition: border-color 0.3s;
}

.resume-terminal-wrapper .border-l-2:hover {
  border-color: rgb(66, 99, 235) !important;
}

/* File permission styling (drwxr-xr-x) */
.resume-terminal-wrapper .border-l-2 .font-mono.text-xs {
  opacity: 0.6;
  transition: opacity 0.3s;
}

.resume-terminal-wrapper .border-l-2:hover .font-mono.text-xs {
  opacity: 1;
}

/* Blinking cursor animation */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.resume-terminal-wrapper .animate-pulse {
  animation: cursorBlink 1s step-end infinite;
}

/* Print styles for resume */
@media print {
  .resume-terminal-wrapper .terminal-window {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
  
  .resume-terminal-wrapper .terminal-header {
    border-bottom-color: #ccc;
  }
  
  .resume-terminal-wrapper a {
    color: #000;
    text-decoration: underline;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .resume-terminal-wrapper .terminal-window {
    padding: 1rem;
  }
  
  .resume-terminal-wrapper .pl-4 {
    padding-left: 1rem;
  }
  
  .resume-terminal-wrapper h1 {
    font-size: 1.5rem;
  }
}

/* ============================================================================
   Projects Rack-Mounted Cards
   Server rack aesthetic with 2U rack units
   ============================================================================ */

.projects-rack-container {
  margin-top: 2rem;
  padding: 0 1rem;
}

/* Rack Unit Container */
.rack-unit {
  margin-bottom: 2rem;
}

.rack-ears-container {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Rack Ears (Left/Right mounting brackets) */
.rack-ear-left,
.rack-ear-right {
  width: 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 0.5rem 0;
  position: relative;
}

[data-theme="coffee"] .rack-ear-left,
[data-theme="coffee"] .rack-ear-right {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.2);
}

.rack-ear-left {
  border-radius: 0.5rem 0 0 0.5rem;
  border-right: none;
}

.rack-ear-right {
  border-radius: 0 0.5rem 0.5rem 0;
  border-left: none;
}

/* Rack Mounting Holes */
.rack-hole {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="coffee"] .rack-hole {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Rack Device (Main Card) */
.rack-device {
  flex: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100%);
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

[data-theme="coffee"] .rack-device {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.15);
}

.rack-device:hover {
  border-color: rgb(66, 99, 235);
  box-shadow: 0 0 30px rgba(66, 99, 235, 0.3);
}

/* Device Header (Front Panel) */
.device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.03) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  gap: 1rem;
}

[data-theme="coffee"] .device-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* LED Panel */
.device-led-panel {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.led-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 10px currentColor;
  animation: ledPulse 2s ease-in-out infinite;
}

.led-green {
  background: rgb(34, 197, 94);
  color: rgb(34, 197, 94);
}

.led-blue {
  background: rgb(66, 99, 235);
  color: rgb(66, 99, 235);
}

.led-purple {
  background: rgb(168, 85, 247);
  color: rgb(168, 85, 247);
}

.led-orange {
  background: rgb(249, 115, 22);
  color: rgb(249, 115, 22);
}

/* Device Label */
.device-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

.rack-unit-number {
  display: inline-block;
  background: rgba(66, 99, 235, 0.15);
  color: rgb(66, 99, 235);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(66, 99, 235, 0.3);
}

.device-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
}

[data-theme="coffee"] .device-name {
  color: rgba(255, 255, 255, 0.9);
}

/* Port Panel */
.device-port-panel {
  display: flex;
  gap: 0.5rem;
}

.port-label {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="coffee"] .port-label {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Device Content */
.device-content {
  padding: 1.5rem;
}

.device-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tech-badge {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  background: rgba(66, 99, 235, 0.1);
  color: rgb(66, 99, 235);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(66, 99, 235, 0.2);
  font-weight: 600;
}

.device-description {
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}

[data-theme="coffee"] .device-description {
  color: rgba(255, 255, 255, 0.8);
}

/* Device Stats */
.device-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="coffee"] .device-stats {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

[data-theme="coffee"] .stat-label {
  color: rgba(255, 255, 255, 0.5);
}

.stat-value {
  display: block;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
}

[data-theme="coffee"] .stat-value {
  color: rgba(255, 255, 255, 0.9);
}

.stat-value.text-success {
  color: rgb(34, 197, 94);
}

.stat-value.text-purple {
  color: rgb(168, 85, 247);
}

/* Device Actions */
.device-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rack-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 2px solid;
}

.rack-button-outline {
  background: transparent;
  color: rgb(66, 99, 235);
  border-color: rgb(66, 99, 235);
}

.rack-button-outline:hover {
  background: rgb(66, 99, 235);
  color: white;
  box-shadow: 0 0 20px rgba(66, 99, 235, 0.5);
}

.rack-button-primary {
  background: rgb(66, 99, 235);
  color: white;
  border-color: rgb(66, 99, 235);
}

.rack-button-primary:hover {
  background: rgb(55, 88, 224);
  border-color: rgb(55, 88, 224);
  box-shadow: 0 0 20px rgba(66, 99, 235, 0.5);
}

.button-icon {
  font-size: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .rack-ear-left,
  .rack-ear-right {
    width: 24px;
  }

  .device-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 1rem;
  }

  .device-label {
    width: 100%;
  }

  .device-port-panel {
    align-self: flex-end;
  }

  .device-content {
    padding: 1rem;
  }

  .device-stats {
    grid-template-columns: 1fr 1fr;
  }

  .device-actions {
    flex-direction: column;
  }

  .rack-button {
    width: 100%;
    justify-content: center;
  }
}

/* Print Styles */
@media print {
  .rack-ears-container {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  .rack-device {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }

  .led-indicator {
    animation: none;
  }
}

/* ============================================================================
   Home Page - Boot Sequence & System Status
   Server boot aesthetic for landing page
   ============================================================================ */

.home-boot-sequence {
  padding: 2rem 1rem;
}

/* Boot Console */
.boot-console {
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(66, 99, 235, 0.3);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="coffee"] .boot-console {
  background: rgba(0, 0, 0, 0.98);
  border-color: rgba(66, 99, 235, 0.4);
}

.boot-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.boot-dots {
  display: flex;
  gap: 0.5rem;
}

.boot-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.boot-title {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.boot-content {
  padding: 2rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
}

.boot-line {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin-bottom: 0.25rem;
}

.boot-timestamp {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 0.5rem;
}

.boot-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.boot-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 2px solid;
}

.boot-button-primary {
  background: rgb(66, 99, 235);
  color: white;
  border-color: rgb(66, 99, 235);
}

.boot-button-primary:hover {
  background: rgb(55, 88, 224);
  border-color: rgb(55, 88, 224);
  box-shadow: 0 0 20px rgba(66, 99, 235, 0.5);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.boot-button-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}

.boot-button-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.boot-icon {
  font-size: 1rem;
}

/* System Panel */
.system-panel,
.services-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100%);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

[data-theme="coffee"] .system-panel,
[data-theme="coffee"] .services-panel {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.system-panel:hover,
.services-panel:hover {
  border-color: rgb(66, 99, 235);
  box-shadow: 0 10px 40px rgba(66, 99, 235, 0.2);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, rgba(66, 99, 235, 0.1) 0%, rgba(66, 99, 235, 0.05) 100%);
  border-bottom: 2px solid rgba(66, 99, 235, 0.2);
}

.panel-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
  animation: ledPulse 2s ease-in-out infinite;
}

.panel-led.led-green {
  background: rgb(34, 197, 94);
  color: rgb(34, 197, 94);
}

.panel-led.led-blue {
  background: rgb(66, 99, 235);
  color: rgb(66, 99, 235);
}

.panel-title {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(66, 99, 235);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.panel-content {
  padding: 2rem;
}

/* System Info Grid */
.system-info-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="coffee"] .info-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-label {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="coffee"] .info-label {
  color: rgba(255, 255, 255, 0.5);
}

.info-value {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 500;
}

[data-theme="coffee"] .info-value {
  color: rgba(255, 255, 255, 0.9);
}

.panel-footer {
  padding-top: 1.5rem;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

[data-theme="coffee"] .panel-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.panel-description {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.7;
  font-size: 0.9375rem;
}

[data-theme="coffee"] .panel-description {
  color: rgba(255, 255, 255, 0.7);
}

/* Service List */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.service-item {
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

[data-theme="coffee"] .service-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.service-item:hover {
  background: rgba(66, 99, 235, 0.05);
  border-color: rgba(66, 99, 235, 0.3);
  transform: translateX(4px);
}

.service-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.service-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  animation: ledPulse 2s ease-in-out infinite;
}

.service-led.led-green {
  background: rgb(34, 197, 94);
  color: rgb(34, 197, 94);
}

.service-led.led-purple {
  background: rgb(168, 85, 247);
  color: rgb(168, 85, 247);
}

.service-name {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
  flex: 1;
}

[data-theme="coffee"] .service-name {
  color: rgba(255, 255, 255, 0.9);
}

.service-badge {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.15);
  color: rgb(34, 197, 94);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-desc {
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-left: 1.5rem;
}

[data-theme="coffee"] .service-desc {
  color: rgba(255, 255, 255, 0.7);
}

.panel-action {
  padding-top: 1.5rem;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  text-align: center;
}

[data-theme="coffee"] .panel-action {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(66, 99, 235);
  text-decoration: none;
  transition: all 0.2s ease;
}

.panel-link:hover {
  gap: 0.75rem;
  text-shadow: 0 0 8px rgba(66, 99, 235, 0.5);
}

.panel-arrow {
  transition: transform 0.2s ease;
}

.panel-link:hover .panel-arrow {
  transform: translateX(4px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .home-boot-sequence {
    padding: 1rem 0.5rem;
  }

  .boot-content {
    padding: 1.5rem;
  }

  .boot-line {
    font-size: 0.8125rem;
  }

  .boot-actions {
    flex-direction: column;
  }

  .boot-button {
    width: 100%;
    justify-content: center;
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .panel-content {
    padding: 1.5rem;
  }

  .service-desc {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* ============================================================================
   Hero LED Separator - Server Rack Theme
   ============================================================================ */

/* Hero section with dotted bottom border */
.hero-led-separator {
  position: relative;
  border-bottom: 2px dotted rgba(66, 99, 235, 0.3);
}

/* LED indicator container */
.hero-led-indicators {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  background: oklch(var(--b1));
  padding: 0 16px;
  z-index: 1;
}

/* LED dot base styles */
.led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: ledPulse 2s ease-in-out infinite;
}

/* LED color variants */
.led-dot.led-green {
  background: rgb(34, 197, 94);
  box-shadow: 0 0 8px rgb(34, 197, 94);
}

.led-dot.led-blue {
  background: rgb(66, 99, 235);
  box-shadow: 0 0 8px rgb(66, 99, 235);
}

.led-dot.led-purple {
  background: rgb(168, 85, 247);
  box-shadow: 0 0 8px rgb(168, 85, 247);
}

/* Dark theme adjustments */
[data-theme="coffee"] .hero-led-separator {
  border-bottom-color: rgba(66, 99, 235, 0.4);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .led-dot {
    animation: none;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hero-led-indicators {
    gap: 10px;
    padding: 0 12px;
  }

  .led-dot {
    width: 6px;
    height: 6px;
  }
}

/* ============================================================================
   Blog Post LED Separator - Server Rack Theme
   ============================================================================ */

/* Post header with LED separator */
.post-led-separator {
  position: relative;
  border-bottom: 2px dotted rgba(66, 99, 235, 0.3);
}

/* LED indicator container for blog posts */
.post-led-indicators {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  background: oklch(var(--b1));
  padding: 0 16px;
  z-index: 1;
}

/* Dark theme adjustments for post separator */
[data-theme="coffee"] .post-led-separator {
  border-bottom-color: rgba(66, 99, 235, 0.4);
}

/* Mobile responsive for post LEDs */
@media (max-width: 768px) {
  .post-led-indicators {
    gap: 10px;
    padding: 0 12px;
  }
}

/* ============================================================================
   Scroll-to-Top Button - Server Rack Theme
   ============================================================================ */

/* Button container */
.scroll-to-top-btn {
  position: fixed;
  bottom: 72px; /* Above server stats bar (40px bar + 32px spacing) */
  right: 24px;
  z-index: 9998; /* Below header (9999), above content, above stats bar (40) */

  /* Base button styles using DaisyUI */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;

  /* Data-center aesthetic */
  background: rgb(66, 99, 235);
  background: linear-gradient(135deg, rgb(66, 99, 235), rgb(37, 99, 235));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;

  /* Typography */
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-transform: uppercase;

  /* Shadow for depth */
  box-shadow: 0 4px 12px rgba(66, 99, 235, 0.3),
              0 0 20px rgba(66, 99, 235, 0.2);

  /* Transitions for hover effects */
  transition: all 0.3s ease;

  /* Cursor */
  cursor: pointer;

  /* GPU acceleration */
  will-change: opacity, transform;
}

/* Note: Visibility and transitions handled by Alpine.js x-show and x-transition directives */

/* LED indicator inside button */
.scroll-to-top-btn .led-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(34, 197, 94);
  box-shadow: 0 0 8px rgb(34, 197, 94),
              0 0 12px rgb(34, 197, 94);
  animation: ledPulse 2s ease-in-out infinite;
}

/* Arrow icon */
.scroll-to-top-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Hover state */
.scroll-to-top-btn:hover {
  background: linear-gradient(135deg, rgb(37, 99, 235), rgb(29, 78, 216));
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(66, 99, 235, 0.4),
              0 0 30px rgba(66, 99, 235, 0.3);
  transform: translateY(-2px);
}

.scroll-to-top-btn:hover .led-status {
  box-shadow: 0 0 12px rgb(34, 197, 94),
              0 0 16px rgb(34, 197, 94);
}

/* Active state (click) */
.scroll-to-top-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Focus state (keyboard accessibility) */
.scroll-to-top-btn:focus {
  outline: 3px solid rgba(34, 197, 94, 0.5);
  outline-offset: 3px;
}

/* Remove will-change when not animating */
.scroll-to-top-btn:not(:hover):not(:active) {
  will-change: auto;
}

/* Dark theme (coffee) */
[data-theme="coffee"] .scroll-to-top-btn {
  background: linear-gradient(135deg, rgb(66, 99, 235), rgb(37, 99, 235));
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(66, 99, 235, 0.4),
              0 0 20px rgba(66, 99, 235, 0.3);
}

[data-theme="coffee"] .scroll-to-top-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 20px rgba(66, 99, 235, 0.5),
              0 0 30px rgba(66, 99, 235, 0.4);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .scroll-to-top-btn {
    bottom: 68px; /* Above server stats bar on mobile (40px bar + 28px spacing) */
    right: 16px;
    padding: 8px 12px;
    font-size: 11px;
    gap: 6px;
  }

  .scroll-to-top-btn .led-status {
    width: 6px;
    height: 6px;
  }

  .scroll-to-top-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Hide text label on mobile, show only LED + arrow */
  .scroll-to-top-btn .btn-text {
    display: none;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scroll-to-top-btn {
    transition: opacity 0.1s ease, visibility 0.1s ease;
  }

  .scroll-to-top-btn .led-status {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .scroll-to-top-btn {
    border-width: 3px;
  }
}
/* ============================================================================
   Lab Page - High Availability Interactive Demo
   ============================================================================ */

/* HA Demo Container */
.lab-ha-demo-section {
  margin: 3rem 0;
}

.lab-ha-intro {
  margin-bottom: 2rem;
  text-align: center;
}

.lab-ha-intro p {
  font-size: 1.125rem;
  max-width: 50rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.lab-ha-instructions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: rgba(66, 99, 235, 0.1);
  border: 2px solid rgb(66, 99, 235);
  border-radius: 0.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

[data-theme="coffee"] .lab-ha-instructions {
  background: rgba(66, 99, 235, 0.2);
}

/* HA Cluster Grid - 2x2 Responsive Layout */
.lab-ha-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: Stack vertically */
@media (max-width: 767px) {
  .lab-ha-cluster-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Node Grid - Responsive Layout */
.lab-ha-nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop: Force 2×2 grid for better space usage */
@media (min-width: 1024px) {
  .lab-ha-nodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile portrait: Stack vertically */
@media (max-width: 767px) and (orientation: portrait) {
  .lab-ha-nodes-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Individual Node Card */
.lab-ha-node-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  padding: 1rem;
  min-width: 280px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="coffee"] .lab-ha-node-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.lab-ha-node-card:hover {
  border-color: rgb(66, 99, 235);
  box-shadow: 0 20px 25px -5px rgba(66, 99, 235, 0.15), 0 10px 10px -5px rgba(66, 99, 235, 0.1);
  transform: translateY(-2px) scale(1.01);
}

.lab-ha-node-card.node-healthy {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1));
}

[data-theme="coffee"] .lab-ha-node-card.node-healthy {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 1));
}

.lab-ha-node-card.node-healthy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: rgb(34, 197, 94);
  animation: ledPulse 2s ease-in-out infinite;
}

.lab-ha-node-card.node-failed {
  border-color: rgb(244, 67, 54);
  background: rgba(244, 67, 54, 0.05);
  opacity: 0.7;
  cursor: not-allowed;
}

[data-theme="coffee"] .lab-ha-node-card.node-failed {
  background: rgba(244, 67, 54, 0.1);
}

.lab-ha-node-card.node-failed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: rgb(244, 67, 54);
  animation: none;
}

.lab-ha-node-card:focus-visible {
  outline: 3px solid rgb(66, 99, 235);
  outline-offset: 2px;
}

/* Node Header */
.lab-ha-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="coffee"] .lab-ha-node-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.lab-ha-node-name {
  font-weight: 700;
  font-size: 1rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  color: #1a1a1a;
}

[data-theme="coffee"] .lab-ha-node-name {
  color: #ffffff;
}

.lab-ha-node-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(34, 197, 94, 0.2);
  color: rgb(34, 197, 94);
  box-shadow: 0 2px 4px -1px rgba(34, 197, 94, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lab-ha-node-status.status-failed {
  background: rgba(244, 67, 54, 0.2);
  color: rgb(244, 67, 54);
  box-shadow: 0 2px 4px -1px rgba(244, 67, 54, 0.2);
}

.lab-ha-node-status-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.node-healthy .lab-ha-node-status-led {
  animation: ledPulse 2s ease-in-out infinite;
}

/* Node Stats Section */
.lab-ha-node-stats {
  margin-bottom: 0.75rem;
}

.lab-ha-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.lab-ha-stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  color: rgba(0, 0, 0, 0.6);
  min-width: 2.5rem;
}

[data-theme="coffee"] .lab-ha-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

.lab-ha-progress-bar {
  flex: 1;
  height: 1.25rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
}

[data-theme="coffee"] .lab-ha-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

.lab-ha-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(66, 99, 235), rgb(99, 132, 255));
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

.lab-ha-progress-value {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Services Container */
.lab-ha-services-container {
  min-height: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-content: flex-start;
}

/* Service Badge */
.lab-ha-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, rgb(66, 99, 235), rgb(99, 132, 255));
  color: #ffffff;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(66, 99, 235, 0.2), 0 2px 4px -1px rgba(66, 99, 235, 0.1);
  line-height: 1.2;
  animation: slideIn 0.3s ease-out;
}

.lab-ha-service-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(66, 99, 235, 0.25), 0 3px 5px -1px rgba(66, 99, 235, 0.15);
}

.lab-ha-service-badge.priority-high {
  background: linear-gradient(135deg, rgb(249, 115, 22), rgb(251, 146, 60));
  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2), 0 2px 4px -1px rgba(249, 115, 22, 0.1);
}

.lab-ha-service-badge.priority-high:hover {
  box-shadow: 0 6px 8px -1px rgba(249, 115, 22, 0.25), 0 3px 5px -1px rgba(249, 115, 22, 0.15);
}

.lab-ha-service-badge .lab-ha-service-id {
  opacity: 0.8;
  font-size: 0.625rem;
}

/* Resource Bars */
.lab-ha-resources {
  margin-bottom: 0.5rem;
}

.lab-ha-resource-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.lab-ha-resource-label {
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  color: rgba(0, 0, 0, 0.6);
  min-width: 2.5rem;
}

[data-theme="coffee"] .lab-ha-resource-label {
  color: rgba(255, 255, 255, 0.6);
}

.lab-ha-resource-bar-container {
  flex: 1;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
}

[data-theme="coffee"] .lab-ha-resource-bar-container {
  background: rgba(255, 255, 255, 0.08);
}

.lab-ha-resource-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(34, 197, 94), rgb(74, 222, 128));
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

.lab-ha-resource-bar-fill.warning {
  background: linear-gradient(90deg, rgb(251, 191, 36), rgb(253, 224, 71));
}

.lab-ha-resource-bar-fill.critical {
  background: linear-gradient(90deg, rgb(244, 67, 54), rgb(239, 83, 80));
}

.lab-ha-resource-value {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.625rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Services Container */
.lab-ha-services-container {
  min-height: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-content: flex-start;
}

/* Service Badge */
.lab-ha-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgb(66, 99, 235);
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lab-ha-service-badge.priority-high {
  background: rgb(147, 51, 234);
}

.lab-ha-service-badge.migrating {
  animation: serviceMigrate 1.5s ease-in-out;
  background: rgb(251, 191, 36);
  color: #1a1a1a;
}

@keyframes serviceMigrate {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.6;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Controls Section */
.lab-ha-controls {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.lab-ha-controls .btn {
  gap: 0.5rem;
  min-height: 3rem;
}

/* Event Log */
.lab-ha-event-log {
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

[data-theme="coffee"] .lab-ha-event-log {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.12);
}

.lab-ha-event-log h5 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}

[data-theme="coffee"] .lab-ha-event-log h5 {
  color: #ffffff;
}

.lab-ha-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lab-ha-event {
  display: block;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  transition: all 0.2s ease;
}

.lab-ha-event-time {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  min-width: 3.5rem;
}

[data-theme="coffee"] .lab-ha-event-time {
  color: rgba(255, 255, 255, 0.5);
}

.lab-ha-event-message {
  flex: 1;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.4;
}

[data-theme="coffee"] .lab-ha-event-message {
  color: rgba(255, 255, 255, 0.8);
}

.lab-ha-event.event-info {
  border-left-color: rgb(59, 130, 246);
  background: rgba(59, 130, 246, 0.08);
}

.lab-ha-event.event-warning {
  border-left-color: rgb(251, 191, 36);
  background: rgba(251, 191, 36, 0.08);
}

.lab-ha-event.event-error {
  border-left-color: rgb(244, 67, 54);
  background: rgba(244, 67, 54, 0.08);
}

.lab-ha-event.event-success {
  border-left-color: rgb(34, 197, 94);
  background: rgba(34, 197, 94, 0.08);
}

/* Controls */
.lab-ha-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.lab-ha-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: rgb(66, 99, 235);
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(66, 99, 235, 0.3);
}

.lab-ha-reset-btn:hover {
  background: rgb(55, 82, 200);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 99, 235, 0.4);
}

.lab-ha-reset-btn:active {
  transform: translateY(0);
}

/* Architecture Cards */
.lab-ha-arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.lab-ha-arch-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

[data-theme="coffee"] .lab-ha-arch-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.08);
}

.lab-ha-arch-card:hover {
  border-color: rgb(66, 99, 235);
  box-shadow: 0 8px 24px rgba(66, 99, 235, 0.15);
  transform: translateY(-4px);
}

.lab-ha-arch-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.lab-ha-arch-card h5 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}

[data-theme="coffee"] .lab-ha-arch-card h5 {
  color: #ffffff;
}

.lab-ha-arch-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="coffee"] .lab-ha-arch-card p {
  color: rgba(255, 255, 255, 0.7);
}

/* Config Table */
.lab-ha-config-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: #ffffff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="coffee"] .lab-ha-config-table {
  background: #1a1a1a;
}

.lab-ha-config-table thead {
  background: rgb(66, 99, 235);
  color: #ffffff;
}

.lab-ha-config-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lab-ha-config-table td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9375rem;
}

[data-theme="coffee"] .lab-ha-config-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.lab-ha-config-table tbody tr:last-child td {
  border-bottom: none;
}

.lab-ha-config-table tbody tr:hover {
  background: rgba(66, 99, 235, 0.05);
}

.lab-ha-config-table .priority-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lab-ha-config-table .priority-high {
  background: rgba(147, 51, 234, 0.15);
  color: rgb(147, 51, 234);
}

.lab-ha-config-table .priority-medium {
  background: rgba(66, 99, 235, 0.15);
  color: rgb(66, 99, 235);
}

/* Responsive Design */
@media (max-width: 768px) {
  .lab-ha-nodes-grid {
    grid-template-columns: 1fr;
  }

  .lab-ha-arch-grid {
    grid-template-columns: 1fr;
  }

  .lab-ha-event {
    flex-direction: column;
    gap: 0.25rem;
  }

  .lab-ha-event-time {
    min-width: auto;
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lab-ha-node-card,
  .lab-ha-arch-card,
  .lab-ha-reset-btn,
  .lab-ha-service-badge {
    transition: none;
  }

  .lab-ha-node-card.node-healthy::before,
  .lab-ha-node-status-led {
    animation: none;
  }

  .lab-ha-service-badge.migrating {
    animation: none;
  }
}

/* HA Demo - Interactive Enhancements (Phase 3) */

/* Event Log Header with Auto-Scroll Toggle */
.lab-ha-event-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.lab-ha-event-log-header .btn {
  min-height: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
}

/* Event Log Scroll Container */
.lab-ha-events-container {
  scroll-behavior: smooth;
  height: 250px; /* Increased for better badge visibility */
  overflow-y: auto;
}

.lab-ha-events-container.scroll-paused {
  border-left: 3px solid rgb(249, 115, 22);
  padding-left: calc(1rem - 3px);
}

/* Ensure footer note is always visible and above log rows */
.lab-ha-event-log > p:last-child {
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

/* Event Indentation (for migration events) */
.lab-ha-event.event-indent {
  padding-left: 2rem;
  position: relative;
}

.lab-ha-event.event-indent::before {
  content: '↳';
  position: absolute;
  left: 0.75rem;
  color: rgba(66, 99, 235, 0.5);
  font-size: 1rem;
}

[data-theme="coffee"] .lab-ha-event.event-indent::before {
  color: rgba(147, 197, 253, 0.5);
}

/* Node Card Restore Hints */
.lab-ha-restore-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: linear-gradient(135deg, rgb(34, 197, 94), rgb(74, 222, 128));
  color: white;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.3), 0 2px 4px -1px rgba(34, 197, 94, 0.2);
  z-index: 10;
  animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.lab-ha-restore-hint svg {
  width: 1rem;
  height: 1rem;
  animation: spin 2s linear infinite;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Failed Node Card - Clickable State */
.lab-ha-node-card.node-failed {
  cursor: pointer;
  position: relative;
}

.lab-ha-node-card.node-failed:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 20px 25px -5px rgba(34, 197, 94, 0.15), 0 10px 10px -5px rgba(34, 197, 94, 0.1);
}

.lab-ha-node-card.node-failed:focus {
  outline: 2px solid rgb(34, 197, 94);
  outline-offset: 2px;
}

/* Healthy Node Card - Also Clickable */
.lab-ha-node-card.node-healthy {
  cursor: pointer;
}

.lab-ha-node-card.node-healthy:focus {
  outline: 2px solid rgb(239, 68, 68);
  outline-offset: 2px;
}

/* Responsive: Hide restore hint text on small screens */
@media (max-width: 640px) {
  .lab-ha-restore-hint span {
    display: none;
  }

  .lab-ha-restore-hint {
    padding: 0.375rem;
  }
}

/* ============================================================================
   HA Architecture Component - Accessibility Enhancements
   ============================================================================ */

/* Enhanced focus rings for card components (override daisyUI defaults if needed) */
.card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Timeline dots - ensure minimum touch target size (44px) for accessibility */
.timeline-middle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-middle svg {
  min-width: 20px;
  min-height: 20px;
}

/* ============================================================================
   HA Architecture Component - Modern Step Cards (2×2 Grid)
   Enhanced hover effects, focus states, and radial progress styling
   ============================================================================ */

/* Step card hover effects and keyboard focus */
.lab-ha-step-card .card:hover {
  transform: translateY(-4px);
  border-width: 2px;
}

.lab-ha-step-card:focus-visible .card {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  transform: translateY(-4px);
}

.lab-ha-step-card .card:active {
  transform: translateY(-2px);
}

/* Radial progress animation on hover */
.lab-ha-step-card:hover .radial-progress {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Gradient text animation for section header */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

[data-module="ha-architecture"] h2 {
  background-size: 200% auto;
  animation: gradient-shift 8s ease infinite;
}

/* Stat component hover effects */
[data-module="ha-architecture"] .stat {
  transition: all 0.3s ease;
}

[data-module="ha-architecture"] .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for step cards */
@media (max-width: 768px) {
  .lab-ha-step-card .card-body {
    padding: 1.25rem;
  }
  
  [data-module="ha-architecture"] .stat {
    min-width: 100%;
  }
}

/* Accessibility: Reduce motion for users who prefer */
@media (prefers-reduced-motion: reduce) {
  .lab-ha-step-card .card,
  .lab-ha-step-card .radial-progress,
  [data-module="ha-architecture"] .stat,
  [data-module="ha-architecture"] h2 {
    transition: none;
    animation: none;
  }
}


/* ============================================================================
   Featured Image Backgrounds (for transparent images)
   ============================================================================ */

/* Provides aesthetic background gradients for transparent featured images
   Works in both featured post cards and single post headers
   Theme-aware: adjusts for light (emerald) and dark (coffee) modes */

.featured-image-container {
  position: relative;
}

.featured-image-bg {
  /* Radial gradient from center - subtle and theme-aware */
  background: radial-gradient(
    ellipse at center,
    oklch(98% 0.01 240) 0%,
    oklch(95% 0.02 240) 50%,
    oklch(92% 0.03 240) 100%
  );
}

/* Dark mode gradient (coffee theme) */
[data-theme="coffee"] .featured-image-bg {
  background: radial-gradient(
    ellipse at center,
    oklch(25% 0.02 240) 0%,
    oklch(20% 0.03 240) 50%,
    oklch(15% 0.04 240) 100%
  );
}

/* Fallback for system dark mode preference */
@media (prefers-color-scheme: dark) {
  .featured-image-bg {
    background: radial-gradient(
      ellipse at center,
      oklch(25% 0.02 240) 0%,
      oklch(20% 0.03 240) 50%,
      oklch(15% 0.04 240) 100%
    );
  }
}

/* Override for explicit light theme */
[data-theme="light"] .featured-image-bg,
[data-theme="emerald"] .featured-image-bg {
  background: radial-gradient(
    ellipse at center,
    oklch(98% 0.01 240) 0%,
    oklch(95% 0.02 240) 50%,
    oklch(92% 0.03 240) 100%
  );
}

/* ============================================================================
   Terminal Glow Effect
   ============================================================================ */

/* Provides terminal-style glow effect for emphasized text
   Theme-aware: green terminal glow in both light and dark modes
   Subtle pulse animation for dynamic visual interest */

.terminal-glow {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  color: oklch(60% 0.15 145);  /* Terminal green */
  text-shadow: 
    0 0 10px oklch(60% 0.15 145 / 0.5),
    0 0 20px oklch(60% 0.15 145 / 0.3),
    0 0 30px oklch(60% 0.15 145 / 0.2);
  animation: terminal-pulse 2s ease-in-out infinite;
}

/* Dark mode: brighter green for better contrast */
[data-theme="coffee"] .terminal-glow {
  color: oklch(75% 0.2 145);
  text-shadow: 
    0 0 10px oklch(75% 0.2 145 / 0.6),
    0 0 20px oklch(75% 0.2 145 / 0.4),
    0 0 30px oklch(75% 0.2 145 / 0.2);
}

/* Fallback for system dark mode preference */
@media (prefers-color-scheme: dark) {
  .terminal-glow {
    color: oklch(75% 0.2 145);
    text-shadow: 
      0 0 10px oklch(75% 0.2 145 / 0.6),
      0 0 20px oklch(75% 0.2 145 / 0.4),
      0 0 30px oklch(75% 0.2 145 / 0.2);
  }
}

/* Override for explicit light theme */
[data-theme="light"] .terminal-glow,
[data-theme="emerald"] .terminal-glow {
  color: oklch(60% 0.15 145);
  text-shadow: 
    0 0 10px oklch(60% 0.15 145 / 0.5),
    0 0 20px oklch(60% 0.15 145 / 0.3),
    0 0 30px oklch(60% 0.15 145 / 0.2);
}

/* Subtle pulse animation */
@keyframes terminal-pulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 10px oklch(60% 0.15 145 / 0.5),
      0 0 20px oklch(60% 0.15 145 / 0.3),
      0 0 30px oklch(60% 0.15 145 / 0.2);
  }
  50% {
    opacity: 0.85;
    text-shadow: 
      0 0 15px oklch(60% 0.15 145 / 0.7),
      0 0 25px oklch(60% 0.15 145 / 0.5),
      0 0 35px oklch(60% 0.15 145 / 0.3);
  }
}

/* Dark mode pulse animation */
[data-theme="coffee"] .terminal-glow {
  animation: terminal-pulse-dark 2s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  .terminal-glow {
    animation: terminal-pulse-dark 2s ease-in-out infinite;
  }
}

@keyframes terminal-pulse-dark {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 10px oklch(75% 0.2 145 / 0.6),
      0 0 20px oklch(75% 0.2 145 / 0.4),
      0 0 30px oklch(75% 0.2 145 / 0.2);
  }
  50% {
    opacity: 0.85;
    text-shadow:
      0 0 15px oklch(75% 0.2 145 / 0.8),
      0 0 25px oklch(75% 0.2 145 / 0.6),
      0 0 35px oklch(75% 0.2 145 / 0.4);
  }
}

/* ============================================================================
   DCEO Console Utilities
   ============================================================================ */

/* DCEO Console - Critical Iframe Scroll Fix
 * Required to prevent scroll locking on mobile viewports.
 * This ensures the console functions as a "Field Unit" in iframe contexts.
 */
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
}

/* CRT Scanlines Effect */
.scanlines::before {
  content: " ";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 40;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* Command Palette Backdrop */
.palette-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}