/* ═══════════════════════════════════════════════════════
   Đặng Dương's Homelab — ULTIMATE PERFORMANCE THEME
   ═══════════════════════════════════════════════════════ */

/* 1. KILLS ALL JS/CSS ANIMATIONS & TRANSITIONS FOR MAX FPS */
*, *::before, *::after {
  transition: none !important;
  animation: none !important;
}

/* 2. FORCE GPU ACCELERATION ON MAIN CONTAINER */
body, #page_container, main {
  background-color: #0b0f19 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 3. CONTENT VISIBILITY & CONTAINMENT (DOM Rendering Optimization) */
/* This tells the browser to skip rendering cards that are outside the viewport */
.service, .bookmark, .information-widget-resource {
  content-visibility: auto;
  contain-intrinsic-size: 100px;
  contain: layout style paint;
  will-change: auto;
}

/* ─── Top Widget Bar ─── */
#information-widgets {
  background-color: #12182b !important;
  border-radius: 8px !important;
  padding: 0.8rem 1rem !important;
  margin-bottom: 1.5rem !important;
  contain: layout paint;
}

/* Resource widget items */
.information-widget-resource {
  background-color: #1a2238 !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.6rem !important;
}

.information-widget-resource .text-xs {
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  color: #64748b !important;
}

.information-widget-resource .text-theme-800 {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: #e2e8f0 !important;
}

/* Resource progress bars - SOLID COLORS, NO GRADIENTS */
.resource-bar,
.information-widget-resource .bg-theme-500\/30 {
  background-color: #1e293b !important;
  border-radius: 2px !important;
  height: 4px !important;
}

.resource-bar .bg-theme-500,
.information-widget-resource .bg-theme-500 {
  background-color: #0ea5e9 !important;
  border-radius: 2px !important;
}

/* Weather & Search widgets */
.information-widget-weather,
.information-widget-openmeteo,
.information-widget-search {
  background-color: #1a2238 !important;
  border-radius: 6px !important;
}

input[type="text"],
.search-input {
  border-radius: 4px !important;
  background-color: #0b0f19 !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}

input[type="text"]:focus,
.search-input:focus {
  border-color: #0ea5e9 !important;
  outline: none !important;
}

/* Greeting text - SOLID COLOR */
.greeting-text,
.information-widget-greeting {
  color: #0ea5e9 !important;
  font-weight: 700 !important;
}

.information-widget-datetime {
  color: #94a3b8 !important;
}

/* ─── Category Headers ─── */
.service-group-name {
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  color: #0ea5e9 !important;
  padding-bottom: 0.4rem !important;
  border-bottom: 1px solid #1e293b !important;
  margin-bottom: 0.6rem !important;
}

/* ─── Service Cards ─── */
.service {
  background-color: #12182b !important;
  border-radius: 6px !important;
  border: 1px solid #1e293b !important;
}

/* Instant hover feedback, no transform */
.service:hover {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

.service-title {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: #f8fafc !important;
}

.service-description {
  opacity: 1 !important;
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
}

/* Docker stats on cards - optimized font rendering */
.service-stats {
  font-size: 0.65rem !important;
  color: #0284c7 !important;
  font-family: monospace !important;
  -webkit-font-smoothing: antialiased;
}

/* ─── Status Dot ─── */
.status-dot,
.status-indicator {
  opacity: 1 !important;
  /* NO ANIMATION */
}

/* ─── Bookmark Cards ─── */
.bookmark {
  background-color: #12182b !important;
  border-radius: 6px !important;
  border: 1px solid #1e293b !important;
}

.bookmark:hover {
  background-color: #1e293b !important;
}

.bookmark-group-name {
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  color: #64748b !important;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #0b0f19;
}
::-webkit-scrollbar-thumb {
  background: #334155;
}

/* ─── Hide Footer ─── */
.version {
  display: none !important;
}