/* Module workspace styling aligned with the Communication shell. */
body.crm-module-ui {
  --module-canvas: #f7f9fd;
  --module-surface: #fff;
  --module-line: #dfe7f2;
  --module-ink: #1c2d49;
  --module-muted: #5f718b;
  --module-radius: 9px;
  background: var(--module-canvas);
}
.crm-module-ui :is(.app-shell, .mail-shell, .crm-standalone-shell) {
  background-color: var(--module-canvas);
}
.crm-module-ui .crm-global-nav { border-radius: 0; }
.crm-module-ui :is(.workspace, .mail-workspace, .content, .crm-standalone-content) > .topbar {
  box-sizing: border-box;
  height: 58px;
  min-height: 58px;
  padding-inline: 18px;
  background: var(--module-surface);
}
.crm-module-ui :is(.page-head, .page-title, .page-heading, .crm-standalone-content > header) h1,
.crm-module-ui .mail-toolbar h1 {
  color: var(--module-ink);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 0;
}
.crm-module-ui :is(.page-head, .page-title, .page-heading) p {
  color: var(--module-muted);
  font-size: 12px;
  line-height: 1.5;
}
.crm-module-ui :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #2863eb;
  outline-offset: 2px;
}

.crm-ui-mail .mail-workspace .mail-toolbar { min-height: 48px; }
.crm-ui-mail .mail-workspace .mail-main {
  border-color: var(--module-line);
  border-radius: var(--module-radius);
}
.crm-ui-kb .workspace > .page { padding: 12px 16px; }
.crm-ui-kb .page-head { margin-bottom: 10px; }
.crm-ui-kb .page .content-grid > :is(.categories, .records, .detail) {
  border-color: var(--module-line);
  border-radius: var(--module-radius);
}

.crm-ui-activation .content > main { padding: 14px 16px 16px; }
.crm-ui-activation .page-title { margin-bottom: 10px; gap: 8px; }
.crm-ui-activation .metrics { gap: 8px; margin-block: 10px; }
.crm-ui-activation .metrics > button {
  padding: 8px 10px;
  border-color: var(--module-line);
  border-radius: var(--module-radius);
}
.crm-ui-activation .workbench { border-color: var(--module-line); border-radius: var(--module-radius); }
.crm-ui-activation .workbench > :is(.filters, .list-toolbar) { padding-block: 7px; }

.crm-ui-marketing .crm-standalone-content > header,
.crm-ui-settings .crm-standalone-content > header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--module-line);
  background: var(--module-surface);
}
.crm-ui-marketing .crm-standalone-content > main { gap: 10px; padding: 12px 16px; }
.crm-ui-marketing main > :is(aside, .workspace, .editor) {
  min-width: 0;
  padding: 12px;
  border-color: var(--module-line);
  border-radius: var(--module-radius);
  background: var(--module-surface);
}
.crm-ui-review .crm-standalone-content > main { padding: 10px 16px 16px; }
.crm-ui-review .review-grid > .panel { border-color: var(--module-line); border-radius: var(--module-radius); }
.crm-ui-review .page-heading { padding: 10px 16px; }

.crm-ui-settings .crm-standalone-content > main {
  box-sizing: border-box;
  max-width: 860px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
}
.crm-ui-settings main > .card {
  box-sizing: border-box;
  border: 1px solid var(--module-line);
  border-radius: var(--module-radius);
  padding: 14px;
  background: var(--module-surface);
}

@media (max-width: 800px) {
  .crm-module-ui :is(.workspace, .mail-workspace, .content, .crm-standalone-content) > .topbar {
    height: auto;
    padding-inline: 10px;
  }
  .crm-ui-kb .workspace > .page,
  .crm-ui-activation .content > main,
  .crm-ui-marketing .crm-standalone-content > main,
  .crm-ui-review .crm-standalone-content > main,
  .crm-ui-settings .crm-standalone-content > main { padding-inline: 10px; }
}