/* TettoFarr Custom Theme for Homepage Dashboard */

/* Catppuccin Mocha & Mastodon Colors */
:root {
  --mocha-pink: #f5c2e7;
  --mocha-mauve: #cba6f7;
  --mocha-lavender: #b4befe;
  --mastodon-panel: #313543;
  --mastodon-bg: #191b22;
  --grey-blue-1: #45475a;
  --grey-blue-2: #313244;
}

/* Fix background to cover entire page properly */
html, body {
  min-height: 100vh !important;
}

/* Background image - fixed position covers viewport */
div[style*="background-image"] {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -2 !important;
}

/* Grey overlay should grow with content, not be fixed */
div[class*="backdrop"],
div[class*="bg-gray"],
div[class*="bg-slate"] {
  min-height: 100% !important;
  height: auto !important;
}

/* Main content containers should grow naturally with content */
#app, main {
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Category Headers - Pink border with grey-blue gradient */
h2 {
  background: linear-gradient(135deg, var(--grey-blue-1), var(--grey-blue-2)) !important;
  border: 2px solid var(--mocha-pink) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(245, 194, 231, 0.2) !important;
  color: var(--mocha-lavender) !important;
}

/* Toggle switches - make them compact */
button[type="button"]:has(span),
button:has(div[class*="bg-"]) {
  max-width: 48px !important;
  height: 24px !important;
  padding: 2px !important;
}

/* Collapse/expand buttons specifically */
button[title*="ollapse"],
button[aria-label*="ollapse"] {
  width: auto !important;
  padding: 4px 8px !important;
  background: var(--grey-blue-2) !important;
  border: 1px solid var(--mocha-pink) !important;
  border-radius: 4px !important;
}

/* Service cards */
a[href*="http"] > div {
  background: var(--mastodon-panel) !important;
  border: 1px solid var(--grey-blue-1) !important;
  transition: all 0.3s ease !important;
}

a[href*="http"] > div:hover {
  border-color: var(--mocha-mauve) !important;
  box-shadow: 0 4px 12px rgba(203, 166, 247, 0.2) !important;
}

/* Widgets */
.widget,
[class*="backdrop"] > div {
  background: rgba(49, 53, 67, 0.9) !important;
  border: 1px solid var(--grey-blue-1) !important;
  border-radius: 8px !important;
}

/* Links */
a {
  color: var(--mocha-lavender) !important;
}

a:hover {
  color: var(--mocha-mauve) !important;
}

/* Status dots */
[class*="bg-green"] {
  background-color: #a6e3a1 !important;
}

[class*="bg-red"] {
  background-color: #f38ba8 !important;
}

[class*="bg-yellow"] {
  background-color: #f9e2af !important;
}