/* LCARS Theme for Homepage Dashboard
 * Color Palette based on Star Trek LCARS interface
 * Primary: Orange (#FF9900), Purple (#CC99CC), Blue (#9999FF)
 * Accent: Beige (#FFCC99), Pink (#CC6699), Cyan (#99CCFF)
 */

:root {
  /* LCARS Color Variables */
  --lcars-orange: #FF9900;
  --lcars-light-orange: #FFCC99;
  --lcars-purple: #CC99CC;
  --lcars-blue: #9999FF;
  --lcars-cyan: #99CCFF;
  --lcars-pink: #CC6699;
  --lcars-tan: #FFCC66;
  --lcars-red: #CC6666;
  --lcars-background: #000000;
  --lcars-text: #FF9900;
  --lcars-text-light: #FFCC99;
}

/* Global Background */
body {
  background-color: var(--lcars-background) !important;
  font-family: 'Helvetica Neue', 'Arial', sans-serif !important;
}

/* Main container styling */
#page_container {
  background-color: var(--lcars-background) !important;
}

/* Service cards - LCARS panel style */
.service {
  background: linear-gradient(135deg, rgba(255, 153, 0, 0.15) 0%, rgba(153, 153, 255, 0.1) 100%) !important;
  border: 2px solid var(--lcars-orange) !important;
  border-radius: 15px 5px 15px 5px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.service::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 8px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--lcars-orange) 0%, var(--lcars-purple) 50%, var(--lcars-blue) 100%) !important;
  border-radius: 15px 0 0 5px !important;
}

.service:hover {
  border-color: var(--lcars-light-orange) !important;
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.4), inset 0 0 30px rgba(255, 153, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* Service text styling */
.service-title {
  color: var(--lcars-orange) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.service-description {
  color: var(--lcars-light-orange) !important;
  opacity: 0.85 !important;
}

/* Section headers - LCARS bar style */
.services-group h2,
.bookmark-group h2 {
  color: var(--lcars-background) !important;
  background: linear-gradient(90deg, var(--lcars-purple) 0%, var(--lcars-purple) 12px, var(--lcars-orange) 12px, var(--lcars-tan) 100%) !important;
  padding: 8px 25px 8px 22px !important;
  border-radius: 0 25px 25px 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Category icons in headers - ensure visibility */
.services-group h2 > span:first-child,
.bookmark-group h2 > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.services-group h2 img,
.services-group h2 svg,
.bookmark-group h2 img,
.bookmark-group h2 svg {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.9 !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  order: -1 !important;
}

/* Header text span */
.services-group h2 > span:last-child,
.bookmark-group h2 > span:last-child {
  order: 1 !important;
}

/* Widgets styling */
.widget {
  background: linear-gradient(135deg, rgba(153, 153, 255, 0.15) 0%, rgba(204, 153, 204, 0.1) 100%) !important;
  border: 2px solid var(--lcars-blue) !important;
  border-radius: 5px 15px 5px 15px !important;
  color: var(--lcars-cyan) !important;
}

.widget:hover {
  border-color: var(--lcars-cyan) !important;
  box-shadow: 0 0 15px rgba(153, 153, 255, 0.3) !important;
}

/* DateTime widget */
.widget .text-4xl,
.widget .text-3xl,
.widget .text-2xl {
  color: var(--lcars-orange) !important;
  font-weight: 300 !important;
}

/* Weather widget text */
.widget .text-sm,
.widget .text-xs {
  color: var(--lcars-light-orange) !important;
}

/* Kubernetes widget styling */
.widget [class*="kubernetes"] {
  color: var(--lcars-cyan) !important;
}

/* Bookmarks styling */
.bookmark {
  background: linear-gradient(135deg, rgba(204, 153, 204, 0.15) 0%, rgba(255, 153, 0, 0.1) 100%) !important;
  border: 2px solid var(--lcars-purple) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

.bookmark:hover {
  border-color: var(--lcars-pink) !important;
  box-shadow: 0 0 15px rgba(204, 153, 204, 0.4) !important;
}

.bookmark a {
  color: var(--lcars-purple) !important;
}

.bookmark:hover a {
  color: var(--lcars-pink) !important;
}

/* Search bar LCARS style */
.search-input,
input[type="text"] {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 2px solid var(--lcars-orange) !important;
  border-radius: 20px !important;
  color: var(--lcars-orange) !important;
  caret-color: var(--lcars-orange) !important;
}

.search-input:focus,
input[type="text"]:focus {
  border-color: var(--lcars-light-orange) !important;
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.3) !important;
  outline: none !important;
}

.search-input::placeholder {
  color: rgba(255, 153, 0, 0.5) !important;
}

/* Status indicators */
.status-dot {
  box-shadow: 0 0 8px currentColor !important;
}

/* Scrollbar LCARS style */
::-webkit-scrollbar {
  width: 12px !important;
  background: var(--lcars-background) !important;
}

::-webkit-scrollbar-track {
  background: rgba(255, 153, 0, 0.1) !important;
  border-radius: 6px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--lcars-orange) 0%, var(--lcars-purple) 100%) !important;
  border-radius: 6px !important;
  border: 2px solid var(--lcars-background) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--lcars-light-orange) 0%, var(--lcars-pink) 100%) !important;
}

/* Links */
a {
  color: var(--lcars-orange) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--lcars-light-orange) !important;
}

/* Footer/Version styling */
footer,
.version {
  color: var(--lcars-purple) !important;
  opacity: 0.7 !important;
}

/* LCARS corner decorations for main sections */
.services-group,
.bookmark-group {
  position: relative !important;
  padding-left: 15px !important;
  margin-bottom: 25px !important;
}

.services-group::before,
.bookmark-group::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 40px !important;
  width: 5px !important;
  height: calc(100% - 50px) !important;
  background: linear-gradient(180deg, var(--lcars-orange) 0%, var(--lcars-purple) 50%, var(--lcars-blue) 100%) !important;
  border-radius: 0 0 3px 3px !important;
}

/* Pulse animation for active elements */
@keyframes lcars-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.status-dot.online {
  animation: lcars-pulse 2s ease-in-out infinite !important;
}

/* Icon styling */
.service-icon img,
.service-icon svg {
  filter: drop-shadow(0 0 3px var(--lcars-orange)) !important;
}

/* Card containers */
.card {
  background: transparent !important;
}

/* Ensure dark backgrounds for transparent elements */
.bg-theme-100,
.bg-theme-200,
.bg-theme-300 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Text colors override */
.text-theme-100,
.text-theme-200 {
  color: var(--lcars-light-orange) !important;
}

.text-theme-700,
.text-theme-800,
.text-theme-900 {
  color: var(--lcars-orange) !important;
}

/* LCARS decorative header bar */
#page_wrapper::before {
  content: '' !important;
  display: block !important;
  height: 30px !important;
  background: linear-gradient(90deg,
    var(--lcars-purple) 0%,
    var(--lcars-purple) 5%,
    transparent 5%,
    transparent 6%,
    var(--lcars-orange) 6%,
    var(--lcars-orange) 40%,
    transparent 40%,
    transparent 41%,
    var(--lcars-blue) 41%,
    var(--lcars-blue) 60%,
    transparent 60%,
    transparent 61%,
    var(--lcars-tan) 61%,
    var(--lcars-tan) 80%,
    transparent 80%,
    transparent 81%,
    var(--lcars-purple) 81%,
    var(--lcars-purple) 100%
  ) !important;
  border-radius: 0 0 15px 15px !important;
  margin-bottom: 20px !important;
}

/* Title styling */
h1, .title {
  color: var(--lcars-orange) !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-weight: 300 !important;
}