[x-cloak] { display: none !important; }

/* Sidebar child nav items — smaller than their parent so longer labels
   fit before text-overflow: ellipsis kicks in */
.menu-vertical .menu-sub .menu-item .menu-link {
  font-size: 0.85rem;
}

/* The template customizer re-injects vendor core.dist.css after this file via
   document.write, so equal-specificity overrides lose the cascade. The leading
   `html` raises specificity above the vendor's class-only selectors, making the
   overrides win regardless of DOM order. */
html .menu-vertical .menu-sub .menu-link {
  padding-bottom: 0.3rem;
}

html .menu-vertical .menu-item .menu-link {
  min-height: 1rem;
}

/* Let long sidebar labels wrap instead of ellipsising or clipping out of view */
html .menu-vertical .menu-item .menu-link > div:not(.badge) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Tighten deep submenu indentation */
html .layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item .menu-sub .menu-sub .menu-link {
  padding-inline-start: 2rem;
}

.menu-vertical .menu-sub .menu-item .menu-link > div:not(.badge) {
  line-height: 1.25rem;
}

/* Table header styling */
.table > thead > tr > th {
  background-color: #f1f1f1;
}

.dark-style .table > thead > tr > th {
  background-color: #2b2b2b;
}

/* Wide table card — fluidly breaks out of container at any viewport size */
.card-table-wide {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
}

.card-table-wide .table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

.listings-table {
  min-width: 1080px;
}

.listings-table .listing-title-link {
  max-width: 24rem;
}

.listings-table .listing-actions-cell {
  min-width: 5.5rem;
  position: sticky;
  right: 0;
  z-index: 1;
}

.listings-table thead .listing-actions-cell {
  background-color: #f1f1f1;
  z-index: 2;
}

.dark-style .listings-table thead .listing-actions-cell {
  background-color: #2b2b2b;
}

/* Disabled wizard step triggers */
.bs-stepper .step-trigger:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Status dot indicator */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}
.status-dot::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-success::before { background-color: #28c76f; }
.status-dot-secondary::before { background-color: #a8aaae; }
.status-dot-info::before { background-color: #00bad1; }
.status-dot-warning::before { background-color: #ff9f43; }
.status-dot-primary::before { background-color: #696cff; }
.status-dot-danger::before { background-color: #ff4c51; }
.status-dot-dark::before { background-color: #4b4b4b; }
.status-dot-muted::before { background-color: #7367f0; }

/* --- Tenant branding (AdminBrand view component) ---------------------------
   The vendor theme already swaps .app-brand-img for .app-brand-img-collapsed
   when the sidebar collapses; these rules only bound the uploaded artwork so an
   arbitrary logo cannot blow out the brand block. The leading `html` is required
   for the same cascade reason as the overrides above. */
html .app-brand-img {
  max-height: 2.5rem;
  max-width: 11rem;
  width: auto;
  object-fit: contain;
}

/* This file owns the expanded/collapsed swap; do not lean on the vendor's own
   .app-brand-img-collapsed { display: none }. That rule scores 0-1-0 and loses to the vendor's
   .app-brand-logo img { display: block } at 0-1-1, so both marks render stacked as soon as they
   share the .app-brand-logo wrapper (which they need, for sizing). Desktop hides the overflow and
   makes that look fine; the taller offcanvas menu shows both. */
html .app-brand-logo .app-brand-img {
  display: block;
}

html .app-brand-logo .app-brand-img-collapsed {
  display: none;
}

@media (min-width: 1200px) {
  html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-logo .app-brand-img {
    display: none;
  }

  html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-logo .app-brand-img-collapsed {
    display: block;
  }
}

html .app-brand-img-collapsed {
  max-height: 2.5rem;
  max-width: 2.5rem;
  width: auto;
  object-fit: contain;
}

/* The collapsed rail is 5.25rem wide and .app-brand keeps 2rem of side padding,
   leaving 1.25rem for the mark — narrower than the mark itself, which .app-brand
   then clips with overflow: hidden. Trim the padding so a square logo has room.
   The layout-menu-collapsed class sits on <html>, so the specificity bump has to be
   html.<class> with no space: "html .layout-menu-collapsed" would match nothing. */
@media (min-width: 1200px) {
  html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu.menu-vertical .app-brand,
  html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .menu-vertical .app-brand {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

/* Sign-in and 2FA screens: no collapsed state, so the full logo renders larger. */
html .admin-brand-auth-img {
  display: block;
  max-height: 3.5rem;
  max-width: 14rem;
  width: auto;
  object-fit: contain;
}

/* The sidebar brand block clears 196px between its padding, which an icon mark and a short title
   share comfortably. This only stops a long title running off the sidebar. */
html .layout-menu .app-brand-link {
  min-width: 0;
}

html .layout-menu .app-brand-text {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Rich text editor (_HtmlEditor partial) --------------------------------
   Quill sizes .ql-editor at height: 100% inside a container that has no height of
   its own, so the percentage resolves to auto and the editor tracks its content
   with nothing to stop it: a long stored value renders as one very tall box that
   pushes the rest of the form off the screen. Bound it and let the editor scroll.
   Both bounds arrive as custom properties the partial sets per instance. */
.kora-html-editor {
  min-height: var(--kora-html-editor-min-height, 150px);
  max-height: var(--kora-html-editor-max-height, 24rem);
  overflow: hidden;
}

/* Quill adds .ql-container to the same element once it initialises. From then on the
   bounds belong on .ql-editor, so that the link tooltip Quill positions against the
   container is not clipped by an overflow of its own. */
.kora-html-editor.ql-container {
  max-height: none;
  overflow: visible;
}

.kora-html-editor.ql-container > .ql-editor {
  min-height: var(--kora-html-editor-min-height, 150px);
  max-height: var(--kora-html-editor-max-height, 24rem);
  overflow-y: auto;
}

/* --- Navigation link picker suggestions ------------------------------------
   list-group items are transparent in the theme and their hover tint is translucent,
   so the floating results sit on the card surface with a shadow to cover the fields
   underneath. */
html .link-picker-suggestions {
  --bs-list-group-bg: var(--bs-card-bg);
  background-color: var(--bs-card-bg);
  max-height: 20rem;
  overflow-y: auto;
  box-shadow: var(--bs-box-shadow-lg);
}

html .link-picker-suggestions:empty {
  display: none;
}