// J3 UI-Redesign — Widgets: Stat, Modul-Tiles, Listen, Agenda, Karten, Controls, Stream
// Autor: Jarvis-3 (J3) · 2026-09-05 · v0.1.0
@use 'abstracts' as *;

// ── Grid ──────────────────────────────────────────────────────────────
.widget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);

  .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; }
  .span-12 { grid-column: span 12; }

  @include bp-down(xl) {
    .span-2, .span-3 { grid-column: span 4; }
    .span-4, .span-5 { grid-column: span 6; }
    .span-6, .span-7, .span-8, .span-9 { grid-column: span 12; }
  }
  @include bp-down(md) {
    grid-template-columns: 1fr;
    [class*="span-"] { grid-column: span 1; }
  }
}

// ── Stat-Kachel ───────────────────────────────────────────────────────
.stat {
  @include card(var(--s-3));
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;

  .stat-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
  .stat-value {
    font-family: var(--font-head);
    font-size: 21px;
    letter-spacing: -.01em;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: var(--s-1);
    .stat-unit { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; font-family: var(--font-mono); }
  }
  .stat-delta { font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--s-1); }
  .stat-spark {
    position: absolute; right: var(--s-3); bottom: var(--s-3);
    width: 64px; height: 22px; opacity: .75;
    polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; }
  }
}

// ── Modul-Tile (Service-Karte mit Status) ─────────────────────────────
.tile {
  @include card(var(--s-3));
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

  &:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-2); }

  .tile-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
  .tile-icon {
    width: 25px; height: 25px; border-radius: var(--r-md);
    background: var(--bg-inset); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--text-2); flex: 0 0 auto;
    svg { width: 13px; height: 13px; }
  }
  .tile-name { font-weight: 600; font-size: var(--fs-sm); @include truncate; }
  .tile-body { font-size: var(--fs-xs); color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
  .tile-row { display: flex; justify-content: space-between; gap: var(--s-2); .v { color: var(--text); font-variant-numeric: tabular-nums; } }
}

// ── Listen-Widget ─────────────────────────────────────────────────────
.row-list { display: flex; flex-direction: column; }
.row-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  &:last-child { border-bottom: 0; }

  .row-main { flex: 1; min-width: 0; }
  .row-label { @include truncate; }
  .row-sub { font-size: var(--fs-xs); color: var(--text-3); @include truncate; }
  &.muted .row-label { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
}

.check-btn {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  flex: 0 0 auto;
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--dur-fast) var(--ease);
  svg { width: 11px; height: 11px; }

  &:hover { border-color: var(--primary); }
  &.done {
    background: var(--primary); border-color: var(--primary); color: var(--primary-ink);
  }
}

.add-row {
  display: flex; gap: var(--s-2); margin-top: var(--s-2);
  .input { height: 25px; font-size: var(--fs-xs); }
  .btn { height: 25px; }
}

// ── Agenda / Kalender-Widget ──────────────────────────────────────────
.agenda-day { margin-top: var(--s-3); &:first-child { margin-top: 0; } }
.agenda-day-head {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--s-1);
  .today { color: var(--primary-text); font-weight: 700; }
}
.agenda-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 4px 0;
  font-size: var(--fs-sm);

  .agenda-time { width: 40px; flex: 0 0 auto; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
  .agenda-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--info); flex: 0 0 auto; }
  .agenda-body { flex: 1; min-width: 0; .t { @include truncate; } }
  &.type-frist .agenda-bar { background: var(--warn); }
  &.type-wartung .agenda-bar { background: var(--offline); }
  &.type-geburtstag .agenda-bar { background: var(--accent); }
}

// ── Karten-Widget (JMaps-Dummy) ───────────────────────────────────────
.map-widget {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--info) 7%, transparent), transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 34px, var(--line) 34px, var(--line) 35px),
    repeating-linear-gradient(90deg, transparent, transparent 34px, var(--line) 34px, var(--line) 35px),
    var(--bg-inset);
  height: 176px;

  .map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex; flex-direction: column; align-items: center;
    color: var(--primary-text);
    svg { width: 18px; height: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
    .pin-label { font-size: 9.5px; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 1px 5px; margin-top: 2px; white-space: nowrap; }
  }
  .map-zoom { position: absolute; right: var(--s-2); bottom: var(--s-2); display: flex; flex-direction: column; gap: 1px; }
}

// ── Controls (Smart Home / Drohne / Geräte) ───────────────────────────
.control-tile {
  @include card(var(--s-3));
  display: flex; flex-direction: column; gap: var(--s-2);

  .control-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .control-name { font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  .control-state { font-size: var(--fs-xs); color: var(--text-3); }

  .control-value {
    font-family: var(--font-head);
    font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    .unit { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; font-family: var(--font-mono); margin-left: 4px; }
  }
  .control-value.big { font-size: 32px; text-align: center; }
}

// Thermostat-Dial (CSS-Gauge)
.dial {
  --pct: 50;   // 0..100
  --dial-color: var(--primary);
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto;
  background:
    radial-gradient(closest-side, var(--bg-1) 79%, transparent 80% 100%),
    conic-gradient(var(--dial-color) calc(var(--pct) * 1%), var(--bg-3) 0);
  display: grid; place-items: center;
  position: relative;

  .dial-value { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .dial-sub { position: absolute; bottom: 17px; font-size: 9px; color: var(--text-3); }
}

.segmented {
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;

  .seg {
    height: 22px; padding: 0 var(--s-2);
    border-radius: calc(var(--r-md) - 2px);
    font-size: var(--fs-xs); color: var(--text-2);
    display: inline-flex; align-items: center; gap: var(--s-1);
    transition: all var(--dur-fast) var(--ease);
    &.active { background: var(--bg-3); color: var(--text); font-weight: 600; }
    &:hover:not(.active) { color: var(--text); }
  }
}

// Drohne/Flotten-Status
.drone-silhouette {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  svg { width: 100%; max-width: 96px; height: auto; }
}

// ── Event-Rail (rechts, L0/L1) ────────────────────────────────────────
.stream {
  grid-area: stream;
  width: var(--stream-w);
  border-left: 1px solid var(--line);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;

  .stream-hidden & { width: 0; border: 0; }
  @include bp-down(lg) { display: none; }   // <1024: Toast/Statusbar übernehmen
}

.stream-head {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
  h2 { font-size: var(--fs-lg); }
}

.stream-body { flex: 1; overflow-y: auto; padding: var(--s-1) var(--s-2); min-height: 0; }

.event {
  display: flex;
  gap: var(--s-2);
  padding: 5px var(--s-1);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  animation: fade-in var(--dur) var(--ease);

  .event-marker {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 5px; flex: 0 0 auto;
    background: var(--offline);
  }
  .event-main { flex: 1; min-width: 0; }
  .event-text { color: var(--text); overflow-wrap: anywhere; }
  .event-meta { color: var(--text-3); margin-top: 1px; display: flex; gap: var(--s-2); font-variant-numeric: tabular-nums; }

  &.ev-ok .event-marker { background: var(--event-heartbeat); }
  &.ev-info .event-marker { background: var(--event-register); }
  &.ev-warn .event-marker { background: var(--event-tool); }
  &.ev-error .event-marker { background: var(--event-error); }
  &.ev-run .event-marker { background: var(--event-run); }
  &.ev-data .event-marker { background: var(--event-data); }
}

.stream-empty {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-xs);
}