/* ============================================================================
   SOCIOMONKEY DESIGN SYSTEM — Layout
   ============================================================================
   Structural layout rules shared by ALL products.
   Sidebar width is the single source of truth: --sm-sidebar-width.
   ============================================================================ */

/* ── Sidebar dimension token ─────────────────────────────────────────────── */
:root {
  --sm-sidebar-width:     260px;  /* desktop — no product exceptions          */
  --sm-topbar-height:      68px;  /* platform topbar                          */
}

/* ── Primary two-column layout (sidebar + content) ──────────────────────── */
.sm-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Tenant / product content area ──────────────────────────────────────── */
.sm-main-content {
  margin-left: var(--sm-sidebar-width);
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  background: var(--sm-surface);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Platform orchestration wrapper (sidebar + topbar + scrollable main) ── */
.sm-plat-wrapper {
  margin-left: var(--sm-sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Page-level container (inside main content) ─────────────────────────── */
.sm-page {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 28px 24px;
  overflow-y: auto;
}

/* ── Page header row (title + action buttons) ───────────────────────────── */
.sm-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.sm-page-header h2,
.sm-page-header .sm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--sm-ink);
  line-height: 1.3;
}

/* ── Spacing utilities ───────────────────────────────────────────────────── */
.sm-mt-1  { margin-top:     4px; }
.sm-mt-2  { margin-top:     8px; }
.sm-mt-3  { margin-top:    12px; }
.sm-mt-4  { margin-top:    16px; }
.sm-mt-6  { margin-top:    24px; }
.sm-mb-2  { margin-bottom:  8px; }
.sm-mb-4  { margin-bottom: 16px; }
.sm-mb-6  { margin-bottom: 24px; }

/* ── Grid utilities ──────────────────────────────────────────────────────── */
.sm-grid-2 { display: grid; grid-template-columns: 1fr 1fr;     gap: 16px; }
.sm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.sm-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ── Flex utilities ──────────────────────────────────────────────────────── */
.sm-flex         { display: flex; }
.sm-flex-col     { display: flex; flex-direction: column; }
.sm-items-center { align-items: center; }
.sm-justify-between { justify-content: space-between; }
.sm-gap-2        { gap:  8px; }
.sm-gap-3        { gap: 12px; }
.sm-gap-4        { gap: 16px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sm-main-content {
    margin-left: 0 !important;
    padding-top: 56px;
  }

  .sm-plat-wrapper {
    margin-left: 0 !important;
  }

  .sm-grid-2,
  .sm-grid-3,
  .sm-grid-4 {
    grid-template-columns: 1fr;
  }

  .sm-page {
    padding: 16px 12px;
  }

  .sm-page-header {
    flex-direction: column;
    align-items: stretch;
  }
}