/* ============================================================
   Homer Dashboard Styling (Forced Light Mode)
   Matching https://homer-demo.netlify.app/
   Applied identically across all management hubs
   ============================================================ */

/* --- Force Global Light Mode Background & Canvas --- */
:root {
  color-scheme: light !important;
}

html,
body,
html.dark,
body.dark,
.dark body,
div#__next {
  background-color: #f8fafc !important; /* Tailwind slate-50 light canvas */
  color: #0f172a !important;
}

/* Ensure main content container has clean light background */
main,
.container,
div[class*="min-h-screen"] {
  background-color: transparent !important;
  color: #0f172a !important;
}

/* --- Section Spacing & Headers --- */
.services-group {
  margin-bottom: 2.75rem !important;
}

.services-group button.group,
.dark .services-group button.group,
:is(.dark) .services-group button.group,
:is(.dark *) .services-group button.group {
  padding-bottom: 0.6rem !important;
  margin-bottom: 1.25rem !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  background-color: transparent !important;
}

.service-group-name,
.dark .service-group-name,
:is(.dark) .service-group-name,
:is(.dark *) .service-group-name {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #0f172a !important;
}

.service-group-icon {
  width: 1.75rem !important;
  height: 1.75rem !important;
  margin-right: 0.6rem !important;
}

/* --- Services Grid Gap --- */
.services-list {
  gap: 1.25rem 1.25rem !important;
}

/* --- Service Card (Homer Bulma Style - Always Crisp White) --- */
.service-card,
.dark .service-card,
:is(.dark) .service-card,
:is(.dark *) .service-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important; /* 12px rounded corners */
  padding: 1.1rem 1.25rem !important;
  min-height: 5.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Hover State - Smooth lift & elevation like Homer */
.service-card:hover,
.dark .service-card:hover,
:is(.dark) .service-card:hover,
:is(.dark *) .service-card:hover {
  transform: translateY(-3px) !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important;
  border-color: #cbd5e1 !important;
}

/* --- Card Title Container & Layout --- */
.service-title {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* --- App Icon (Homer is-48x48 style) --- */
.service-icon {
  width: 3rem !important;       /* 48px */
  min-width: 3rem !important;
  height: 3rem !important;
  margin-right: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.service-icon img,
.service-icon svg {
  width: 3rem !important;
  height: 3rem !important;
  max-width: 3rem !important;
  max-height: 3rem !important;
  object-fit: contain !important;
  border-radius: 0.5rem !important;
}

/* --- Typography (Always Light Mode Dark Text) --- */
.service-title-text {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 1 0% !important;
}

.service-name,
.dark .service-name,
:is(.dark) .service-name,
:is(.dark *) .service-name {
  padding: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
}

.service-description,
.dark .service-description,
:is(.dark) .service-description,
:is(.dark *) .service-description {
  margin-top: 0.25rem !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #64748b !important;
}

/* --- Status / Ping Indicators --- */
.service-tag,
.service-ping {
  margin-left: 0.75rem !important;
  flex-shrink: 0 !important;
}

/* --- Top Information Widgets & Search (Light Mode) --- */
#information-widgets,
.information-widget-item,
.dark #information-widgets,
.dark .information-widget-item,
:is(.dark *) #information-widgets,
:is(.dark *) .information-widget-item {
  color: #1e293b !important;
}

.information-widget-search input,
.dark .information-widget-search input {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Theme / Controls at Bottom */
footer,
.footer,
div[class*="fixed bottom-"] {
  color: #64748b !important;
}