/* Ekran 05 — Gruplar ve sahneler · Ekran 06 — Grup düzenleme */
.groups-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.scene-card { min-height: var(--size-148); }
.scene-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.scene-card__body { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.scene-card__run { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--text-3); }
.scene-card__run .icon { width: var(--size-14); height: var(--size-14); }
.scene-card:hover .scene-card__run { color: var(--primary); }
.scene-card.is-running .scene-card__run, .scene-card.is-done .scene-card__run { color: var(--primary-soft-text); }
.scene-card.is-done { border-color: var(--success); }
.scene-card.is-done .scene-card__run { color: var(--success-text); }
.scene-card.is-home::after { content: ''; position: absolute; left: var(--sp-4); bottom: 0; width: var(--size-24); height: var(--size-2); background: var(--primary); border-radius: 1px 1px 0 0; }
.scene-progress { position: absolute; left: 0; right: 0; bottom: 0; height: var(--size-3); background: var(--track); border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.scene-progress__fill { height: 100%; width: var(--pct, 0%); background: var(--primary); transition: width var(--dur-slow) var(--ease); }
.scene-card.is-done .scene-progress__fill { background: var(--success); }
.scene-card__menu { z-index: 1; }
.scene-card__menu-pop { top: calc(var(--sp-2) + var(--control-h)); right: var(--sp-2); }
.scene-card__menu-pop .menu__item { height: var(--tap); }

/* Grup düzenleme */
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); max-width: var(--editor-max); width: 100%; margin: 0 auto; }
.editor__header { display: flex; align-items: center; gap: var(--sp-3); }
.editor__title-input { flex: 1; height: var(--control-h-lg); padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); background: transparent; font-size: var(--text-h1); font-weight: var(--w-semibold); color: var(--text); letter-spacing: -.2px; min-width: 0; }
.editor__title-input:hover { border-color: var(--border); background: var(--surface); }
.editor__title-input:focus { border-color: var(--primary); background: var(--surface); outline: none; box-shadow: var(--focus-ring); }
.editor__identity { display: flex; gap: var(--sp-4); align-items: flex-start; }
.editor__preview { display: grid; place-items: center; width: var(--size-72); height: var(--size-72); border-radius: var(--r-lg); flex: none; }
.editor__preview .icon { width: var(--control-h-sm); height: var(--control-h-sm); }
.editor__pickers { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-width: 0; }
.icon-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.icon-picker__opt { display: grid; place-items: center; width: var(--size-40); height: var(--size-40); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.icon-picker__opt:hover { background: var(--surface-hover); }
.icon-picker__opt.is-active { border-color: var(--primary); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.color-picker { display: flex; gap: var(--sp-2); }
.color-picker__opt { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; color: var(--on-accent); }
.color-picker__opt .icon { width: var(--size-14); height: var(--size-14); stroke-width: 3; opacity: 0; }
.color-picker__opt.is-active { border-color: var(--text); }
.color-picker__opt.is-active .icon { opacity: 1; }
.color-picker__opt--green { background: var(--scene-green); } .color-picker__opt--purple { background: var(--scene-purple); }
.color-picker__opt--blue { background: var(--scene-blue); } .color-picker__opt--orange { background: var(--scene-orange); } .color-picker__opt--red { background: var(--scene-red); }
.editor__preview--green { background: var(--scene-green-bg); color: var(--scene-green); } .editor__preview--purple { background: var(--scene-purple-bg); color: var(--scene-purple); }
.editor__preview--blue { background: var(--scene-blue-bg); color: var(--scene-blue); } .editor__preview--orange { background: var(--scene-orange-bg); color: var(--scene-orange); } .editor__preview--red { background: var(--scene-red-bg); color: var(--scene-red); }

.editor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.editor-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.editor-card__title { font-size: var(--text-body); font-weight: var(--w-semibold); }
.editor-card__hint { font-size: var(--text-xs); color: var(--text-3); }
.editor-card .step-list { padding: 0 var(--sp-3) 0 var(--sp-2); }
.editor-card .step-row { cursor: pointer; }
.editor-card .step-row:hover { background: var(--surface-hover); }
.step-row__delete { color: var(--text-3); }
.step-row__delete:hover { color: var(--danger); background: var(--danger-bg); }
.step-row.is-swiped { transform: translateX(calc(-1 * var(--swipe-action-w))); }
.step-row.is-dragging { opacity: .5; }
.step-row.is-drop-target { box-shadow: inset 0 2px 0 var(--primary); }
.editor-card__add { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; height: var(--size-52); color: var(--primary); font-size: var(--text-sm); font-weight: var(--w-semibold); border-top: 1px solid var(--border); }
.editor-card__add:hover { background: var(--primary-soft); }
.editor__footer { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.editor__footer .btn--danger-ghost { color: var(--danger-text); margin-right: auto; }
.editor__footer .btn--danger-ghost:hover { background: var(--danger-bg); }

/* Değer düzenleme sayfası içi */
.value-head { display: flex; align-items: center; gap: var(--sp-3); }
.value-head__text { display: flex; flex-direction: column; line-height: 1.3; }
.value-head__name { font-weight: var(--w-medium); }
.value-head__where { font-size: var(--text-sm); color: var(--text-3); }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.segmented button { flex: 1; height: var(--control-h-lg); padding: 0 var(--sp-4); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); border-right: 1px solid var(--border); background: var(--surface); }
.segmented button:last-child { border-right: 0; }
.segmented--icons { display: flex; width: 100%; }
.segmented--icons button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1-5); padding: 0 var(--sp-3); white-space: nowrap; }
.segmented--icons .icon { flex: none; }
.segmented button.is-active { background: var(--primary); color: var(--on-accent); }

/* Adım ekle (Ekran 09 — 1. aşama) */
.category-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.category { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--size-56); padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--border); width: 100%; background: var(--surface); }
.category:last-child { border-bottom: 0; }
.category:hover { background: var(--surface-hover); }
.category__icon { display: grid; place-items: center; width: var(--size-36); height: var(--size-36); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.category__text { flex: 1; text-align: left; display: flex; flex-direction: column; line-height: 1.3; }
.category__name { font-size: var(--text-body); font-weight: var(--w-medium); }
.category__sub { font-size: var(--text-xs); color: var(--text-3); }

@media (max-width: 767px) {
  .groups-toolbar { flex-direction: column; align-items: stretch; }
  .editor { gap: var(--sp-4); }
  .editor__title-input { font-size: var(--text-h2); }
  .app.is-editing .tabbar { display: none; }
  .app.is-editing .main { padding-bottom: var(--sp-24); }
  .editor__footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .editor__footer .btn { flex: 1; }
  .editor__footer .btn--danger-ghost { display: none; }
  .editor-card__hint { display: none; }
  /* O5: give the label the full row width — output tag drops under the label, number and chevron hide */
  .editor-card .step-list { padding: 0 var(--sp-2) 0 var(--sp-1); }
  .editor-card .step-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "handle icon text del" "handle icon out del"; column-gap: var(--sp-2); row-gap: 0; align-items: center; padding: var(--sp-2) 0; }
  .editor-card .step-row__handle { grid-area: handle; }
  .editor-card .step-row__icon { grid-area: icon; }
  .editor-card .step-row__text { grid-area: text; }
  .editor-card .step-row__label { overflow-wrap: break-word; }
  .editor-card .step-row__trailing { display: contents; }
  .editor-card .step-row__out { grid-area: out; justify-self: start; margin-top: var(--sp-1); max-width: 100%; }
  .editor-card .step-row__delete { grid-area: del; }
  .editor-card .step-row__num, .editor-card .step-row__chevron { display: none; }
}

/* Çok değerli klima adımı (Mod, Sıcaklık, Fan) */
.value-group { display: flex; flex-direction: column; gap: var(--sp-5); }
.value-group .section-title { margin-bottom: var(--sp-2); }

/* ---- IOT-10 additions ---- */
/* Mobile: Gruplar / Otomasyonlar switch with the "+" action (the desktop page header is hidden) */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar { display: flex; align-items: center; gap: var(--sp-2); }
  .mobile-bar__switch { flex: 1; min-width: 0; }
  .mobile-bar .icon-btn { flex: none; }
}
.groups-list { display: flex; flex-direction: column; }
.scene-card.is-running .scene-card__icon { background: var(--primary-soft); color: var(--primary); }
.scene-card.is-running .scene-card__icon .icon, .scene-card.is-running .scene-card__run .icon { animation: spin 1s linear infinite; }
.scene-card.is-done .scene-card__icon { background: var(--success-bg); color: var(--success); }
.scene-card .scene-card__name { font-size: var(--text-body); }

/* Editor rows: drag handle works with touch, drop marker after the last row */
.step-row__handle[data-drag-handle] { touch-action: none; }
.step-row.is-drop-after { box-shadow: inset 0 -2px 0 var(--primary); }
.step-row:focus-visible { box-shadow: var(--focus-ring); }
.editor__header .icon-btn { flex: none; }
.editor-card .empty { margin: var(--sp-3); }
.segmented { align-self: flex-start; }