/* ============================================================
   YouTube-style theme for Homepage (gethomepage.dev)

   Just drop this file in your Homepage /config directory as
   `custom.css`. Homepage auto-loads it — no settings.yaml
   reference needed. Pair it with theme: dark + color: neutral.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  --yt-bg:            #0f0f0f;
  --yt-surface:       #212121;
  --yt-surface-hover: #272727;
  --yt-chip:          #272727;
  --yt-chip-hover:    #3f3f3f;
  --yt-border:        #303030;
  --yt-text:          #f1f1f1;
  --yt-text-dim:      #aaaaaa;
  --yt-red:           #ff0000;
  --yt-blue:          #3ea6ff;   /* YouTube focus/link blue */
  --yt-radius:        12px;
}

/* ---------- Global ---------------------------------------- */
html,
body,
#page_wrapper,
#inner_wrapper {
  font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif !important;
  background-color: var(--yt-bg) !important;
  color: var(--yt-text) !important;
}

/* Neutralise any default background image layer */
#background { background: var(--yt-bg) !important; }
#background img { opacity: 0 !important; }

/* ---------- Scrollbar ------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #3f3f3f transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #3f3f3f;
  border-radius: 9999px;
  border: 2px solid var(--yt-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #555; }

/* ---------- Header / greeting bar ------------------------- */
#information-widgets { padding: 1.25rem 1.5rem 0.5rem !important; }

/* Greeting + datetime text -> crisp white */
#information-widgets span,
#information-widgets .text-theme-800,
#information-widgets .text-theme-200,
.service-group-name,
.bookmark-name,
.service-name {
  color: var(--yt-text) !important;
}

/* ---------- Search bar (YouTube pill) --------------------- */
#information-widgets input[type="text"] {
  background-color: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: 9999px !important;
  color: var(--yt-text) !important;
  height: 2.4rem !important;
  padding-left: 1.1rem !important;
  font-size: 0.9rem !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#information-widgets input[type="text"]::placeholder { color: var(--yt-text-dim) !important; }
#information-widgets input[type="text"]:focus {
  outline: none !important;
  background-color: #121212 !important;
  border-color: var(--yt-blue) !important;
  box-shadow: 0 0 0 1px rgba(62, 166, 255, 0.35) !important;
}

/* Resource usage bars -> YouTube red */
#information-widgets .rounded-full > div {
  background-color: var(--yt-red) !important;
  opacity: 1 !important;
}

/* ---------- Tabs -> YouTube filter chips ------------------ */
#myTab { gap: 0.5rem !important; }
#myTab li { border-radius: 9999px !important; }
#myTab button {
  background-color: var(--yt-chip) !important;
  color: var(--yt-text) !important;
  border-radius: 9999px !important;
  padding: 0.35rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  transition: background-color .15s ease, color .15s ease;
}
#myTab button:hover { background-color: var(--yt-chip-hover) !important; }
/* active chip -> inverted (white pill, dark text) like YouTube */
#myTab button[aria-selected="true"] {
  background-color: var(--yt-text) !important;
  color: #0f0f0f !important;
}

/* ---------- Group headings -------------------------------- */
.service-group-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  padding-left: 0.6rem;
  border-left: 3px solid var(--yt-red);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.service-group-icon svg,
.service-group-icon img { opacity: 0.85; }

/* ---------- Service cards (the "thumbnails") -------------- */
.service-card {
  background-color: var(--yt-surface) !important;
  border: 1px solid transparent !important;
  border-radius: var(--yt-radius) !important;
  box-shadow: none !important;
  transition: background-color .15s ease, transform .15s ease,
              border-color .15s ease, box-shadow .15s ease !important;
}
.service-card:hover {
  background-color: var(--yt-surface-hover) !important;
  border-color: var(--yt-border) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/* Icon area styled like a rounded thumbnail */
.service-icon {
  border-radius: 10px !important;
  margin: 0.15rem !important;
}

/* Names + descriptions */
.service-name { font-weight: 500 !important; letter-spacing: -0.005em; }
.service-description,
.bookmark-description { color: var(--yt-text-dim) !important; }

/* Red accent on the live-status / ping tags */
.service-tag { color: var(--yt-text-dim) !important; }
.service-ping .rounded-full { filter: saturate(1.2); }

/* ---------- Bookmarks -> chips ---------------------------- */
.bookmark > a,
.bookmark .bookmark-text {
  background-color: var(--yt-chip) !important;
  border-radius: 9999px !important;
  transition: background-color .15s ease;
}
.bookmark:hover .bookmark-text { background-color: var(--yt-chip-hover) !important; }
.bookmark-icon {
  background-color: transparent !important;
  color: var(--yt-text) !important;
  border-radius: 9999px 0 0 9999px !important;
}
.bookmark-name { font-weight: 500 !important; }

/* ---------- Footer ---------------------------------------- */
#footer a, #version { color: var(--yt-text-dim) !important; }
#footer a:hover { color: var(--yt-text) !important; }

/* Any stray links -> YouTube blue on hover */
a:hover .service-name { color: #fff !important; }