/*
   IAM application theme.

   DELIBERATELY ALMOST EMPTY. The IAM screens use the Product application's stylesheet - site.css
   here is the same file - so cards, grids, forms, buttons, tables and the page frame all look and
   behave exactly as they do in Product. Anything added here would be a difference between the two
   applications, which is precisely what this application must not have.

   What is left are the two things Product has no equivalent of:
     - the header block used by the IAM dashboard and the application launcher (.iamx-*), which is
       the same header Product's own dashboard carries;
     - one button height, for the Add Action button that sits beside a field on Page Management.
*/

:root {
  --iamx-primary: #6366c9;
  --iamx-ink: #2f3349;
  --iamx-muted: #8592a3;
  --iamx-border: #e7e9f0;
  --iamx-radius: 12px;
}

/* ------------------------------------------------------------------ page header ---- */

.iamx-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, #f3f4ff 0%, #f7f5fd 60%, #fafbff 100%);
  border: 1px solid #e6e8fa;
  border-radius: var(--iamx-radius);
}

.iamx-head-icon {
  flex: 0 0 2.6rem;
  height: 2.6rem;
  border-radius: .7rem;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--iamx-primary);
  background: #e8e9fb;
}

.iamx-head-text { flex: 1 1 auto; min-width: 0; }

.iamx-crumbs {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .2rem;
  font-size: .75rem;
  color: var(--iamx-muted);
}

.iamx-crumbs a { color: var(--iamx-muted); text-decoration: none; }
.iamx-crumbs a:hover { color: var(--iamx-primary); }
.iamx-crumbs [aria-current] { color: var(--iamx-ink); font-weight: 500; }
.iamx-crumbs .bx { font-size: .9rem; }

/* The theme gives headings a very tall line-height; pinned so the header stays compact. */
.iamx-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--iamx-ink);
}

.iamx-lead {
  margin: .15rem 0 0;
  font-size: .8125rem;
  color: var(--iamx-muted);
}

.iamx-head-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ------------------------------------------------------------------ controls ------- */

/*
   A button that sits on the same line as the floating-label inputs beside it (Add Action on Page
   Management). Stretching it to the column height made it taller than the field it belongs to.
*/
.iam-inline-btn {
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .iam-inline-btn { width: 100%; }
  .iamx-head { flex-wrap: wrap; }
  .iamx-head-side { width: 100%; justify-content: flex-end; }
}