/* layout.css — App shell layout
 * Sidebar + topbar + main area — mirrors iOS split layout
 */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--qi-bg);
  color: var(--qi-text);
  font: var(--qi-font-body);
  font-family: var(--qi-font-sans);
  overflow-x: hidden;
  overflow-y: auto;
  user-select: none;
}

/* ── App shell ─────────────────────────────────────── */
.qi-app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  z-index: var(--qi-z-content);
}

/* ── Sidebar ───────────────────────────────────────── */
.qi-sidebar {
  width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  border-right: 0.5px solid var(--qi-glass-border-subtle);
  background: color-mix(in srgb, var(--qi-bg) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: var(--qi-z-content);
}

/* Filter + search group */
.qi-sidebar__controls {
  padding: var(--qi-space-sm) 0 0;
  border-bottom: 0.5px solid var(--qi-glass-border-subtle);
}

.qi-sidebar__filters {
  display: flex;
  gap: 4px;
  padding: 0 var(--qi-space-sm) var(--qi-space-xs);
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}

.qi-sidebar__filters::-webkit-scrollbar {
  display: none;
}

/* Smaller pills in sidebar */
.qi-sidebar__filters .qi-pill {
  padding: 3px 8px;
  font-size: 0.65rem;
  gap: 4px;
}
.qi-sidebar__filters .qi-pill__dot {
  width: 5px;
  height: 5px;
}

/* Search row with compose button */
.qi-sidebar__search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--qi-space-xs) var(--qi-space-sm) var(--qi-space-sm);
}

.qi-sidebar__search-field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.qi-sidebar__search-icon {
  position: absolute;
  left: 8px;
  color: var(--qi-text-muted);
  pointer-events: none;
}

.qi-sidebar__search-field input {
  width: 100%;
  padding: 6px 8px 6px 28px;
  background: var(--qi-glass);
  border: 0.5px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-md);
  color: var(--qi-text);
  font: var(--qi-font-body-sm);
  font-size: 0.75rem;
  outline: none;
  transition: border-color var(--qi-dur-fast);
}

.qi-sidebar__search-field input:focus {
  border-color: var(--qi-accent);
  background: color-mix(in srgb, var(--qi-accent) 5%, var(--qi-glass));
}

.qi-sidebar__search-field input::placeholder {
  color: var(--qi-text-muted);
}

/* Compose (new chat) button — pencil/edit icon */
.qi-sidebar__compose {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--qi-radius-md);
  background: color-mix(in srgb, var(--qi-accent) 12%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--qi-accent) 25%, transparent);
  color: var(--qi-accent);
  cursor: pointer;
  transition: background var(--qi-dur-fast), transform var(--qi-dur-fast);
}

.qi-sidebar__compose:hover {
  background: color-mix(in srgb, var(--qi-accent) 20%, transparent);
}

.qi-sidebar__compose:active {
  transform: scale(0.92);
}

.qi-sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.qi-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--qi-space-sm);
  padding: var(--qi-space-sm) var(--qi-space-sm);
  cursor: pointer;
  transition: background var(--qi-dur-fast);
}

.qi-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.qi-sidebar__item--active {
  background: color-mix(in srgb, var(--qi-accent) 8%, transparent);
}

/* Channel color dot — same colors as filter pills */
.qi-sidebar__item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qi-sidebar__item-content {
  flex: 1;
  min-width: 0;
}

.qi-sidebar__item-title {
  font: var(--qi-font-body-sm);
  color: var(--qi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qi-sidebar__item-preview {
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qi-sidebar__item-unread {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--qi-radius-pill);
  background: var(--qi-accent);
  color: var(--qi-bg);
  font: 600 9px/1 var(--qi-font-sans);
}

/* ── Main area ─────────────────────────────────────── */
.qi-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Top bar ───────────────────────────────────────── */
.qi-topbar {
  display: flex;
  align-items: center;
  gap: var(--qi-space-md);
  padding: 0 var(--qi-space-lg);
  height: 56px;
  min-height: 56px;
  border-bottom: 0.5px solid var(--qi-glass-border-subtle);
  background: color-mix(in srgb, var(--qi-bg) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: var(--qi-z-header);
}

.qi-topbar__brand {
  font: var(--qi-font-title-sm);
  letter-spacing: 0.1em;
  color: var(--qi-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--qi-dur-fast) var(--qi-ease-out);
}

.qi-topbar__brand:hover {
  color: var(--qi-accent);
}

.qi-topbar__view-title {
  font: var(--qi-font-body);
  font-weight: 500;
  color: var(--qi-text-muted);
}

.qi-topbar__messenger-toggle {
  display: none;
}

@media (max-width: 48rem) {
  .qi-topbar__messenger-toggle {
    display: flex;
  }
}

.qi-topbar__divider {
  width: 1px;
  height: 20px;
  background: var(--qi-glass-border-subtle);
}

.qi-topbar__spacer {
  flex: 1;
}

.qi-topbar__status {
  display: flex;
  align-items: center;
  gap: var(--qi-space-xs);
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
}

.qi-topbar__status--clickable {
  cursor: pointer;
  padding: var(--qi-space-xs) var(--qi-space-sm);
  border-radius: var(--qi-radius-md);
  transition: background var(--qi-dur-fast);
  position: relative;
}

.qi-topbar__status--clickable:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Mesh event dropdown ───────────────────────────── */
.qi-mesh-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: color-mix(in srgb, var(--qi-bg) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 0.5px solid var(--qi-glass-border);
  border-radius: var(--qi-radius-lg);
  box-shadow: var(--qi-shadow-raised);
  z-index: var(--qi-z-overlay);
  display: flex;
  flex-direction: column;
  margin-top: var(--qi-space-xs);
}

.qi-mesh-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qi-space-md) var(--qi-space-lg);
  border-bottom: 0.5px solid var(--qi-glass-border-subtle);
  font: var(--qi-font-title-sm);
  color: var(--qi-text);
}

.qi-mesh-dropdown__filters {
  display: flex;
  gap: var(--qi-space-xs);
  padding: var(--qi-space-sm) var(--qi-space-lg);
  flex-wrap: wrap;
}

.qi-mesh-dropdown__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--qi-space-xs) var(--qi-space-lg);
}

.qi-mesh-dropdown__item {
  display: flex;
  gap: var(--qi-space-sm);
  padding: var(--qi-space-xs) 0;
  border-bottom: 0.5px solid var(--qi-glass-border-subtle);
}

.qi-mesh-dropdown__time {
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
  white-space: nowrap;
  min-width: 60px;
}

.qi-mesh-dropdown__desc {
  font: var(--qi-font-caption);
  color: var(--qi-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qi-mesh-dropdown__empty {
  padding: var(--qi-space-lg);
  text-align: center;
  color: var(--qi-text-muted);
  font: var(--qi-font-caption);
}

.qi-mesh-dropdown__more {
  padding: var(--qi-space-sm);
  background: none;
  border: none;
  border-top: 0.5px solid var(--qi-glass-border-subtle);
  color: var(--qi-accent);
  font: var(--qi-font-caption);
  cursor: pointer;
  text-align: center;
}

.qi-mesh-dropdown__more:hover {
  background: rgba(102, 252, 241, 0.05);
}

/* ── Content area ──────────────────────────────────── */
.qi-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--qi-space-lg);
}

/* Remove padding when showing messenger (full width) */
.qi-content:has(.messenger) {
  padding: 0;
}

/* ── Split layout (iPad/desktop) ───────────────────── */
.qi-split {
  display: flex;
  flex: 1;
  min-height: 0;
}

.qi-split__sidebar {
  width: 360px;
  min-width: 360px;
}

.qi-split__main {
  flex: 1;
  min-width: 0;
}

/* ── Detail sidebar (right) ────────────────────────── */
.qi-detail-sidebar {
  width: 360px;
  min-width: 360px;
  border-left: 0.5px solid var(--qi-glass-border-subtle);
  background: color-mix(in srgb, var(--qi-bg) 50%, transparent);
  overflow-y: auto;
  padding: var(--qi-space-lg);
}

/* ── Slide-out menu ────────────────────────────────── */
.qi-slideout {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  z-index: var(--qi-z-overlay);
  background: color-mix(in srgb, var(--qi-bg) 85%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 0.5px solid var(--qi-glass-border);
  padding: var(--qi-space-xl);
  transform: translateX(-100%);
  transition: transform var(--qi-dur-normal) var(--qi-ease-spring);
}

.qi-slideout--open {
  transform: translateX(0);
}

/* Right-side variant — detail panels (usage, tenants, etc.) */
.qi-slideout--right {
  left: auto;
  right: 0;
  width: 320px;
  border-right: none;
  border-left: 0.5px solid var(--qi-glass-border);
  transform: translateX(100%);
}

.qi-slideout--right.qi-slideout--open {
  transform: translateX(0);
}

.qi-slideout__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--qi-z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qi-dur-normal);
}

.qi-slideout__backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .qi-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform var(--qi-dur-normal) var(--qi-ease-spring);
    z-index: var(--qi-z-overlay);
  }

  .qi-sidebar--open {
    transform: translateX(0);
  }

  .qi-detail-sidebar {
    display: none;
  }

  .qi-split__sidebar {
    width: 100%;
    min-width: 0;
  }

  /* Side menu — near full width on mobile */
  .qi-slideout {
    width: 100vw;
    max-width: 100vw;
    padding: var(--qi-space-lg);
  }

  /* Dashboard detail sidebar — full screen on mobile */
  .dashboard__detail-sidebar {
    width: 100%;
    min-width: 0;
  }

  /* Dashboard board — single column scroll on mobile */
  .dashboard__board {
    flex-direction: column;
    overflow-x: hidden;
  }

  .dashboard__column {
    min-width: 100%;
  }
}

/* ── Bottom tab bar (iOS TabView parity) ───────────────────────────── */
.qi-tabbar {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 56px;
  min-height: 56px;
  border-top: 0.5px solid var(--qi-glass-border-subtle);
  background: color-mix(in srgb, var(--qi-bg) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: var(--qi-z-header);
}

.qi-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--qi-text-muted);
  transition: color var(--qi-dur-fast) var(--qi-ease-out);
}

.qi-tabbar__item:hover {
  color: var(--qi-text);
}

.qi-tabbar__item--active {
  color: var(--qi-accent);
}

.qi-tabbar__label {
  font: 500 10px var(--qi-font-sans);
}