/* ============================================================
   havelo — geteilte Modul-Interaktionen
   Toast, entfernbare Zeilen, klickbare Affordanzen.
   Ergänzt household.css (hm-Dialogsystem) auf den Modul-Screens.
   ============================================================ */

/* ---------- Toast ---------- */
.app-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--slate); color: var(--cream); padding: 13px 20px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; z-index: 90;
  display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base); max-width: 90vw;
}
.app-toast.show { opacity: 1; transform: translateX(-50%); }
.app-toast svg { width: 18px; height: 18px; color: var(--sage); flex-shrink: 0; }
.app-toast.warn svg { color: var(--gold); }

/* ---------- Reihen-Animation (hinzufügen/entfernen) ---------- */
.row-in { animation: rowIn 0.32s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.row-out { opacity: 0 !important; transform: translateX(12px) !important; transition: all 0.22s ease !important; }

/* ---------- Einkauf: Zeilen-Aktionen ---------- */
.shop-line { position: relative; }
.shop-line[data-shop] { cursor: pointer; }
.shop-line .sl-del {
  border: none; background: none; cursor: pointer; color: var(--slate-40); padding: 4px; margin-left: 4px;
  border-radius: 6px; display: none; place-items: center; flex-shrink: 0;
}
.shop-line:hover .sl-del { display: grid; }
.shop-line .sl-del:hover { color: var(--ember); background: rgba(200,92,36,0.08); }
.shop-line .sl-del svg { width: 15px; height: 15px; }
.shop-sec.gone, .shop-line.gone { display: none; }
.finish-row { display: flex; gap: 10px; align-items: center; margin-top: 18px; }

/* clickable list affordances */
.txn { cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.txn:hover { background: var(--slate-06); }
.ev { cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.ev:hover { background: var(--slate-06); }
.cell { cursor: pointer; }
.cell:hover { background: var(--slate-06); }
.cell .cev { cursor: pointer; }
.tcard { cursor: pointer; }
.tcard .tc-adv { font-size: 11px; }

/* chips toggling off */
.chip { cursor: pointer; user-select: none; }
.chip.off { opacity: 0.4; }
.seg button { cursor: pointer; }

/* generic mini stepper inside dialogs reuse rd-stepper if present */
.amt-input { font-family: var(--font-mono); }

/* Kalender: Tageskennzeichnung beim Hinzufügen */
.cell.flash { box-shadow: inset 0 0 0 2px var(--mod-kalender); }
.tcard.flash { box-shadow: 0 0 0 2px var(--mod-aufgaben), var(--shadow-md); }

/* Aufgaben-Board */
.col-body { display: flex; flex-direction: column; gap: 12px; min-height: 24px; }
.col-empty { color: var(--slate-40); font-size: 13px; text-align: center; padding: 10px 0; }
.board.as-list { grid-template-columns: 1fr; }
.board.as-list .col-body { gap: 10px; }

/* Einkaufsorte: Laufweg Drag & Drop */
.store-item { cursor: pointer; }
.store-item:focus-visible { outline: 3px solid var(--mod-einkauf); outline-offset: 2px; }
.route-step { cursor: grab; transition: box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); }
.route-step.dragging { opacity: 0.45; cursor: grabbing; }
.route-step.drop-above { box-shadow: 0 -3px 0 -1px var(--mod-einkauf); }
.route-step .rs-del { cursor: pointer; }
.cat-tile { transition: background var(--transition-fast); }