/* Catppuccin Mocha theme for Homer */
/* https://github.com/catppuccin/homer */

:root {
  --primary: #cba6f7;
  --secondary: #89b4fa;
  --accent: #f38ba8;
  --warning: #f9e2af;
  --danger: #f38ba8;
  --success: #a6e3a1;
  --info: #89dceb;
  --dark: #1e1e2e;
  --light: #cdd6f4;
  --grey: #6c7086;
  --grey-light: #7f849c;
  --grey-lighter: #9399b2;
  --white: #cdd6f4;
  --black: #1e1e2e;
  --text: #cdd6f4;
  --text-dark: #1e1e2e;
  --text-light: #cdd6f4;
  --background: #1e1e2e;
  --card-background: #313244;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --border: #45475a;
  --border-light: #585b70;
}

/* Global styles */
body {
  background-color: var(--background);
  color: var(--text);
}

/* Header */
.navbar {
  background-color: var(--card-background);
  border-bottom: 1px solid var(--border);
}

.navbar-brand .navbar-item {
  color: var(--text);
}

.navbar-brand .navbar-item:hover {
  color: var(--primary);
}

/* Cards */
.card {
  background-color: var(--card-background);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}

.card-content {
  background-color: var(--card-background);
  color: var(--text);
}

/* Service cards */
.service-card {
  background-color: var(--card-background);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.service-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Groups */
.group-title {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* Tags */
.tag {
  background-color: var(--grey);
  color: var(--text);
}

.tag.is-light {
  background-color: var(--grey-light);
  color: var(--text);
}

/* Message */
.message {
  background-color: var(--card-background);
  border: 1px solid var(--border);
}

.message-header {
  background-color: var(--primary);
  color: var(--text-dark);
}

.message-body {
  background-color: var(--card-background);
  color: var(--text);
  border-color: var(--border);
}

/* Footer */
.footer {
  background-color: var(--card-background);
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Links */
a {
  color: var(--secondary);
}

a:hover {
  color: var(--primary);
}

/* Buttons */
.button {
  background-color: var(--primary);
  color: var(--text-dark);
  border: none;
}

.button:hover {
  background-color: var(--secondary);
}

/* Search */
.search-bar {
  background-color: var(--card-background);
  border: 1px solid var(--border);
  color: var(--text);
}

.search-bar:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.125em rgba(203, 166, 247, 0.25);
}

/* Dark mode toggle */
.navbar-item.is-dark-mode-toggle {
  color: var(--text);
}

.navbar-item.is-dark-mode-toggle:hover {
  color: var(--primary);
}

/* Service status indicators */
.status-indicator.is-online {
  background-color: var(--success);
}

.status-indicator.is-offline {
  background-color: var(--danger);
}

.status-indicator.is-warning {
  background-color: var(--warning);
}