/* expensewatch — project-level custom CSS.
 *
 * Linked from templates/base.html. Lives here (not as inline <style>
 * blocks per template) per the UI foundations discussion
 * (docs/discussions/2026-04-29-ui-foundations.md §2.14): the second
 * custom CSS rule the project needed graduated us off inline styles.
 * The first such rule was the .category-row hover transition; the
 * second is the .htmx-indicator loading state. Adding more rules?
 * Add them here, not inline in templates.
 */

/* Subtle hover affordance on the recursive Category tree rows
 * (apps/expenses/templates/expenses/category_list.html). The transition
 * gives a tactile "this row is interactive" cue without a heavy
 * Bootstrap table-hover treatment that would also draw lines around the
 * rows.
 */
.category-tree .category-row {
  transition: background-color 0.15s ease-in-out;
}
.category-tree .category-row:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

/* HTMX loading indicator. Any element with class="htmx-indicator" is
 * hidden by default and revealed during in-flight HTMX requests. HTMX
 * toggles the .htmx-request class on the element issuing the request
 * (or one named via hx-indicator), and we transition opacity for a
 * non-jarring reveal. Pattern from the htmx.org docs.
 */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Tom Select wrap-bug guard. Tom Select 2.6's Bootstrap 5 theme sets
 * `min-width: 7em` (~112px) on the search input inside .ts-control.
 * `.ts-control` is `display: flex; flex-wrap: wrap`. Combined with
 * any column narrower than ~150px of usable space (i.e. col-md-2 in
 * a Bootstrap container, ~190px outer, ~140px after padding), the
 * .item pill (e.g. "2026", ~34px) plus a 112px min-width input
 * exceeds the container — flex-wrap pushes the input below the pill,
 * doubling the visible height of the field.
 *
 * Setting min-width: 0 lets flex-shrink reclaim space; flex-grow:1
 * still expands the input to fill any remaining row width.
 *
 * Originally diagnosed in the browser-MCP session 2026-05-01 with
 * scope `.ts-wrapper.form-select-sm` because we hypothesized the
 * compact size variant was the trigger. It wasn't — the wrap is
 * fundamentally about the column width vs the input's min-width.
 * Re-targeted to `.ts-combobox` so the rule applies to every Tom
 * Select widget on the project regardless of size variant.
 */
.ts-wrapper.ts-combobox .ts-control > input {
  min-width: 0;
}

/* Dashboard chart containers (Dashboard arc sub-step 6).
 *
 * Every ApexCharts chart on /dashboard/ renders into an element
 * carrying this class -- e.g. <div id="category-breakdown-chart"
 * class="dashboard-chart" data-chart-data="...">. ApexCharts injects
 * its own SVG markup into the container at render time.
 *
 * Width is responsive (100% of the column ApexCharts is given). Height
 * is set in JS via the per-plot options builder (see APEX_OPTIONS_
 * BUILDERS in templates/base.html) so each chart picks the height
 * appropriate for its shape -- a horizontal bar with many categories
 * may want more height than a single-line spark.
 *
 * Min-height is set here as a fallback so empty / mid-render
 * containers don't collapse to zero height and shift layout.
 */
.dashboard-chart {
  width: 100%;
  min-height: 200px;
}

/* §4.2.4 sankey styled hover tooltip (Dashboard arc sub-step 6).
 *
 * The dark floating box shown when hovering a sankey link or node on
 * /dashboard/. A SINGLE element is created lazily by getSankeyTooltip()
 * in static/js/main.js, appended to <body>, and reused across renders
 * + HTMX swaps. Its visibility + position are driven by JS (opacity
 * toggled on mouseover/out, left/top set on mousemove); this rule only
 * defines the appearance.
 *
 * Toggled on/off by SANKEY_STYLED_TOOLTIP in main.js -- when false,
 * the chart falls back to native SVG <title> tooltips and this element
 * is never created. pointer-events:none so the box never intercepts
 * the mouse (which would cause flicker). z-index above Bootstrap's
 * fixed/sticky layers so it floats over the dashboard chrome.
 */
.sankey-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  line-height: 1.35;
  max-width: 320px;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 1080;
}
