/* user/theme.css — donker thema voor ZeroDash */

:root { color-scheme: dark; }

/* Body-achtergrond (style.css: #f5f5f5) */
body {
  background-color: #0f1115 !important;
  color: #e6e6e6;
}

/* Tiles (style.css: white + lichte schaduw) */
.tile {
  background-color: #1a1d23 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  color: #e6e6e6;
}
.tile:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55) !important;
}

/* Labels in tiles (style.css zet font-size/nowrap, kleur erven we) */
.tile span,
.tile div {
  color: #e6e6e6;
}

/* Unreachable state: donker-vriendelijker grijs */
.tile.unreachable div {
  color: #6b7280 !important;
}

/* ── Search overlay ────────────────────────────────────────── */

.search-overlay {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

.search-container {
  background-color: #1a1d23 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.search-input {
  background-color: #12141a !important;
  color: #e6e6e6 !important;
  border-bottom-color: #2a2f3a !important;
}
.search-input::placeholder {
  color: #6b7280 !important;
}
.search-input:focus {
  border-bottom-color: #4b5563 !important;
}

.search-result {
  background-color: #1a1d23 !important;
  border-bottom-color: #2a2f3a !important;
  color: #e6e6e6;
}
.search-result:hover {
  background-color: #22262f !important;
}
.search-result.selected {
  background-color: #2a2f3a !important;
}

.tile.unreachable {
  opacity: 1 !important;
}
.tile.unreachable img {
  filter: none !important;
  opacity: 1 !important;
}
.tile.unreachable div {
  color: #e6e6e6 !important;
}

/* ── Extra styling ─────────────────────────────────────────── */

/* Warme, iets minder vlakke achtergrond */
body {
  background: radial-gradient(circle at 50% 0%, #161a22 0%, #0d0f14 70%) !important;
}

/* Iets meer ademruimte tussen tiles */
#dashboard {
  gap: 14px !important;
  padding: 16px !important;
}

/* Tiles: subtieler, moderner, lichtere hover */
.tile {
  background-color: #171b22 !important;
  border: 1px solid #232833 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}
.tile:hover {
  background-color: #1e232c !important;
  border-color: #3a4250 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Iconen iets groter en met een zachte drop-shadow voor diepte */
.tile img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s ease;
}
.tile:hover img {
  transform: scale(1.05);
}

/* Labels: kleiner, grijzer, strakker */
.tile div,
.tile span {
  color: #c7ccd6 !important;
  font-size: 0.9em !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Focus-ring voor toetsenbordnavigatie (ZeroDash is keyboard-first) */
.tile:focus-visible {
  outline: 2px solid #5b8def;
  outline-offset: 2px;
}

/* ── Categorie-accent: bovenste twee rijen = "daily drivers" ── */

/* Rij 1 (eerste 6 tiles in je 6-koloms grid) → subtiel accent */
#dashboard > .tile:nth-child(-n+6) {
  background-color: #1b2129 !important;
  border-color: #2c3644 !important;
}
#dashboard > .tile:nth-child(-n+6):hover {
  background-color: #222a34 !important;
  border-color: #3f4d61 !important;
}

/* Rij 2 (tiles 7-12) → tikje lichter dan de rest, maar minder dan rij 1 */
#dashboard > .tile:nth-child(n+7):nth-child(-n+12) {
  background-color: #191d24 !important;
  border-color: #262c37 !important;
}

/* Rij 3+ → neutraal (de base-stijl uit het eerdere blok) */