/* =============================================================================
 * hypen-align.css — thin composition-alignment layer (Hypen Design System)
 * -----------------------------------------------------------------------------
 * Load IMMEDIATELY AFTER hypen-tokens.css (the last two stylesheets in the
 * layout head). IDENTICAL copy in every app; master reference:
 *   master-portal: docs/analysis/design-tokens/hypen-align.css
 *
 * Tokens fix VALUES (font sizes, neutrals, radius, sidebar width, spacing,
 * accent) globally. They CANNOT fix component-COMPOSITION drift — e.g. apps
 * whose card-body rule references var(--space-6) instead of var(--space-5):
 * both vars keep their (now-canonical) values, so the alias can't move that
 * rule. This file re-asserts the canonical component composition on the SAME
 * selectors the apps already emit — still global, still selector-based, never
 * page-by-page. !important is reserved for the few padding rules that must beat
 * higher-specificity app overrides.
 *
 * On iqms this is mostly a no-op (already canonical); it is the heavy lifter on
 * ihr / flexidocs / omnigest. Keeping it identical everywhere is the point.
 * ========================================================================== */

/* card padding: pull any 24px-body / 24px-header app back to 20px / 16px·20px */
.hn-card-body, .card-body     { padding: var(--hn-card-pad) !important; }
.hn-card-header, .card-header  { padding: var(--hn-card-header-pad) !important; }
.hn-card-footer, .card-footer  { padding: var(--hn-card-footer-pad); }

/* inputs: uniform 40px floor, 14px text, 6px radius across every app */
.hn-input, .form-control, .form-select {
  min-height: var(--hn-input-h);
  font-size: var(--hn-input-font);
  border-radius: var(--hn-input-radius);
}

/* sidebar logo header: canonical 64px */
.hn-sidebar-logo, .sidebar-logo { height: var(--hn-sidebar-logo-h); }

/* page titles: pin to canonical h1 (24px / 700). Overrides bespoke per-page
   hero blow-ups (e.g. flexidocs dashboard-modern .dashboard-hero .page-title
   clamp 2.55–3.9rem → 41-62px) so the page title is identical in every app.
   Design system stays authoritative; loaded last + !important beats the clamp. */
.page-title {
  font-size: var(--hn-h1) !important;
  font-weight: var(--hn-h1-weight) !important;
  line-height: 1.25;
}

/* keep a comfortable touch target on coarse pointers (iPortal clinical/bedside) */
@media (pointer: coarse) {
  .hn-input, .form-control, .form-select { min-height: 44px; }
}