/**
 * Sajelli — kit override for layout edge cases.
 * Loaded AFTER the NexLink kit stylesheet so it wins specificity ties.
 *
 * 1) Cards
 *    The kit forces `.card { height: calc(100% - var(--bs-gutter-x)); }`,
 *    which makes every card stretch to fill its parent column height.
 *    That works for single-card-per-column dashboards but breaks pages
 *    that stack multiple cards in one column (profile, security, settings).
 *    Two stacked cards each rendered at "100% of column height" overflow
 *    the column and overlap the footer below.
 *
 *    Reset to auto by default. Use `.h-100` (Bootstrap utility) on the card
 *    when the dashboard explicitly wants equal-height cards in a row.
 */
.card {
  height: auto;
}

/* But keep the kit's behaviour when the row asks for equal heights via h-100. */
.card.h-100 {
  height: 100%;
}

/**
 * 2) Sidebar: kit gives the menu nav a fixed height of `calc(100vh - 285px)`,
 *    which leaves a chunk of empty white space below the menu items.
 *    Tighten the math so the menu fills the available vertical space below
 *    the brand area, with just enough room for the footer/safe padding.
 */
.app-menubar-tabs .app-tab-content .app-navbar {
  height: calc(100vh - var(--app-header-height) - 30px);
}

/**
 * 3) In-page list search inputs (`<div class="position-relative">` wrapping a
 *    `<i.fi-rr-search>` over an `<input.form-control>`).
 *    Various pages combine `ms-2` (margin-inline-start: 0.5rem) AND
 *    `inset-inline-start: 0.5rem` on the icon, which double-shifts it INTO
 *    the input's text area and overlaps the placeholder in RTL.
 *    Normalise: pin the icon to one fixed offset from the start edge, drop
 *    margin, and ensure the sibling input leaves enough padding.
 */
.position-relative > i.fi-rr-search.position-absolute {
  inset-inline-start: 0.75rem !important;
  margin: 0 !important;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
.position-relative > i.fi-rr-search.position-absolute ~ .form-control {
  padding-inline-start: 2rem !important;
}

/**
 * 4) Auth pages (login + register): the cover illustration column should stay
 *    fixed in place while the form column scrolls — otherwise on the register
 *    page (which has many fields) the form area extends below the cover and
 *    leaves a tall block of empty white space below the illustration.
 *    Make the cover column position: sticky so it pins to the top of the
 *    viewport at full height while the form scrolls past it.
 */
@media (min-width: 768px) {
  .auth-cover-wrapper .row > .order-md-1 {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }
}

/**
 * 5) Table list pages: horizontal scroll inside .table-responsive is annoying
 *    on desktop dashboards — text gets clipped by `.minw-XXXpx` utilities the
 *    kit ships with, forcing the table wider than its container. Reset the
 *    minimum widths so columns fit naturally, and let cells wrap or truncate
 *    instead of overflowing horizontally.
 */
.table-responsive {
  overflow-x: auto;
}
.table-responsive > .table {
  width: 100%;
  table-layout: auto;
}
.table-responsive > .table th,
.table-responsive > .table td {
  min-width: 0;
}
.table-responsive > .table [class*="minw-"] {
  min-width: 0 !important;
}