/*
 * Project-level CSS overrides on top of Bootstrap 5.3.3.
 *
 * Loaded from system/templates/base.html immediately after the vendor
 * stylesheets, so it can override Bootstrap defaults but pages can still
 * override what's here via their own {% block css %} entries.
 *
 * Convention follows FabControlV2 — the firm runs at a 13px root font
 * (vs Bootstrap's 16px default) for a denser UI. The .fs-1 ... .fs-10
 * scale below is the firm-wide replacement for Bootstrap's heading-
 * derived sizes, extended past Bootstrap's .fs-6 to give us .fs-7..10
 * for fine-print text without bumping into custom inline styles.
 */

/* Density baseline — every rem unit downstream shrinks by 13/16 = 0.8125.
   Matches FabControlV2's root. Used for everything we render, but also matters
   for Select2 + SweetAlert2 which read from html, not body. */
html {
  font-size: 13px;
}

/* Links carry no underline, firm-wide (colour still distinguishes them).
   .btn-link needs its own entry — Bootstrap underlines it at higher
   specificity than the bare element rule. */
a,
.btn-link {
  text-decoration: none;
}

/* Type scale, replaces Bootstrap's RFS-driven .fs-1..6 with explicit
   per-class values + adds .fs-7..10 for the long tail. */
.fs-1 {
  font-size: calc(1.3rem + 0.6vw) !important;
}
.fs-2 {
  font-size: calc(1.275rem + 0.3vw) !important;
}
.fs-3 {
  font-size: calc(1.26rem + 0.12vw) !important;
}
.fs-4 {
  font-size: 1.25rem !important;
}
.fs-5 {
  font-size: 1.15rem !important;
}
.fs-6 {
  font-size: 1.075rem !important;
}
.fs-7 {
  font-size: 0.95rem !important;
}
.fs-8 {
  font-size: 0.85rem !important;
}
.fs-9 {
  font-size: 0.75rem !important;
}
.fs-10 {
  font-size: 0.5rem !important;
}

/*
 * Select2 (bootstrap-5 theme): keep the thin blue focus border on the closed
 * selection box (matches the open dropdown's border) but drop the box-shadow
 * glow — when the dropdown opens it sits flush against the box and the glow
 * bleeds below / gets clipped, which reads as broken. The search field inside
 * the dropdown keeps its own focus ring (not targeted here).
 */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  box-shadow: none;
}

/*
 * DataTables list look/feel (firm-wide) — matches FabControlV2.
 * - fs-8 (0.85rem ≈ 11px at the 13px root) across the table region (table,
 *   info, paging, panes) — FCv2 puts fs-8 on its list, smaller than body text.
 * - No alternate row shading: list templates simply omit `table-striped`
 *   (DataTables 2 + Bootstrap 5 only stripe when that class is present). We do
 *   NOT force `tr` backgrounds to transparent — that would erase the Select
 *   highlight on selected SearchPanes options (blue bg / white text).
 * - SearchPanes filter panes fill the full container width at any pane count
 *   (override the `dtsp-columns-N` fixed widths so panes flex to fill).
 */
.dt-container,
.dataTables_wrapper,
table.dataTable {
  font-size: 0.85rem;
}
.dtsp-panesContainer {
  width: 100% !important;
  text-align: left;
}
.dtsp-panesContainer div.dtsp-searchPanes {
  width: 100%;
  justify-content: flex-start;
  gap: 0.75rem;
}
.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Pane-header buttons (search icon / clear / A-Z sort / count sort) match the
 * pane search input's height. SearchPanes makes them taller (line-height:20px,
 * 1rem font, and inconsistent padding between buttons), so force a fixed height
 * equal to a 0.85rem form-control and flex-centre the glyphs. */
div.dtsp-panesContainer div.dtsp-searchPane div.dtsp-topRow button {
  height: calc(1.275rem + 0.75rem + 2px) !important; /* form-control height @ 0.85rem font */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
div.dtsp-panesContainer div.dtsp-searchPane div.dtsp-topRow button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Long option labels wrap inside the pane instead of pushing the count pill
 * out of view behind a horizontal scrollbar. */
div.dtsp-panesContainer div.dtsp-searchPane table {
  table-layout: fixed;
  width: 100% !important;
}
div.dtsp-panesContainer div.dtsp-searchPane .dtsp-name {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Hide SearchPanes' built-in "Filters Active - N / Clear All" header row —
 * the toolbar's Filters toggle + Clear-all already cover it. */
.dtsp-titleRow {
  display: none !important;
}

/* Workflow-status badge: purple for "in review" (Bootstrap has no purple
 * .text-bg-* utility). Pairs with the `status_badge` filter in gns_tags. */
.text-bg-purple {
  color: #fff;
  background-color: var(--bs-purple, #6f42c1) !important;
}

/* The run page's "awaiting review" banner - a light tint of the badge purple. */
.alert-purple {
  --bs-alert-color: var(--bs-body-color);
  --bs-alert-bg: #efe9fa;
  --bs-alert-border-color: #d8c9f3;
}

/* HTMX request indicators: fully remove from layout when idle (htmx's own
 * default only fades opacity, leaving a reserved gap inside buttons). */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Full-surface busy overlay (an hx-indicator target): covers its positioned
 * parent — e.g. a modal-content — and blocks interaction with everything
 * under it while the HTMX request runs. */
.busy-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: rgba(var(--bs-body-bg-rgb), 0.75);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.busy-overlay.htmx-request {
  display: flex;
}

/* Atosa wordmark (components/_atosa_wordmark.html): the brand mark used
   wherever the integration is referred to; muted = not linked. */
.atosa-wordmark { vertical-align: -0.15em; }
.atosa-wordmark-muted { filter: grayscale(1); opacity: 0.45; }