[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;
}

/* Columns hug their content and the title takes the width that is left, truncating to fit, so the
   default column set fits a 1366px window. Added columns widen the table past the card, which then
   scrolls sideways under the sticky actions cell. The leading `html` outranks the vendor's cell
   padding for the same cascade reason as the overrides above. */
html .listings-table > :not(caption) > * > * {
  padding-inline: 0.75rem;
  white-space: nowrap;
}

html .listings-table > tbody > tr > td[data-column='Title'] {
  width: 100%;
  min-width: 14rem;
  white-space: normal;
}

/* Order detail: the payment table carries eight columns in the main column, so its cells pad less. */
.order-payments-table > :not(caption) > * > * {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.order-payments-table > :not(caption) > * > *:first-child {
  padding-left: 1.25rem;
}

.order-line-description {
  min-width: 12rem;
}

/* width: 0 keeps the title out of the column's intrinsic width, so a long title truncates instead of
   pushing the other columns under the actions cell. */
.listings-table .listing-title-link {
  display: block;
  width: 0;
  min-width: 100%;
}

.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;
}

/* Columns scrolled sideways pass under the sticky actions cell, so it needs the card's background. */
.listings-table tbody .listing-actions-cell {
  background-color: var(--bs-card-bg, #fff);
}

.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;
}

/* --- CMS page editor toolbar ------------------------------------------------
   Quill sizes every toolbar button for a square icon (1.75rem). The Card button
   carries a text label, so it takes the width of its label instead. */
.ql-snow.ql-toolbar button.ql-card {
  width: auto;
}

/* --- Listing detail values (Listings/_DetailValue partial) -----------------
   A description or custom field can run to thousands of words. Each value is held to a fixed
   height until Show more is pressed, and a value that continues past it fades out. */
.listing-detail-value-body {
  overflow-wrap: anywhere;
}

.listing-detail-value-body.is-clamped {
  max-height: 10rem;
  overflow: hidden;
}

.listing-detail-value-body.is-faded {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
}

.listing-detail-value-body > :last-child {
  margin-bottom: 0;
}

.listing-detail-value-body img {
  max-width: 100%;
  height: auto;
}

.listing-detail-value-text {
  white-space: pre-line;
}

/* Sneat gives .btn display: inline-flex !important, which beats the inline display: none SweetAlert
   puts on the buttons a dialog does not use, so an error dialog would also show Cancel and No. */
.swal2-actions > .btn[style*="display: none"] {
  display: none !important;
}