/* Fixtar 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;
}

/*
 * The project picker's card grid (templates/projects/_picker_content.html)
 * is rendered both as a full page and, unchanged, as the body of the
 * sidebar's "Switch Project" modal. Bootstrap's .row/.col-* grid sizes
 * columns off the *viewport* width (e.g. col-xl-4 assumes a real xl-wide
 * viewport), not the width of whatever container it's actually in - inside
 * the much narrower modal this forced 3 columns into a box that only had
 * room for one, and .row's negative margins have no container padding to
 * cancel against in the modal body, so cards overflowed past the modal
 * edge and their status badges rendered on top of/outside the neighbouring
 * card. A real CSS grid sizes tracks off its own container instead, so it
 * looks right at any width without needing to know if it's on the page or
 * in a modal.
 */
.picker-cards-grid {
  display: grid;
  /*
   * minmax(0, 1fr), not a bare 1fr: grid tracks otherwise refuse to shrink
   * past each item's content-based minimum width (its longest unbreakable
   * word/box), so a track can end up wider than its fair share and overflow
   * the grid - which is what let long project names and their status badge
   * push past the card edge instead of the title truncating.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 480px) {
  .picker-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Flex items default to min-width: auto, so a title next to a status badge
 * in a flex row won't actually shrink below its own text length - it just
 * pushes the row (and the badge) wider instead of truncating. min-width: 0
 * lifts that floor so text-truncate's overflow/ellipsis can take effect.
 */
.picker-card-title {
  min-width: 0;
  flex: 1 1 auto;
}

/*
 * The "Install Fixtar" PWA prompt (templates/base.html) should read as a
 * small, dismissible toast anchored to the page rather than a full dialog
 * interrupting the middle of the screen. Bootstrap's modal always centers
 * .modal-dialog via its flex container, so pin the dialog itself instead -
 * position: fixed takes it out of that flow regardless of the parent's own
 * alignment, on top of the (still present) dimmed backdrop.
 */
.pwa-install-dialog {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  max-width: 360px;
}
@media (min-width: 576px) {
  .pwa-install-dialog {
    left: auto;
  }
}