/* ARQUIVO: /opt/homepage/config/custom.css */

/* 1. IMPORTAR A FONTE ROBOTO */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* 2. DEFINIR A PALETA DE CORES E A FONTE PRINCIPAL */
:root {
  /* Fonte */
  --font-family: 'Roboto', sans-serif;

  /* Cores (Paleta "Zinco" Escura) */
  --page-bg: #18181b;          /* Fundo da página (Zinco 950) */
  --card-bg: #27272a;          /* Fundo dos cards (Zinco 900) */
  --card-border: #3f3f46;      /* Borda dos cards (Zinco 800) */
  --text-primary: #f4f4f5;     /* Texto principal (Zinco 100) */
  --text-secondary: #a1a1aa;    /* Texto secundário/descrições (Zinco 400) */
  --accent-color: #3b82f6;     /* Azul para destaque */
}

body {
  font-family: var(--font-family) !important;
  background-color: var(--page-bg) !important;
  color: var(--text-primary) !important;

  /* Remove qualquer imagem de fundo antiga */
  background-image: none !important;
}

/* 3. CABEÇALHO (CPU, RAM, BUSCA) */
[class*="layout-header"] {
  background-color: var(--page-bg) !important;
  backdrop-filter: none !important; /* Remove o "vidro" */
  border-bottom: 1px solid var(--card-border) !important;
}

/* 4. BARRA DE BUSCA */
[class*="search-input"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
}
[class*="search-input"]::placeholder {
    color: var(--text-secondary) !important;
}

/* 5. TÍTULOS DOS GRUPOS (EX: "SERVIDORES") */
[class*="group-title"] {
    color: var(--text-primary) !important;
    font-weight: 700 !important; /* Negrito */
    font-size: 1.5rem !important;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-color); /* Sublinhado azul */
    display: inline-block;
    margin-bottom: 1rem;

    /* Remove efeitos antigos */
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* 6. CARDS DE SERVIÇO (EMBY, HA, ETC.) */
[class*="service-card"] {
  background-color: var(--card-bg) !important;
  backdrop-filter: none !important; /* Remove o "vidro" */
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important; /* Cantos arredondados */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  transition: all 0.2s ease-out; /* Transição suave */
}

/* 7. TEXTO DOS CARDS */
[class*="service-name"] {
  color: var(--text-primary) !important;
  font-weight: 700 !important; /* Nome do serviço em negrito */
}

[class*="service-description"] {
  color: var(--text-secondary) !important;
  font-weight: 300 !important; /* Descrição com fonte leve */
}

/* 8. EFEITO HOVER (PASSAR O MOUSE) */
[class*="service-card"]:hover {
   transform: translateY(-4px); /* "Eleva" o card */
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
   border-color: var(--accent-color) !important; /* Borda fica azul */
}