/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 38px;
  height: 20px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.25rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1.25rem;
}

/*
* Platform: icon glyphs inside avatar chips
* The theme's .avatar-initial font sizes are tuned for TWO-LETTER initials;
* a single mdi glyph at initials size floats in the chip (a 12px icon in
* the 32px avatar-sm). Scale bare icons to ~55-60% of the chip box.
* Explicit mdi-NNpx utility classes still win (their ::before rule beats
* the inherited size), so deliberate opt-ins are untouched.
******************************************************************************/
.avatar .avatar-initial .mdi {
  font-size: 1.375rem;
  line-height: 1;
}
.avatar-xs .avatar-initial .mdi {
  font-size: 0.9375rem;
}
.avatar-sm .avatar-initial .mdi {
  font-size: 1.125rem;
}
.avatar-md .avatar-initial .mdi {
  font-size: 1.75rem;
}
.avatar-lg .avatar-initial .mdi {
  font-size: 2rem;
}
.avatar-xl .avatar-initial .mdi {
  font-size: 2.25rem;
}

/******************************************************************************
 * Flexbox truncation utility
 *
 * `.min-w-0` is used across ~8 templates (organizations dashboard, scribe,
 * personas, insights, users) as the partner of `.text-truncate` inside a
 * flex row — but it was never defined anywhere in the CSS, so every one of
 * those was a no-op.
 *
 * Why that breaks: a flex item defaults to `min-width: auto`, which refuses
 * to shrink below its content's intrinsic width. `text-truncate` needs a
 * constrained box to ellipsise against, so with no constraint the text
 * simply pushes its container wider than the card — which is exactly how a
 * long visitor inquiry ran off the edge of the dashboard card.
 *
 * One rule fixes every existing usage.
 ******************************************************************************/
.min-w-0 {
  min-width: 0 !important;
}

/* Long unbroken tokens — a URL, a 60-character email, a pasted hash — have
 * no break opportunity, so they overflow even a correctly constrained box.
 * Scoped to truncating flex children rather than applied globally. */
.min-w-0 > .text-truncate {
  overflow-wrap: anywhere;
}

/******************************************************************************
 * Front-page navbar clearance below 480px
 *
 * The front navbar is overlaid, and every front page clears it with the
 * theme's .first-section-pt (135px at >=1200px, 104px below). Measured against
 * the real navbar:
 *
 *     width   navbar height   offset   gap
 *      360        110px        104px    -5px   <- content UNDER the menu
 *      390        110px        104px    -6px   <- content UNDER the menu
 *      480         67px        104px   +37px
 *     1440         67px        135px   +68px
 *
 * Under 480px the brand text wraps to a second line and the navbar grows to
 * 110px, which the 104px offset no longer clears — so the first element on the
 * page (a breadcrumb, or an h1) sits behind the menu. This affected
 * /front/contact and /front/pricing as well as the feature pages; it is a
 * theme gap, not a per-page mistake.
 *
 * `body .first-section-pt` (0,1,1) rather than `.first-section-pt` (0,1,0):
 * demo.css loads BEFORE front-page.css, so equal specificity would lose on
 * source order. This avoids !important.
 ******************************************************************************/
@media (max-width: 479.98px) {
  body .first-section-pt {
    padding-top: 7.75rem;   /* 124px — clears the 110px wrapped navbar */
  }
}