/*
 * Design-Tokens und Komponenten-Styles des App-Launchers.
 * Dokumentation und Anpassungshinweise: DESIGN.md im Projekt-Root.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Hintergrund ("Wallpaper") */
  --bg-base: #f5f5f7;
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --bg-glow-3: transparent;

  /* Text */
  --text-primary: #1c1c1e;
  --text-secondary: rgb(60 60 67 / 0.6);
  --label-color: #1c1c1e;
  --label-shadow: none;

  /* Oberflächen (Header, Dialoge, Filter) */
  --surface: rgb(255 255 255 / 0.72);
  --surface-border: rgb(0 0 0 / 0.08);
  --hover: rgb(0 0 0 / 0.05);
  --active: rgb(0 0 0 / 0.08);

  /* App-Kacheln */
  --icon-size: 60px;
  --icon-radius: 22.5%;             /* macOS-Squircle-Annäherung */
  --tint-default: #8e8e93;          /* Farbe für Apps ohne Gruppe / ohne Gruppenfarbe */
  --fallback-icon-color: #000000;   /* Ersatz-Icon bei Apps ohne Favicon */
  --icon-tint-filter: grayscale(1); /* Favicon vor dem Einfärben entsättigen (monochrom) */
  --icon-tint-blend: multiply;      /* wie das Favicon mit der Gruppenfarbe verrechnet wird */
  --gloss-strength: 0.55;           /* Deckkraft des Glanzlichts (0 = matt) */
  --icon-hover-scale: 1.08;
  --icon-small-scale: 58%;          /* Darstellungsgrösse kleiner Favicons (< 64 px) */

  --tile-width: 88px;               /* Spaltenbreite inkl. Beschriftung */
  --tile-gap-x: 6px;
  --tile-gap-y: 12px;               /* kleiner, da die Beschriftung zwei Zeilen Platz reserviert */

  --label-size: 12px;
  --label-weight: 500;
  --label-line-height: 1.25;
  --label-lines: 2;                 /* maximale Zeilenzahl der Beschriftung */
  --label-gap: 6px;

  /* Oberkategorien (Bereiche) */
  --area-bg: #ffffff;
  --area-border: rgb(0 0 0 / 0.07);
  --area-radius: 24px;
  --area-padding: 24px;
  --area-gap: 28px;               /* vertikaler Abstand zwischen Bereichen */
  --area-title-size: 19px;

  /* Filter-Leiste */
  --sidebar-width: 280px;
  --filter-dot-size: 12px;

  /* Hej-Logo im Header */
  --logo-height: 26px;
  --logo-color: var(--text-primary);

  /* Akzent (Buttons, Fokus) */
  --accent: #0a84ff;
  --accent-hover: #0071e3;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

:root.dark {
  --bg-base: #000000;
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --bg-glow-3: transparent;

  --text-primary: #f5f5f7;
  --text-secondary: rgb(235 235 245 / 0.55);
  --label-color: #ffffff;
  --label-shadow: 0 1px 2px rgb(0 0 0 / 0.6);

  --surface: rgb(28 28 30 / 0.72);
  --surface-border: rgb(255 255 255 / 0.08);
  --area-bg: rgb(44 44 46 / 0.45);
  --area-border: rgb(255 255 255 / 0.07);
  --hover: rgb(255 255 255 / 0.06);
  --active: rgb(255 255 255 / 0.11);
}

/* --------------------------------------------------------------- Grundlage */

body {
  font-family: var(--font);
  color: var(--text-primary);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(60% 50% at 15% 10%, var(--bg-glow-1), transparent 70%),
    radial-gradient(50% 45% at 85% 20%, var(--bg-glow-2), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, var(--bg-glow-3), transparent 70%);
  background-attachment: fixed;
}

.surface {
  background: var(--surface);
  border-color: var(--surface-border);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.text-secondary { color: var(--text-secondary); }

/* Hej-Logo, horizontal zentriert im Header (unabhängig von Titel und Buttons) */
.brand-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  height: var(--logo-height);
  width: auto;
  color: var(--logo-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Hej-App-Icon auf dem Login (gleiche Grafik wie Favicon und PWA-Icon) */
.login-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--icon-radius);
  box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}
/* Feiner Rand, damit das schwarze Icon auf der dunklen Karte sichtbar bleibt */
:root.dark .login-logo { box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 6px 18px rgb(0 0 0 / .5); }

/* button.* erhöht die Spezifität über Tailwinds Preflight-Regel für [type='button'] */
button.btn-accent { background: var(--accent); color: #fff; }
button.btn-accent:hover { background: var(--accent-hover); }

.field {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgb(0 0 0 / 0.12);
  background: rgb(255 255 255 / 0.7);
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
:root.dark .field { border-color: rgb(255 255 255 / 0.12); background: rgb(0 0 0 / 0.25); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(10 132 255 / 0.25); }
.field:disabled { opacity: 0.5; }

/* ----------------------------------------------------------------- Layout */

.areas { display: flex; flex-direction: column; gap: var(--area-gap); }

/* Jede Oberkategorie ist ein eigener, klar abgegrenzter Block */
.area {
  padding: var(--area-padding);
  border: 1px solid var(--area-border);
  border-radius: var(--area-radius);
  background: var(--area-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
}

.area-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--area-border);
}
.area-title { font-size: var(--area-title-size); font-weight: 650; letter-spacing: -0.01em; }
.area-count { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

button.area-add {
  display: none;
  margin-left: auto;
  align-self: center;
  padding: 6px;
  border-radius: 8px;
  color: var(--accent);
}
button.area-add:hover { background: var(--hover); }
body.editing button.area-add { display: inline-flex; }

/* Verschieben der Bereiche (nur im Bearbeiten-Modus) */
.area-move { display: none; align-self: center; align-items: center; gap: 2px; margin-right: 4px; }
body.editing .area-move { display: inline-flex; }
.area-move svg { width: 16px; height: 16px; }
.area-grip { padding: 4px 2px; color: var(--text-secondary); cursor: grab; touch-action: none; }
.area-grip:active { cursor: grabbing; }
.area-move button { padding: 4px; border-radius: 6px; color: var(--text-secondary); }
.area-move button:hover:not(:disabled) { background: var(--hover); color: var(--text-primary); }
.area-move button:disabled { opacity: 0.3; cursor: default; }

.area.dragging { opacity: 0.4; }
/* Während ein Bereich gezogen wird, Inhalte einklappen: kurze Wege, klare Ziele */
.areas.is-sorting .launcher { display: none; }
.areas.is-sorting .area-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.launcher {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ---------------------------------------------------------- Filter-Leiste */

.filter-list {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms;
}
.filter-item:hover { background: var(--hover); }
.filter-item.is-active { background: var(--active); font-weight: 600; }

.filter-btn {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  text-align: left;
  outline: none;
}
.filter-btn:focus-visible { text-decoration: underline; }
.filter-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* Farbpunkt mit kleinem Glanz, passend zu den Icons */
.filter-dot {
  position: relative;
  flex: none;
  width: var(--filter-dot-size);
  height: var(--filter-dot-size);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.65), transparent 55%),
    var(--tint, var(--tint-default));
  box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.25), 0 0 0 0.5px rgb(0 0 0 / 0.15);
}
.filter-dot input {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  opacity: 0;
  cursor: pointer;
  display: none;
}
/* Im Bearbeiten-Modus wird der Punkt zum Farbwähler */
body.editing .filter-dot { box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.25), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--tint, var(--tint-default)); }
body.editing .filter-dot input { display: block; }

/* ------------------------------------------------------------------ Raster */

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-width), 1fr));
  gap: var(--tile-gap-y) var(--tile-gap-x);
}

/* ------------------------------------------------------------------ Kachel */

.app-tile { position: relative; display: flex; justify-content: center; }

.tile-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--label-gap);
  width: var(--tile-width);
  text-decoration: none;
  outline: none;
}

/*
 * Glossy-Icon: Farbverlauf in der Gruppenfarbe (--tint), darüber das Favicon
 * (per Blend-Mode eingefärbt), darüber Glanzlicht (::before) und Kanten (::after).
 */
.tile-icon {
  --tint: var(--tint-default);
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--icon-radius);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tint) 62%, white) 0%,
    var(--tint) 50%,
    color-mix(in srgb, var(--tint) 72%, black) 100%
  );
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.22),
    0 6px 14px color-mix(in srgb, var(--tint) 40%, transparent);
  transition: transform 160ms ease;
}

.tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--icon-tint-filter);
  mix-blend-mode: var(--icon-tint-blend);
}

/* Glanzlicht in der oberen Hälfte */
.tile-icon::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 5%;
  right: 5%;
  top: 2%;
  height: 50%;
  border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
  background: linear-gradient(180deg, rgb(255 255 255 / var(--gloss-strength)), rgb(255 255 255 / 0.04));
  pointer-events: none;
}

/* Lichtkante oben, Schattenkante unten, feiner Rand */
.tile-icon::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -3px 6px rgb(0 0 0 / 0.22),
    inset 0 0 0 0.5px rgb(0 0 0 / 0.18);
  pointer-events: none;
}

/* Kleine Favicons (z. B. 16/32 px .ico) nicht unscharf hochskalieren */
.tile-icon.is-small img {
  width: var(--icon-small-scale);
  height: var(--icon-small-scale);
  object-fit: contain;
}

/* Ersatz-Icon (Lucide), wenn kein Favicon gefunden wurde */
.tile-icon.is-fallback { color: var(--fallback-icon-color); }
.tile-icon.is-fallback svg {
  width: 48%;
  height: 48%;
  stroke-width: 1.9;
  /* helle Kante unten lässt das dunkle Icon leicht eingeprägt wirken */
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.35));
}

.tile-link:hover .tile-icon { transform: scale(var(--icon-hover-scale)); }
.tile-link:active .tile-icon { transform: scale(0.95); }
.tile-link:focus-visible .tile-icon { outline: 3px solid var(--accent); outline-offset: 2px; }

/*
 * Beschriftung: bis zu --label-lines Zeilen, Umbruch an Wortgrenzen; nur Wörter, die allein
 * zu breit sind, werden getrennt. Die feste Höhe hält alle Kacheln einer Rasterzeile bündig.
 */
.tile-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--label-lines);
  line-clamp: var(--label-lines);
  width: 100%;
  height: calc(var(--label-size) * var(--label-line-height) * var(--label-lines));
  overflow: hidden;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-line-height);
  color: var(--label-color);
  text-shadow: var(--label-shadow);
}

/* ------------------------------------------------------- Bearbeiten-Modus */

button.tile-badge {
  position: absolute;
  top: -6px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #1c1c1e;
  background: rgb(229 229 234 / 0.95);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  cursor: pointer;
}
.tile-badge svg { width: 12px; height: 12px; stroke-width: 2.5; }
.tile-badge[data-action='delete'] { left: calc(50% - var(--icon-size) / 2 - 7px); }
.tile-badge[data-action='edit'] { right: calc(50% - var(--icon-size) / 2 - 7px); }
button.tile-badge[data-action='delete']:hover { color: #fff; background: #ff3b30; }
button.tile-badge[data-action='edit']:hover { color: #fff; background: var(--accent); }

body.editing button.tile-badge { display: flex; }
body.editing .app-tile { cursor: grab; }
body.editing .app-tile:active { cursor: grabbing; }
.app-tile.dragging { opacity: 0.35; }

@keyframes wiggle {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}
@media (prefers-reduced-motion: no-preference) {
  body.editing .app-tile:not(.dragging) .tile-icon { animation: wiggle 0.3s ease-in-out infinite; }
  body.editing .app-tile:nth-child(2n) .tile-icon { animation-delay: -0.15s; }
}

/* ----------------------------------------------------------------- Mobil */

@media (max-width: 767px) {
  .area { --area-padding: 16px; }
  .launcher { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* Filter als horizontal scrollbare Chips über dem Raster */
  .filter-list {
    position: static;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--area-padding));
    padding: 0 var(--area-padding) 4px;
    scrollbar-width: none;
  }
  .filter-item { flex: none; border: 1px solid var(--surface-border); border-radius: 999px; }
  .filter-count { display: none; }
}