/* ============================================================
   Ares dashboard — theme switcher styling + accent pops.
   The palette itself is driven by custom.js (--color-50..900);
   here we (a) style the top-nav theme dropdown and (b) sprinkle
   the per-theme --accent around so the layout isn't monochrome.
   ============================================================ */

:root { --accent: 56 189 248; } /* fallback until custom.js applies a theme */

/* ---- accent pops to break up the single-colour look ---- */

/* Section group headings */
#myitems h2,
#information-widgets h2,
.services-group h2,
main h2 {
  color: rgb(var(--accent)) !important;
  letter-spacing: .02em;
}

/* The header underline below the title row */
[class*="border-b-2"] {
  border-bottom-color: rgb(var(--accent) / 0.55) !important;
}

/* Search box focus + bottom border */
input[class*="border-b"]:focus { border-color: rgb(var(--accent)) !important; }

/* Service card: a quiet accent edge that warms on hover */
.service .service-card,
li[class*="service"] > div {
  border-left: 2px solid rgb(var(--accent) / 0.18);
  transition: border-color .15s ease, background-color .15s ease;
}
.service .service-card:hover,
li[class*="service"] > div:hover {
  border-left-color: rgb(var(--accent)) !important;
}

/* ---- the top-nav theme dropdown ---- */

#ares-th-root {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-right: 10px;
  padding-right: 10px;
  color: rgb(var(--accent));
}

#ares-th-root .ares-th-ico {
  flex: 0 0 auto;
  opacity: .9;
}

#ares-th-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: rgb(var(--color-200));
  background-color: rgb(var(--color-800) / 0.6);
  border: 1px solid rgb(var(--accent) / 0.45);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  /* caret */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .15s ease, background-color .15s ease;
}
#ares-th-select:hover {
  background-color: rgb(var(--color-800) / 0.85);
  border-color: rgb(var(--accent));
}
#ares-th-select:focus {
  outline: none;
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.25);
}
/* native dropdown list — keep options readable on every theme */
#ares-th-select option {
  color: #111;
  background: #fff;
}

/* Light themes: darker text, lighter chip */
html:not(.dark) #ares-th-select {
  color: rgb(var(--color-800));
  background-color: rgb(var(--color-100));
}