/*
 * Qualis Application Styles
 *
 * Design tokens and structural rules that Tailwind cannot express
 * via utility classes alone. The Tailwind theme in
 * app/assets/tailwind/application.css handles component styling.
 *
 * Google Fonts (Rubik) is loaded via CDN preconnect in the layout.
 */

/* ==========================================================================
   Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Brand Colors — matched to dmeapp's Bootstrap palette */
  --q-color-primary: #428bca;
  --q-color-primary-dark: #3276b1;
  --q-color-success: #5cb85c;
  --q-color-danger: #d9534f;
  --q-color-warning: #f0ad4e;
  --q-color-info: #5bc0de;

  /* Environment Indicators */
  --q-color-staging-bg: rgba(214, 184, 222, 0.75);

  /* Typography */
  --q-font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --q-font-size-base: 14px;
  --q-font-size-sm: 12px;
  --q-font-size-xs: 10px;
}

/* ==========================================================================
   Environment Indicators
   ========================================================================== */

body.environment-staging {
  background-color: var(--q-color-staging-bg);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

body.print {
  padding-top: 0;
}

body.print nav,
body.print footer {
  display: none;
}

/* Browser-native print (the "Print" button calls window.print()). dmeapp's
   Bootstrap print stylesheet stripped the page chrome so only the data table
   printed; mirror that so the ordered-items "Print" output is the breadcrumb
   + table rather than every filter form (parity QE-230). Elements opting out
   carry the +no-print+ class; the rich filter toolbars carry +filter+. */
@media print {
  nav,
  footer,
  .no-print,
  .filter {
    display: none !important;
  }

  /* QE-230 (E4): the sticky-header rule caps table wrappers at max-height:75vh
     with overflow:auto in @layer base, which is NOT media-scoped — so when the
     "Print" button fires window.print(), the printed table is clipped to 75vh
     and the remaining rows are cut off. Unclamp the wrapper for print so the
     FULL table renders across pages (the on-screen 75vh scroll box is unchanged). */
  .overflow-x-auto:has(> table) {
    max-height: none !important;
    overflow: visible !important;
  }

  .overflow-x-auto:has(> table) thead th {
    position: static !important;
  }
}

/* ==========================================================================
   Autocomplete dropdown (search filters: patient / team / vendor / invoice)
   dmeapp's typeahead drops a long list down the page; mirror that height so
   results aren't crammed into a short box (QE-195). The Stimulus controller
   appends <li>s; these rules style the menu and its rows regardless of whether
   Tailwind compiled the arbitrary utilities. The parent field div is
   position:relative, so the menu anchors to it.
   ========================================================================== */
.autocomplete-results {
  max-height: 75vh;
}

.autocomplete-results li:hover {
  background-color: var(--q-color-primary);
  color: #fff;
}

/* Matched-text highlight: bold purple, matching dmeapp's Bootstrap highlight
   (#6f42c1) rather than the blue accent / default yellow <mark> (QE-195). */
.autocomplete-results mark {
  background-color: transparent;
  color: #6f42c1;
  font-weight: 700;
}

/* Keep the highlight readable on the hovered (purple-bg) row. */
.autocomplete-results li:hover mark {
  color: #fff;
}