/* Uygulama iskeleti: kenar çubuğu (masaüstü), üst bar + alt sekme (mobil) */
.app { display: flex; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); }

/* Kenar çubuğu */
.sidebar { width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-3); background: var(--surface); border-right: 1px solid var(--border); transition: width var(--dur) var(--ease); }
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-4); }
.sidebar__emblem { width: var(--size-30); height: var(--size-30); flex: none; }
.sidebar__wordmark { font-size: var(--text-wordmark); font-weight: var(--w-semibold); letter-spacing: -.3px; line-height: 1; white-space: nowrap; color: var(--text-2); }
.sidebar__wordmark em { font-style: normal; color: var(--primary); }
.sidebar__by { font-size: var(--text-2xs); color: var(--text-3); margin-top: var(--sp-0-75); letter-spacing: .1px; }

.store-switcher { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2); margin-bottom: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: background var(--dur) var(--ease); min-height: var(--tap); }
.store-switcher:hover { background: var(--surface-hover); }
.store-switcher__logo { width: var(--control-h-sm); height: var(--control-h-sm); flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--text); color: var(--surface); font-weight: var(--w-semibold); font-size: var(--text-sm); }
.store-switcher__text { min-width: 0; flex: 1; line-height: 1.25; display: flex; flex-direction: column; text-align: left; }
.store-switcher__brand { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); color: var(--text-3); font-weight: var(--w-medium); }
.store-switcher__name { display: block; font-size: var(--text-sm); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-switcher__chevron { color: var(--text-3); }

.sidebar__nav { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; height: var(--size-42); padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--text-2); font-size: var(--text-control); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav-item:hover { background: var(--surface-hover); }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary-soft-text); font-weight: var(--w-semibold); }
.sidebar__footer { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.user-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2); border-radius: var(--r-md); min-height: var(--tap); }
.user-row:hover { background: var(--surface-hover); }
.user-row__text { min-width: 0; line-height: 1.3; }
.user-row__name { font-size: var(--text-sm); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row__title { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ana alan */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) 0; max-width: var(--content-max); width: 100%; margin: 0 auto; }
.page-header__title { font-size: var(--text-h1); }
.page-header__sub { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--sp-0-5); }
.page-header__actions { display: flex; gap: var(--sp-2); flex: none; }
.content { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6) var(--sp-12); max-width: var(--content-max); width: 100%; margin: 0 auto; }

/* Mobil üst bar ve alt sekme barı */
.topbar { display: none; position: sticky; top: 0; z-index: var(--z-tabbar); align-items: center; gap: var(--sp-2); height: var(--topbar-h); padding: 0 var(--sp-2) 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar__store { display: flex; align-items: center; gap: var(--sp-1); flex: 1; min-width: 0; height: var(--tap); font-weight: var(--w-semibold); font-size: var(--text-h3); }
.topbar__store span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__store .icon { color: var(--text-3); }
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); grid-template-columns: repeat(4, 1fr); }
.tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0-75); color: var(--text-3); font-size: var(--text-nav); font-weight: var(--w-medium); min-height: var(--tap); }
.tab-item.is-active { color: var(--primary); }

/* Mağaza seçici menüsü (masaüstü) */
.menu--store { top: var(--store-menu-top); left: var(--sp-3); right: var(--sp-3); min-width: 0; }
.store-sheet { display: none; }
@media (max-width: 767px) { .menu--store { display: none; } .store-sheet { display: flex; } }
.location-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-0-5); width: 100%; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.location-option:hover { background: var(--surface-hover); }
.location-option.is-active { border-color: var(--primary); background: var(--primary-soft); }
.location-option__name { font-size: var(--text-body); font-weight: var(--w-medium); }
.location-option__meta { font-size: var(--text-sm); color: var(--text-3); }

/* Çoklu seçim çubuğu */
.selection-bar { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: var(--z-drawer); display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); background: var(--text); color: var(--surface); border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-size: var(--text-sm); white-space: nowrap; }
.selection-bar__actions { display: flex; gap: var(--sp-2); }

/* Tablet: ikon modu */
@media (max-width: 1023px) {
  .sidebar { width: var(--sidebar-rail-w); padding: var(--sp-4) var(--sp-2); align-items: center; }
  .sidebar__brand { padding: var(--sp-1) 0 var(--sp-4); justify-content: center; }
  .sidebar__wordmark, .sidebar__by, .store-switcher__text, .store-switcher__chevron, .nav-item span, .user-row__text { display: none; }
  .store-switcher { justify-content: center; padding: var(--sp-1-5); width: var(--size-48); }
  .nav-item { justify-content: center; padding: 0; width: var(--size-48); }
  .user-row { justify-content: center; }
}

/* Mobil */
@media (max-width: 767px) {
  .app { flex-direction: column; }
  .sidebar { display: none; }
  .topbar { display: flex; }
  .tabbar { display: grid; }
  .main { padding-bottom: calc(var(--tabbar-h) + var(--sp-4)); }
  .page-header { display: none; }
  .content { gap: var(--sp-5); padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .selection-bar { bottom: calc(var(--tabbar-h) + var(--sp-4)); width: calc(100% - var(--sp-8)); justify-content: space-between; }
}

/* ---- Web app additions (IOT-8) ---- */

/* Bare screens (login, store selection) hide the shell chrome */
.app.is-bare > .sidebar, .app.is-bare > .topbar, .app.is-bare > .tabbar { display: none; }
.app.is-bare > .main { padding-bottom: 0; }

/* Links styled as shell controls keep their own colours on hover */
.nav-item:hover { color: var(--text); }
.nav-item.is-active:hover { color: var(--primary-soft-text); }
.tab-item:hover { color: var(--text-2); }
.tab-item.is-active:hover { color: var(--primary); }
.user-row, .user-row:hover { color: var(--text); }
.user-row.is-active { background: var(--primary-soft); }
.store-switcher { color: var(--text); }
.sidebar { z-index: var(--z-tabbar); }

/* Topbar modes: store picker (Mağazam) or page title (other routes) */
.topbar[data-mode="store"] .topbar__store--title, .topbar[data-mode="title"] .topbar__store--picker { display: none; }
.topbar .icon-btn { flex: none; }

/* Store menu is anchored to the switcher wrapper and may extend past the narrow rail */
.store-picker { position: relative; margin-bottom: var(--sp-3); }
.store-picker .store-switcher { margin-bottom: 0; }
.store-picker .menu--store { top: calc(100% + var(--sp-1)); left: 0; right: auto; width: var(--size-320); }
.menu--store .menu__item { height: auto; min-height: var(--tap); }
.menu--store .menu__sub { white-space: nowrap; }

/* Live connection hint in the page header */
.live-status { 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); }
.live-status .live-dot { animation: none; background: var(--offline); }
.live-status.is-open .live-dot { animation: live-pulse 1.6s var(--ease) infinite; background: var(--success); }

/* Full-page loading / error message inside .main */
.page-state { display: grid; place-items: center; min-height: 50vh; padding: var(--sp-8) var(--sp-4); }
.noscript { padding: var(--sp-6); }
a.location-option, a.location-option:hover { color: var(--text); }

/* ---- IOT-13: sidebar user area, desktop user menu, mobile editor back link ---- */
.user-row.is-open { background: var(--surface-hover); }
.user-menu { position: fixed; left: calc(var(--sidebar-w) - var(--sp-2)); bottom: var(--sp-4); z-index: var(--z-drawer); width: calc(var(--size-320) - var(--sp-5)); padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--sp-1); animation: fade-in var(--dur) var(--ease); }
.user-menu__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1); }
.user-menu__avatar { display: grid; place-items: center; width: var(--size-40); height: var(--size-40); border-radius: 50%; background: var(--text); color: var(--surface); font-size: var(--text-sm); font-weight: var(--w-semibold); flex: none; }
.user-menu__text { min-width: 0; }
.user-menu__name { font-size: var(--text-sm); font-weight: var(--w-medium); }
.user-menu__mail { font-size: var(--text-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .menu__item { text-align: left; }
@media (max-width: 1023px) { .user-menu { left: calc(var(--sidebar-rail-w) - var(--sp-2)); } }
@media (max-width: 767px) { .user-menu { display: none; } }

/* Mobile top bar back link while editing a group / automation */
.topbar .topbar__back { display: none; flex: none; margin-left: calc(-1 * var(--sp-2)); }
.topbar.has-back .topbar__back { display: inline-grid; }