/* Viewtronics custom styles */

/*
 * The theme's own .card rule sets --bs-card-height: calc(100% - gutter),
 * so any card placed inside a flex/stretch ancestor (e.g. a container-fluid
 * with d-flex flex-column, or a Bootstrap row) inflates to fill the full
 * height of that context instead of sizing to its own content. That's the
 * right behavior for a row of equal-height dashboard tiles, but wrong for
 * ordinary stacked content cards (forms, tables, etc.), where it produces
 * huge cards with mostly empty space.
 *
 * Default back to natural content height everywhere, and let pages that
 * genuinely want equal-height cards opt back in with .h-100 (which sets
 * height directly and isn't affected by this reset).
 */
.card {
  --bs-card-height: auto;
}

/*
 * On narrow screens, list-table cells otherwise wrap free text (client
 * names, descriptions) line-by-line inside cramped columns before the
 * .table-responsive scroll ever kicks in, which reads as broken/squished.
 * Force single-line cells so the wrapper's horizontal scroll is the only
 * thing that engages - one clean scrollable row beats several wrapped ones.
 * Cells holding inputs/selects (line-item builder tables) are unaffected
 * since those controls already have their own fixed widths.
 */
@media (max-width: 767.98px) {
  .table-responsive > table td,
  .table-responsive > table th {
    white-space: nowrap;
  }
}

/*
 * .app-toggler is the only control that opens the off-canvas sidebar on
 * mobile, but the theme ships it at a fixed 28x28px - fine for a mouse
 * click, too small for a reliable thumb tap (well under the ~44px minimum
 * touch target). Enlarge the tappable box on phones; the icon inside
 * keeps its own size and just gets more breathing room.
 */
@media (max-width: 767.98px) {
  .app-toggler {
    width: 44px;
    height: 44px;
    margin: 16px 10px;
  }
}

/*
 * .searchable-select (static/js/searchable_select.js) turns a plain <select>
 * into a live-search dropdown. The toggle reuses .form-select as-is, so this
 * only adds the layout the plain <select> didn't need: full-width menu,
 * a scrollable option list, and truncating long labels instead of wrapping.
 */
.searchable-select {
  position: relative;
}
.searchable-select-toggle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.searchable-select-menu {
  width: 100%;
  min-width: 100%;
}
.searchable-select-list {
  max-height: 240px;
  overflow-y: auto;
}