:root{

    /**************************
    COLORS
    **************************/

    --eu-primary:#0A4B78;
    --eu-primary-hover:#08395C;

    --eu-secondary:#EAF4FB;

    --eu-success:#198754;

    --eu-warning:#FFC107;

    --eu-danger:#DC3545;

    --eu-info:#0DCAF0;

    --eu-required-color:#dc2626;


    /**************************
    BACKGROUND
    **************************/

    --eu-bg:#F6F8FB;

    --eu-card:#FFFFFF;

    --eu-header:#FFFFFF;


    /**************************
    TEXT
    **************************/

    --eu-text:#1F2937;

    --eu-text-light:#6B7280;

    --eu-text-soft:#64748b;

    --eu-text-muted:#64748b;


    /**************************
    TYPOGRAPHY (enterprise HMIS scale)
    **************************/

    --eu-font-sans: Inter, system-ui, sans-serif;

    --eu-font-page: 20px;
    --eu-font-page-weight: 700;

    --eu-font-page-sub: 13px;
    --eu-font-page-sub-weight: 400;

    --eu-font-section: 14px;
    --eu-font-section-weight: 600;

    --eu-font-card: 13px;
    --eu-font-card-weight: 600;

    --eu-font-body: 13px;
    --eu-font-body-weight: 400;

    --eu-font-label: 12px;
    --eu-font-label-weight: 500;

    --eu-font-meta: 11px;
    --eu-font-meta-weight: 500;

    --eu-font-kpi: 22px;
    --eu-font-kpi-weight: 700;


    /**************************
    BORDER
    **************************/

    --eu-border:#DCE3EA;


    /**************************
    RADIUS
    **************************/

    --eu-radius-sm:4px;

    --eu-radius-md:8px;

    --eu-radius-lg:12px;


    /**************************
    SPACING
    **************************/

    --eu-space-xs:4px;

    --eu-space-sm:8px;

    --eu-space-md:16px;

    --eu-space-lg:24px;

    --eu-space-xl:32px;


    /**************************
    SHADOW
    **************************/

    --eu-shadow:

            0 1px 2px rgba(0,0,0,.08);

}
.eu-page{

    padding:24px;

}



.eu-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.eu-section-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

}
body{

    font-family: var(--eu-font-sans);

    font-size: var(--eu-font-body);

    font-weight: var(--eu-font-body-weight);

    color: var(--eu-text);

    background: var(--eu-bg);

}


/**************/

.eu-page-title{

    font-size: var(--eu-font-page);

    font-weight: var(--eu-font-page-weight);

    line-height: 1.2;

    letter-spacing: -0.02em;

    margin: 0;

    color: var(--eu-text);

}


/**************/

.eu-page-subtitle{

    font-size: var(--eu-font-page-sub);

    font-weight: var(--eu-font-page-sub-weight);

    line-height: 1.45;

    color: var(--eu-text-muted);

}


/**************/

.eu-card-title,
.eu-card__title,
.eu-card__title-text{

    font-size: var(--eu-font-card);

    font-weight: var(--eu-font-card-weight);

}


/**************/

.eu-section-title{

    font-size: var(--eu-font-section);

    font-weight: var(--eu-font-section-weight);

}


/**************/

.eu-label{

    font-size: var(--eu-font-meta);

    font-weight: 700;

}


/**************/

.eu-help{

    font-size: var(--eu-font-label);

    color: var(--eu-text-muted);

}


/**************/

.eu-error{

    font-size: var(--eu-font-label);

    color: var(--eu-danger);

}
.eu-grid{
    display:grid;
    gap:16px;
}

.eu-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.eu-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.eu-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.eu-grid-5{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.eu-grid-6{
    grid-template-columns:repeat(6,minmax(0,1fr));
}

.eu-grid-span-2{
    grid-column:span 2;
}

.eu-grid-span-3{
    grid-column:1 / -1;
}



@media(max-width:1200px){

    .eu-grid-6,
    .eu-grid-5{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:992px){

    .eu-grid-6,
    .eu-grid-5,
    .eu-grid-4,
    .eu-grid-3{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .eu-grid{
        grid-template-columns:1fr !important;
    }

}
.eu-field{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.eu-input{

    height:40px;

    padding:8px 12px;

    border:1px solid var(--eu-border);

    border-radius:6px;

}

.eu-address-toolbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin:-43px 0 16px;
}


.eu-checkbox-container{
    margin-bottom:16px;
}

.eu-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.eu-section-title{
    margin:0;
}

.eu-checkbox-field{
    display:flex;
    align-items:center;
}

.eu-checkbox-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
}

/* Input only — never put this class on a wrapping <label> (it used to force 18×18 and wrap label text). */
input.eu-checkbox,
.eu-checkbox-label > input[type="checkbox"],
.eu-checkbox-field > input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    flex-shrink:0;
}

/* Legacy pattern: <label class="eu-checkbox">…</label> */
label.eu-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:auto;
    margin:0;
    cursor:pointer;
    font-weight:500;
}

label.eu-checkbox > input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    flex-shrink:0;
}

.eu-service-number-grid{
    display:grid;
    grid-template-columns:120px 1fr 120px;
    gap:16px;
    align-items:end;
}


.eu-input:focus{

    outline:none;

    border-color:var(--eu-primary);

}

.eu-label {
    display: flex;
    align-items: center;
    gap: var(--eu-space-xs);
    font-size: var(--eu-font-meta);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--eu-text-soft);
}

.eu-required {
    color: red !important;
    font-weight: 700;
}

.eu-service-number-grid{

    display:grid;

    grid-template-columns:140px 1fr 140px;

    gap:16px;

    align-items:end;

}
.eu-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;

    border-radius:8px;

    border:1px solid transparent;

    text-decoration:none;

    cursor:pointer;

    font-weight:600;

    transition:0.2s;

}

.eu-btn--primary{

    background:#2563eb;
    color:#fff;

}

.eu-btn--primary:hover{

    background:#1d4ed8;

}

.eu-btn--secondary{

    background:#fff;
    color:#374151;

    border:1px solid #d1d5db;

}

.eu-btn--secondary:hover{

    background:#f3f4f6;

}

.eu-btn--lg{

    padding:14px 28px;
    font-size:16px;

}
.eu-table{

    width:100%;

    border-collapse:collapse;

}

.eu-table th{

    background:#F3F5F7;

    padding:12px;

}

.eu-table td{

    padding:12px;

    border-bottom:1px solid #eee;

}
.eu-card{

    background:white;

    border:1px solid var(--eu-border);

    border-radius:8px;

    padding:24px;

    box-shadow:var(--eu-shadow);

}


.eu-card-header{

    margin-bottom:20px;

}


.eu-card-body{

    display:flex;

    flex-direction:column;

    gap:16px;

}
/* Shared CDSS findings — Prescribe, Pharmacy, MAR (tokens only). */

.eu-cdss-findings,
.clw-rx-alerts {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.eu-cdss-finding,
.clw-rx-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--eu-radius-sm, 4px);
  border: 1px solid transparent;
  font-size: 0.75rem;
  line-height: 1.35;
}

.eu-cdss-finding__badge,
.clw-rx-alert__badge {
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

.eu-cdss-finding--HIGH,
.eu-cdss-finding--blocking,
.eu-cdss-finding--hard_stop,
.eu-cdss-finding--danger,
.clw-rx-alert--HIGH,
.clw-rx-alert--blocking,
.clw-rx-alert--hard_stop,
.clw-rx-alert--danger {
  color: var(--eu-danger-text, #991b1b);
  background: var(--eu-danger-bg, #fef2f2);
  border-color: var(--eu-danger, #dc3545);
}

.eu-cdss-finding--MEDIUM,
.eu-cdss-finding--warning,
.clw-rx-alert--MEDIUM,
.clw-rx-alert--warning {
  color: var(--eu-warning-text, #92400e);
  background: var(--eu-warning-bg, #fef3c7);
  border-color: var(--eu-warning, #ffc107);
}

.eu-cdss-finding--LOW,
.eu-cdss-finding--DATA_MISSING,
.eu-cdss-finding--info,
.clw-rx-alert--LOW,
.clw-rx-alert--DATA_MISSING,
.clw-rx-alert--info {
  color: var(--eu-text, #1f2937);
  background: var(--eu-secondary, #eaf4fb);
  border-color: var(--eu-info, #0dcaf0);
}

.eu-cdss-strip {
  display: grid;
  gap: 8px;
}

.eu-cdss-strip__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eu-text-light, #6b7280);
}

.eu-cdss-strip__family {
  font-weight: 600;
  font-size: 0.75rem;
}

.eu-cdss-strip__msg {
  font-size: 0.8125rem;
}
/* Reusable Dose Calculator dialog (PEUF — tokens only). */

.eu-dose-calc {
  width: min(420px, 94vw);
  padding: 0;
  border: 1px solid var(--eu-border);
  border-radius: var(--eu-radius-md, 8px);
  background: var(--eu-surface, #fff);
  color: var(--eu-text);
  box-shadow: var(--eu-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.18));
}

.eu-dose-calc::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.eu-dose-calc__head,
.eu-dose-calc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--eu-border);
}

.eu-dose-calc__foot {
  border-bottom: 0;
  border-top: 1px solid var(--eu-border);
  justify-content: flex-end;
}

.eu-dose-calc__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.eu-dose-calc__body {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.eu-dose-calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.eu-dose-calc__result {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--eu-radius-sm, 4px);
  border: 1px solid var(--eu-border);
  background: var(--eu-surface-muted, #f8fafc);
  font-size: 0.875rem;
}

.eu-dose-calc__result strong {
  font-size: 1.125rem;
}

.eu-dose-calc__error {
  margin: 0;
  color: var(--eu-danger, #b91c1c);
  font-size: 0.75rem;
}

.eu-dose-calc__drug {
  font-size: 0.8125rem;
  color: var(--eu-text-muted);
}
/* Shared form-builder shell — all modules. Tokens only. */

.eu-form-builder {
  display: flex;
  flex-direction: column;
  gap: var(--eu-space-md);
}

.eu-form-builder__steps {
  display: flex;
  gap: var(--eu-space-sm);
  flex-wrap: wrap;
}

.eu-form-builder__step {
  display: inline-flex;
  align-items: center;
  gap: var(--eu-space-sm);
  border: 1px solid var(--eu-border);
  background: var(--eu-card);
  color: var(--eu-text);
  padding: var(--eu-space-xs) var(--eu-space-sm);
  border-radius: var(--eu-radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
}

.eu-form-builder__step.is-current {
  border-color: var(--eu-primary);
  background: var(--eu-secondary);
  font-weight: 600;
}

.eu-form-builder__step-num {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eu-bg);
  font-size: 0.75rem;
}

.eu-form-builder__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 0.9fr) minmax(22rem, 1.4fr) minmax(18rem, 1.1fr);
  gap: var(--eu-space-md);
  align-items: stretch;
  height: min(70vh, 44rem);
  min-height: 22rem;
}

.eu-form-builder__grid--capture {
  grid-template-columns: minmax(12rem, 0.8fr) minmax(22rem, 2.2fr);
}

.eu-form-builder__col {
  border: 1px solid var(--eu-border);
  border-radius: var(--eu-radius-md);
  background: var(--eu-card);
  padding: var(--eu-space-md);
  min-height: 0;
  overflow: auto;
}

.eu-form-builder__col--preview {
  background: var(--eu-bg);
}

.eu-form-builder__col-title {
  margin: 0 0 var(--eu-space-sm);
  font-size: 0.875rem;
  font-weight: 600;
}

.eu-form-builder__nav-item {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: var(--eu-space-xs);
  border: 1px solid var(--eu-border);
  background: var(--eu-card);
  padding: var(--eu-space-sm);
  border-radius: var(--eu-radius-sm);
  cursor: pointer;
}

.eu-form-builder__nav-item.is-current {
  border-color: var(--eu-primary);
  background: var(--eu-secondary);
}

.eu-form-builder__field {
  border: 1px solid var(--eu-border);
  border-radius: var(--eu-radius-md);
  padding: var(--eu-space-sm) var(--eu-space-md);
  margin-bottom: var(--eu-space-sm);
  background: var(--eu-bg);
}

.eu-form-builder__field-head {
  display: flex;
  align-items: center;
  gap: var(--eu-space-sm);
  margin-bottom: var(--eu-space-sm);
}

.eu-form-builder__field-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eu-space-sm) var(--eu-space-md);
}

.eu-form-builder__kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eu-space-sm);
  margin: var(--eu-space-sm) 0;
}

.eu-form-builder__kind {
  text-align: left;
  border: 1px solid var(--eu-border);
  background: var(--eu-card);
  padding: var(--eu-space-sm);
  border-radius: var(--eu-radius-sm);
  cursor: pointer;
}

.eu-form-builder__kind span {
  display: block;
  font-size: 0.75rem;
  color: var(--eu-text-light);
}

.eu-form-builder__preview-title {
  font-weight: 700;
  margin-bottom: var(--eu-space-sm);
}

.eu-form-builder__preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eu-space-sm) var(--eu-space-md);
}

.eu-form-builder__preview-grid > .eu-form-builder__col-title,
.eu-form-builder__preview-field.is-wide {
  grid-column: 1 / -1;
}

.eu-form-builder__preview-field {
  margin: 0;
}

.eu-form-builder__preview-field.is-ruled {
  opacity: 0.45;
}

.eu-form-builder__preview-label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.eu-form-builder__preview-control {
  display: flex;
  gap: var(--eu-space-sm);
  align-items: center;
  width: 100%;
}

.eu-form-builder__preview-control .eu-input {
  width: 100%;
}

.eu-form-builder__actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: var(--eu-space-sm);
  align-items: center;
  padding: var(--eu-space-sm) 0;
  background: var(--eu-bg);
  border-top: 1px solid var(--eu-border);
}

.eu-form-builder__empty {
  color: var(--eu-text-light);
  font-size: 0.875rem;
}

.eu-form-builder__option-value {
  display: flex;
  align-items: center;
  gap: var(--eu-space-sm);
  margin: var(--eu-space-xs) 0;
}

.eu-form-builder__mark {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--eu-border);
  border-radius: 999px;
  flex: none;
}

.eu-form-builder__rule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eu-space-sm);
  align-items: center;
  margin-bottom: var(--eu-space-sm);
}

.eu-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eu-space-sm);
  border: 0;
  margin: var(--eu-space-sm) 0;
  padding: 0;
}

.eu-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--eu-space-xs);
  border: 1px solid var(--eu-border);
  border-radius: 999px;
  padding: var(--eu-space-xs) var(--eu-space-sm);
  font-size: 0.8125rem;
  background: var(--eu-card);
}

.eu-chip:has(input:checked) {
  border-color: var(--eu-primary);
  background: var(--eu-secondary);
}

.eu-form-builder .eu-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--eu-space-xs);
  min-width: 0;
  width: 100%;
}

.eu-form-builder .eu-field > .eu-label {
  display: block;
  width: 100%;
  margin: 0;
}

.eu-form-builder .eu-input,
.eu-form-builder select.eu-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.eu-form-builder__basic,
.eu-form-builder__advanced,
.eu-form-builder__field-body,
.eu-form-builder__rule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eu-space-md);
  align-items: start;
}

.eu-form-builder__field-head [data-field-heading] {
  flex: 1;
  min-width: 0;
}

.eu-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eu-space-sm);
  border: 0;
  margin: 0;
  padding: var(--eu-space-xs) 0 0;
  min-height: var(--eu-field-h, 2.5rem);
  align-items: center;
}

.eu-form-builder__required {
  /* uses .eu-field stack */
}

.eu-form-builder__adv {
  grid-column: 1 / -1;
}

.eu-form-builder__drag {
  cursor: grab;
  color: var(--eu-text-light);
}

.eu-form-builder__span {
  grid-column: 1 / -1;
}

.eu-form-builder__drawer {
  margin-top: var(--eu-space-md);
  border-top: 1px solid var(--eu-border);
  padding-top: var(--eu-space-sm);
}

.eu-form-builder__drawer summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
}

@media (max-width: 1100px) {
  .eu-form-builder__grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .eu-form-builder__field-body,
  .eu-form-builder__kinds,
  .eu-form-builder__basic,
  .eu-form-builder__advanced,
  .eu-form-builder__preview-grid,
  .eu-form-builder__rule {
    grid-template-columns: 1fr;
  }
}
/*
 * Secondary document window.
 * Closed until [open]. Do not set display on the dialog without :not([open]),
 * or the window appears as soon as the page renders.
 */

dialog.eu-secondary-window:not([open]) {
  display: none;
}

dialog.eu-secondary-window[open] {
  position: fixed;
  top: 4vh;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  width: min(60rem, calc(100vw - 32px));
  height: 92vh;
  max-width: calc(100vw - 32px);
  max-height: 92vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 80;
  border: 1px solid var(--eu-border-subtle, #e5e7eb);
  border-radius: var(--eu-radius, 8px);
  background: var(--eu-surface-raised, #fff);
  color: var(--eu-text-primary, #111827);
}

dialog.eu-secondary-window::backdrop {
  background: color-mix(in srgb, var(--eu-text-primary, #111827) 28%, transparent);
}

.eu-secondary-window__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--eu-border-subtle, #e5e7eb);
}

.eu-secondary-window__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.eu-secondary-window__frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--eu-surface, #fff);
}
/*
 * Bundled at build time via Sprockets' own require directive (same pattern
 * as application.css's require_self) instead of CSS @import — @import only
 * gets resolved at build time for Sass/.scss files; for plain .css it's
 * passed through literally and the BROWSER ends up fetching each imported
 * file as its own separate, blocking request at runtime (this used to make
 * every page load ~5s slower). require keeps these as plain .css files
 * while still producing one bundled file.
 *












 */