/* ===== MODULE VIEW (generic layout for all modules) ===== */

#module-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-module);
  display: none;
  background: var(--bg-module);
  overflow-y: auto;
  transform-origin: center center;
  transition: none;
}
#module-view.active { display: block; }
#module-view.collapsing {
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.4s var(--ease-out),
    border-radius 0.45s var(--ease-out);
  pointer-events: none;
  overflow: hidden;
}

/* ----- Expanding tile overlay (HUB -> module animation) ----- */
.tile-expand-overlay {
  position: fixed;
  z-index: var(--z-overlay);
  border-radius: var(--radius-xl);
  pointer-events: none;
  display: none;
  transition: all 0.5s var(--ease-out);
}
.tile-expand-overlay.expanding { border-radius: 0 !important; }
.tile-expand-overlay.collapsing { transition: all 0.45s var(--ease-out); }

/* ----- Module topbar ----- */
.module-topbar {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-default);
  gap: 16px;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-4);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: all var(--transition-base);
}
.back-btn:hover {
  background: var(--surface-5);
  color: var(--text-primary);
}

.module-topbar .logo-mini {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.module-topbar .logo-mini:hover { opacity: 0.8; }

.module-topbar .breadcrumb {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.module-topbar .breadcrumb span {
  color: var(--text-secondary);
  font-weight: 500;
}

.module-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.module-topbar-right .user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.module-topbar-right .user-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success);
}

/* ----- Module content area ----- */
.module-content {
  padding: 24px;
  opacity: 0;
  transform: translateY(10px);
  animation: moduleContentIn 0.4s ease 0.35s forwards;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.module-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}
.module-actions {
  display: flex;
  gap: 8px;
}

/* ----- Filters bar ----- */
.filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* ----- Stats row ----- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .module-content { padding: 16px; }
  .module-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .filters-bar { gap: 6px; }
}

/* ----- Coming soon placeholder ----- */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--text-dim);
  text-align: center;
}
.coming-soon-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.coming-soon-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.coming-soon-sub {
  font-size: .85rem;
  color: var(--text-faint);
}