/* ==========================================================================
   Neobrutalist theme — aldof.duckdns.org (gethomepage custom.css)
   Based on PINO reference implementation (http://192.168.0.3:4747/)
   ========================================================================== */

/* Design Tokens - PINO inspired colors */
:root {
  --nb-ink: #0a0a0a;
  --nb-paper: #fffdf5;
  --nb-neon: #ff2a00;
  --nb-lime: #ccff00;
  --nb-blue: #0033ff;
  --nb-purple: #8a2be2;
  --nb-border: 4px solid var(--nb-ink);
  --nb-shadow: 6px 6px 0 var(--nb-blue);
  --nb-shadow-hover: 10px 10px 0 var(--nb-purple);
  --nb-transition: transform .15s ease;
}

/* Dark mode */
.dark :root,
.dark body,
[data-theme="dark"] {
  --nb-ink: #ffffff;
  --nb-paper: #1a1a2e;
  --nb-neon: #ff4d00;
  --nb-lime: #a8ff00;
  --nb-blue: #4d7fff;
  --nb-purple: #b366ff;
  /* Refined background and surface tokens */
  --nb-paper-dark: #16161d;
  --nb-ink-dark: #e1e1e8;
  --nb-border-dark: #3a3a45;
  --nb-shadow-dark: 6px 6px 0 #1a1a30;
  /* Enhanced accent variants */
  --nb-lime-dark: #b3ff33;
  --nb-neon-dark: #ff6633;
  --nb-blue-dark: #6699ff;
  --nb-purple-dark: #b366ff;
  /* Status colors for dark mode */
  --status-success: #22c55e;
  --status-warning: #fbbf24;
  --status-error: #ef4444;
  --status-info: #3b82f6;
}

/* Dark theme base component overrides */
.dark body,
[data-theme="dark"] body {
  background: var(--nb-paper-dark) !important;
  color: var(--nb-ink-dark) !important;
}

.dark .service-group-name,
[data-theme="dark"] .service-group-name {
  background: var(--nb-lime-dark) !important;
-    color: var(--nb-ink-dark) !important;
+    color: var(--nb-paper-dark) !important;
  border-color: var(--nb-border-dark) !important;
  box-shadow: 4px 4px 0 var(--nb-neon-dark) !important;
}

.dark li.service,
[data-theme="dark"] li.service {
  background: var(--nb-paper-dark) !important;
  border-color: var(--nb-border-dark) !important;
  box-shadow: var(--nb-shadow-dark) !important;
}

.dark li.service:hover,
[data-theme="dark"] li.service:hover {
  box-shadow: 10px 10px 0 var(--nb-purple-dark) !important;
}

/* ===== PAGE BACKGROUND ===== */
body {
  background: var(--nb-paper) !important;
}

/* ===== SERVICE GROUP HEADINGS ===== */
.service-group-name {
  display: inline-block !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.02em !important;
  background: var(--nb-lime) !important;
  border: var(--nb-border) !important;
  box-shadow: 4px 4px 0 var(--nb-neon) !important;
  padding: 0.5rem 1rem !important;
  margin: 1.5rem 0 0.75rem 0 !important;
  border-radius: 0 !important;
}

/* ===== SERVICE GROUPS — ALWAYS OPEN BLOCKS, NO ACCORDION ===== */
button[aria-expanded] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important; /* disable click to toggle */
}
button[aria-expanded] > h2 { margin: 0 !important; }
button[aria-expanded] svg { display: none !important; }

/* ===== SERVICE CARDS (Main fix - single border, no double) ===== */
li.service {
  background: white !important;
  border: var(--nb-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--nb-shadow) !important;
  transition: var(--nb-transition) !important;
  margin-bottom: 1rem !important;
  padding: 1rem !important;
  position: relative !important;
  overflow: visible !important;
}

li.service:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: var(--nb-shadow-hover) !important;
}

/* Remove inner card styling - use just the li */
li.service > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Service icons */
li.service .service-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  background: var(--nb-paper) !important;
  border: var(--nb-border) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--nb-blue) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

li.service .service-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Service name */
li.service .service-name,
li.service .service-name * {
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--nb-ink) !important;
  font-size: 1rem !important;
}

/* Service description */
li.service .service-description,
li.service .service-description * {
  font-weight: 600 !important;
  color: #4b5563 !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
}

/* Status badges */
li.service .docker-status {
  background: var(--nb-ink) !important;
  color: white !important;
  border: 2px solid var(--nb-ink) !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.5rem !important;
}

li.service .docker-status-unknown {
  background: #6b7280 !important;
}

li.service .docker-status-running,
li.service .docker-status-healthy {
  background: var(--nb-lime) !important;
  color: var(--nb-ink) !important;
}

li.service .docker-status-stopped {
  background: var(--nb-neon) !important;
}

/* Information widgets dark mode */
.dark .information-widget-resource,
[data-theme="dark"] .information-widget-resource {
  background: var(--nb-paper-dark) !important;
  border-color: var(--nb-border-dark) !important;
  box-shadow: 4px 4px 0 var(--nb-lime-dark) !important;
  color: var(--nb-ink-dark) !important;
}

.dark .information-widget-label,
[data-theme="dark"] .information-widget-label {
  color: var(--nb-ink-dark) !important;
  opacity: 0.8 !important;
}

.dark .resource-usage,
[data-theme="dark"] .resource-usage {
  background: #2a2a40 !important;      /* Darker track */
  border-color: var(--nb-border-dark) !important;
}

.dark .resource-usage > div,
[data-theme="dark"] .resource-usage > div {
  background: var(--nb-lime-dark) !important;
}

/* ===== INFORMATION WIDGETS ===== */
.information-widget-resource {
  background: white !important;
  border: var(--nb-border) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--nb-lime) !important;
  transition: var(--nb-transition) !important;
  margin: 0.25rem !important;
  padding: 0.5rem !important;
}

.information-widget-resource:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--nb-neon) !important;
}

.information-widget-label {
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  color: var(--nb-ink) !important;
  margin-bottom: 0.25rem !important;
}

.information-widget-resource .pr-1,
.information-widget-resource [class*="pr-1"] {
  font-weight: 900 !important;
  font-size: 0.875rem !important;
  color: var(--nb-ink) !important;
}

/* ===== METRICS WIDGET STYLING (TDD APPROACH) ===== */
/* Track - the background of the progress bar */
.information-widget-resource .resource-usage,
.information-widget-glances .resource-usage {
  height: 0.5rem !important;
  background: #e5e7eb !important; /* Light gray track */
  border: 2px solid var(--nb-ink) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-top: 0.5rem !important;
}

/* Fill - the colored part that shows progress */
.information-widget-resource .resource-usage > div,
.information-widget-glances .resource-usage > div {
  height: 100% !important;
  background: var(--nb-lime) !important; /* Lime fill - using our accent color */
  transition: width 0.3s ease !important;
}

/* ===== BOOKMARKS ===== */

/* Bookmarks dark mode */
.dark .bookmark,
[data-theme="dark"] .bookmark {
  background: var(--nb-paper-dark) !important;
  border-color: var(--nb-border-dark) !important;
  box-shadow: 4px 4px 0 var(--nb-blue-dark) !important;
}

.dark .bookmark > div:first-child,
[data-theme="dark"] .bookmark > div:first-child {
  background: var(--nb-lime-dark) !important;
  border-right-color: var(--nb-border-dark) !important;
  color: var(--nb-ink-dark) !important;
}

.dark .bookmark a,
.dark .bookmark-name,
[data-theme="dark"] .bookmark a,
[data-theme="dark"] .bookmark-name {
  color: var(--nb-ink-dark) !important;
}

.dark .bookmark-description,
[data-theme="dark"] .bookmark-description {
  color: #a0a0b0 !important;
}
/* Bookmark group header button */
button[aria-expanded].bookmark-group-button,
.bookmark-group button[aria-expanded] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

button[aria-expanded].bookmark-group-button > h2,
.bookmark-group button[aria-expanded] > h2 {
  margin: 0 !important;
  display: inline-block !important;
}

/* Bookmark list inside group - horizontal responsive grid */
.bookmark-group .bookmark-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  padding: 0.5rem !important;
}

.bookmark-group li.bookmark {
  display: flex !important;
  flex: 1 1 calc(50% - 0.5rem) !important; /* Side by side: 2 per row */
  min-width: 120px !important;
}

/* Remove bottom margin on bookmark links */
.bookmark-group a[href*="linkedin"],
.bookmark-group a[href*="github"],
.bookmark-group a[href*="gitlab"],
.bookmark-group a[href*="codepen"],
.bookmark-group a[href*="t.me"] {
  margin-bottom: 0 !important;
}

button[aria-expanded].bookmark-group-button svg,
.bookmark-group button[aria-expanded] svg {
  transition: transform 0.2s ease !important;
}

button[aria-expanded="true"].bookmark-group-button svg,
.bookmark-group button[aria-expanded="true"] svg {
  transform: rotate(180deg) !important;
}

/* Bookmark list - mobile-first responsive grid */
.bookmark-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

li.bookmark {
  background: white !important;
  border: var(--nb-border) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--nb-blue) !important;
  transition: var(--nb-transition) !important;
  margin: 0 !important;
  flex: 1 1 48% !important; /* 2 per row, responsive */
  min-width: 140px !important;
  display: flex !important;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  li.bookmark {
    flex: 1 1 calc(50% - 0.5rem) !important;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  li.bookmark {
    flex: 1 1 calc(33.333% - 0.5rem) !important;
  }
}

li.bookmark:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--nb-neon) !important;
}

li.bookmark > div:first-child {
  background: var(--nb-lime) !important;
  border-right: var(--nb-border) !important;
  flex-shrink: 0 !important;
}

li.bookmark a,
.bookmark-name {
  color: var(--nb-ink) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  /* Remove unwanted styles: shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 */
}

.bookmark-description {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  li.bookmark {
    flex: 1 1 calc(50% - 0.5rem) !important;
  }
}

@media (max-width: 480px) {
  li.bookmark {
    flex: 1 1 48% !important;
  }
}

/* ===== FOCUS STATES ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--nb-neon) !important;
  outline-offset: 2px !important;
}
 
/* Enhanced focus states for dark mode */
.dark a:focus-visible,
.dark button:focus-visible,
.dark input:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible {
  outline: 3px solid var(--nb-lime-dark) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 8px var(--nb-lime-dark) !important;
}

/* High contrast status badges in dark mode */
.dark .docker-status,
[data-theme="dark"] .docker-status {
  background: var(--nb-ink-dark) !important;
  color: var(--nb-paper-dark) !important;
  border-color: var(--nb-ink-dark) !important;
}

.dark .docker-status-running,
.dark .docker-status-healthy,
[data-theme="dark"] .docker-status-running,
[data-theme="dark"] .docker-status-healthy {
  background: var(--status-success) !important;
  color: var(--nb-paper-dark) !important;
  box-shadow: 0 0 6px var(--status-success) !important;
}

.dark .docker-status-stopped,
[data-theme="dark"] .docker-status-stopped {
  background: var(--status-error) !important;
  color: var(--nb-paper-dark) !important;
  box-shadow: 0 0 6px var(--status-error) !important;
}

.dark .docker-status-unknown,
[data-theme="dark"] .docker-status-unknown {
  background: #52525b !important;
  color: var(--nb-paper-dark) !important;
}

/* Footer styling – neon‑brutalist */
#footer {
  background: var(--nb-paper-dark) !important;
  border-top: var(--nb-border-dark) !important;
  box-shadow: 4px 4px 0 var(--nb-neon-dark) !important;
  padding: 1.5rem !important;        /* More breathing room */
  text-align: center !important;
  color: var(--nb-ink-dark) !important;
  position: relative !important;
  border-bottom: var(--nb-border-dark) !important;
}

#footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nb-lime-dark), transparent);
  opacity: 0.6;
}

#footer a {
  color: var(--nb-ink-dark) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0 !important;
  display: inline-block !important;
  transition: all 0.15s ease !important;
}

#footer a:hover {
  background: var(--nb-lime-dark) !important;
  color: var(--nb-paper-dark) !important;
  box-shadow: 2px 2px 0 var(--nb-neon-dark) !important;
  transform: translate(-1px, -1px) !important;
}

/* Dark mode footer */
.dark #footer {
  background: var(--nb-paper-dark) !important;
  color: var(--nb-ink-dark) !important;
}

/* ===== SEARCH DIALOG ===== */
dialog input[type="text"] {
  border: var(--nb-border) !important;
  border-radius: 0 !important;
  background: white !important;
  color: var(--nb-ink) !important;
  font-weight: 600 !important;
}

dialog input[type="text"]:focus {
  outline: 3px solid var(--nb-lime) !important;
}

[role="dialog"] {
  background: rgba(0, 0, 0, 0.7) !important;
}

[role="dialog"] > div {
  background: var(--nb-paper) !important;
  border: var(--nb-border) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--nb-neon) !important;
}

/* Hide information widget label */
.information-widget-label {
  display: none !important;
}

/* Theme switcher button (light/dark toggle) */
#theme-switcher {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 1000 !important;
  background: var(--nb-paper-dark) !important;
  border: var(--nb-border-dark) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--nb-neon-dark) !important;
  padding: 0.75rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  transition: all 0.15s ease !important;
}

#theme-switcher:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--nb-purple-dark) !important;
  background: var(--nb-lime-dark) !important;
}

#theme-switcher svg {
  width: 24px !important;
  height: 24px !important;
  fill: var(--nb-ink-dark) !important;
}

/* Hide in dark mode when already dark */
.dark #theme-switcher {
  opacity: 0.7 !important;
}

/* Progress bar color for glances widget */
.resource-usage > div,
.resource-usage > div.bg-theme-800\/70,
.resource-usage > div.bg-theme-200\/50,
.dark .resource-usage > div.bg-theme-200\/50 {
  height: 100% !important;
  background: var(--nb-lime) !important;
  transition: width 0.3s ease !important;
}

/* Conditional coloring based on status */
.resource-usage > div.low-disk {
  background: #ef4444 !important; /* Red for low disk space */
}

.resource-usage > div.high-temp {
  background: #ef4444 !important; /* Red for high temperature */
}

.resource-usage > div.warning {
  background: #f59e0b !important; /* Yellow/orange for warning */
}

/* Dark mode support for conditional colors */
.dark .resource-usage > div.low-disk,
.dark .resource-usage > div.high-temp,
.dark .resource-usage > div.warning {
  background: #ef4444 !important;
}