/*!
 * FILE / PFAD: public/assets/ui/css/61-ui-home-app-icons.css
 *
 * PURPOSE / ZWECK:
 * - Gibt den Startseiten-Kacheln ein modernes, farbcodiertes App-Icon-System.
 * - Zeichnet alle bestehenden Inline-SVGs mit weissen, klaren Linien.
 * - Verwendet pro Funktionsbereich einen eigenen, wiedererkennbaren Farbverlauf.
 * - Funktioniert unverändert im hellen und dunklen EverUI-Theme.
 *
 * DOM-VERTRAG:
 * - Karten: .ev-home-card[data-app-icon="<typ>"] .ev-home-card-icon
 * - Hero: .ev-home-status-icon[data-app-icon="restaurant"]
 * - SVG: .ev-home-svg mit bestehenden path-, rect- und circle-Elementen.
 *
 * UNTERSTÜTZTE ICON-TYPEN:
 * - restaurant, dashboard, calendar, tables, pos, orders, menu, builder, qr,
 *   closeout, staff, clock, settings, pickup und login.
 *
 * BEWUSSTE ABGRENZUNG:
 * - Keine Änderung an Routen, Kartentexten, Rollen oder PHP-Fachlogik.
 * - Keine externen Icon-Fonts, Bilder, Bibliotheken oder Netzwerkzugriffe.
 * - Keine Sidebar-, Topbar- oder Mobile-Dock-Icons.
 */

.ev-home-card-icon,
.ev-home-status-icon {
  --ev-app-icon-from: #2563eb;
  --ev-app-icon-to: #06b6d4;
  --ev-app-icon-glow: rgba(37, 99, 235, .28);

  position: relative;
  isolation: isolate;
  display: inline-grid !important;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  flex: 0 0 56px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .38), transparent 32%),
    linear-gradient(145deg, var(--ev-app-icon-from), var(--ev-app-icon-to));
  box-shadow:
    0 12px 26px var(--ev-app-icon-glow),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(15, 23, 42, .14);
  color: #fff !important;
  transform: translateZ(0);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.ev-home-card-icon::after,
.ev-home-status-icon::after {
  position: absolute;
  right: -14px;
  bottom: -18px;
  z-index: -1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  content: "";
}

.ev-home-card-icon .ev-home-svg,
.ev-home-status-icon .ev-home-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
  color: #fff !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .2));
}

.ev-home-card-icon .ev-home-svg *,
.ev-home-status-icon .ev-home-svg * {
  fill: none !important;
  stroke: currentColor !important;
  vector-effect: non-scaling-stroke;
}

.ev-home-card {
  position: relative;
}

.ev-home-card:hover .ev-home-card-icon,
.ev-home-card:focus-visible .ev-home-card-icon {
  box-shadow:
    0 16px 34px var(--ev-app-icon-glow),
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(15, 23, 42, .12);
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-3px) scale(1.045);
}

.ev-home-card[data-app-icon="restaurant"] .ev-home-card-icon,
.ev-home-status-icon[data-app-icon="restaurant"] {
  --ev-app-icon-from: #dc2626;
  --ev-app-icon-to: #f97316;
  --ev-app-icon-glow: rgba(239, 68, 68, .3);
}

.ev-home-card[data-app-icon="dashboard"] .ev-home-card-icon {
  --ev-app-icon-from: #1d4ed8;
  --ev-app-icon-to: #0891b2;
  --ev-app-icon-glow: rgba(37, 99, 235, .3);
}

.ev-home-card[data-app-icon="calendar"] .ev-home-card-icon {
  --ev-app-icon-from: #6d28d9;
  --ev-app-icon-to: #db2777;
  --ev-app-icon-glow: rgba(124, 58, 237, .3);
}

.ev-home-card[data-app-icon="tables"] .ev-home-card-icon {
  --ev-app-icon-from: #0f766e;
  --ev-app-icon-to: #14b8a6;
  --ev-app-icon-glow: rgba(13, 148, 136, .3);
}

.ev-home-card[data-app-icon="pos"] .ev-home-card-icon {
  --ev-app-icon-from: #047857;
  --ev-app-icon-to: #65a30d;
  --ev-app-icon-glow: rgba(5, 150, 105, .3);
}

.ev-home-card[data-app-icon="orders"] .ev-home-card-icon {
  --ev-app-icon-from: #c2410c;
  --ev-app-icon-to: #f59e0b;
  --ev-app-icon-glow: rgba(234, 88, 12, .3);
}

.ev-home-card[data-app-icon="menu"] .ev-home-card-icon {
  --ev-app-icon-from: #be123c;
  --ev-app-icon-to: #f43f5e;
  --ev-app-icon-glow: rgba(225, 29, 72, .3);
}

.ev-home-card[data-app-icon="builder"] .ev-home-card-icon {
  --ev-app-icon-from: #4338ca;
  --ev-app-icon-to: #8b5cf6;
  --ev-app-icon-glow: rgba(79, 70, 229, .3);
}

.ev-home-card[data-app-icon="qr"] .ev-home-card-icon {
  --ev-app-icon-from: #0369a1;
  --ev-app-icon-to: #06b6d4;
  --ev-app-icon-glow: rgba(8, 145, 178, .3);
}

.ev-home-card[data-app-icon="closeout"] .ev-home-card-icon {
  --ev-app-icon-from: #b45309;
  --ev-app-icon-to: #f59e0b;
  --ev-app-icon-glow: rgba(217, 119, 6, .3);
}

.ev-home-card[data-app-icon="staff"] .ev-home-card-icon {
  --ev-app-icon-from: #0369a1;
  --ev-app-icon-to: #6366f1;
  --ev-app-icon-glow: rgba(2, 132, 199, .3);
}

.ev-home-card[data-app-icon="clock"] .ev-home-card-icon {
  --ev-app-icon-from: #0f766e;
  --ev-app-icon-to: #22c55e;
  --ev-app-icon-glow: rgba(13, 148, 136, .3);
}

.ev-home-card[data-app-icon="settings"] .ev-home-card-icon {
  --ev-app-icon-from: #475569;
  --ev-app-icon-to: #7c3aed;
  --ev-app-icon-glow: rgba(100, 116, 139, .3);
}

.ev-home-card[data-app-icon="pickup"] .ev-home-card-icon {
  --ev-app-icon-from: #7e22ce;
  --ev-app-icon-to: #ec4899;
  --ev-app-icon-glow: rgba(147, 51, 234, .3);
}

.ev-home-card[data-app-icon="login"] .ev-home-card-icon {
  --ev-app-icon-from: #1d4ed8;
  --ev-app-icon-to: #4f46e5;
  --ev-app-icon-glow: rgba(37, 99, 235, .3);
}

@media (max-width: 640px) {
  .ev-home-card-icon,
  .ev-home-status-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    flex-basis: 50px;
    border-radius: 16px;
  }

  .ev-home-card-icon .ev-home-svg,
  .ev-home-status-icon .ev-home-svg {
    width: 25px;
    height: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-home-card-icon,
  .ev-home-status-icon {
    transition: none;
  }

  .ev-home-card:hover .ev-home-card-icon,
  .ev-home-card:focus-visible .ev-home-card-icon {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .ev-home-card-icon,
  .ev-home-status-icon {
    border-color: #fff;
  }
}

/*
 * EVERUI_HOME_APP_ICON_LAYOUT_FIX_V1_0_1
 *
 * PURPOSE / ZWECK:
 * - Das bestehende Dashboard-CSS reserviert 46px für das frühere Icon.
 * - Die moderne App-Fläche benötigt auf Desktop 56px und auf Mobile 50px.
 * - Icon und Text erhalten deshalb zwei garantiert getrennte Grid-Spalten.
 *
 * KASKADEN-VERTRAG:
 * - Diese Regeln stehen bewusst am Dateiende und besitzen eine höhere
 *   Spezifität als 30-ui-dashboard-switcher.css.
 */

.ev-home .ev-home-card {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
}

.ev-home .ev-home-card-icon {
  z-index: 1;
  grid-column: 1;
  align-self: start;
}

.ev-home .ev-home-card-copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  max-width: 100%;
  grid-column: 2;
  align-content: start;
  gap: 6px;
  padding-top: 2px;
}

.ev-home .ev-home-card-copy > strong,
.ev-home .ev-home-card-copy > small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ev-home .ev-home-status > .ev-home-status-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .38), transparent 32%),
    linear-gradient(145deg, var(--ev-app-icon-from), var(--ev-app-icon-to));
}

@media (max-width: 640px) {
  .ev-home .ev-home-card {
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 12px;
  }

  .ev-home .ev-home-status > .ev-home-status-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 16px;
  }
}