/* ===========================================================================
   Superbill / Estimate v2 - guided form (assets/jq_sb_superbill_v2.js)
   Everything is scoped under .sb2-root so it cannot leak into v1 screens.
   =========================================================================== */

.sb2-root {
  --sb2-green: #2ecd99;
  --sb2-green-dark: #1b8e6b;
  --sb2-red: #ed6f56;
  --sb2-blue: #337ab7;
  --sb2-border: #e3e8ee;
  --sb2-muted: #8a94a0;
  --sb2-pending-bg: #f4f6f8;
}

/* Bootstrap's .btn / .alert display rules otherwise beat the [hidden] attribute */
.sb2-root [hidden] { display: none !important; }

/* --- title ---------------------------------------------------------------- */
.sb2-title-actions {
  display: flex;
  flex-direction: row-reverse;   /* first child sits at the far right */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.sb2-title-actions .pull-right { float: none !important; margin: 0 !important; }
.sb2-stamps { display: flex; gap: 1rem; }

/* --- sections --------------------------------------------------------------- */
.sb2-section {
  background: #fff;
  border: 1px solid var(--sb2-border);
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 14px 20px 18px;
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sb2-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sb2-border);
}
.sb2-section-title {
  margin: 0;
  /* pushes the head note and the state badge to the right, in that order */
  margin-right: auto;
  font-weight: 600;
  color: #212121;
  text-transform: none;
}
/* patient identifier: the one piece of the heading people read back aloud */
.sb2-head-note {
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--sb2-pending-bg);
  font-size: 14px;
  font-weight: 600;
  color: #212121;
  letter-spacing: .2px;
}
.sb2-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sb2-green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb2-step-num i { font-size: 10px; }
.sb2-step-badge { font-size: 12px; }
.sb2-step-badge[data-state="complete"] { color: var(--sb2-green-dark); }
.sb2-step-badge[data-state="current"]  { color: var(--sb2-red); }

.sb2-section.is-current {
  border: 2px solid var(--sb2-green);
  padding: 13px 19px 17px;          /* keeps the box from growing by the extra border */
  box-shadow: 0 0 0 3px rgba(46, 205, 153, .12);
}
.sb2-section.is-pending {
  background: var(--sb2-pending-bg);
  opacity: .55;
}
.sb2-section.is-pending .sb2-step-num { background: #c5ccd3; }
.sb2-section.is-pending .sb2-section-title { color: var(--sb2-muted); }

/* --- field grid ------------------------------------------------------------- */
.sb2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
  align-items: center;
}
.sb2-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sb2-field > .control-label {
  flex: 0 0 120px;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.2;
}
.sb2-control { flex: 1 1 auto; min-width: 0; }
.sb2-control .select2-container { width: 100% !important; }
.sb2-inline-hint {
  grid-column: span 2;
  margin: 0;
  background: #f0c541;
  padding-left: 10px;
  font-size: 12px;
  color: #212121;    
  border-radius: 4px;
}
/* a field that needs more room than one column - e.g. long clinic names */
.sb2-field--wide { grid-column: span 2; }
/* sections that stack several one-row grids keep the grid's own row rhythm */
.sb2-section-body > .sb2-grid + .sb2-grid { margin-top: 12px; }
.sb2-input-group { display: flex; width: 100%; }
.sb2-input-group > div:first-child { flex: 1 1 auto; min-width: 0; }
.sb2-input-group > .input-group-addon { width: auto; display: flex; align-items: center; }
.sb2-upload-picker { display: flex; align-items: center; gap: 10px; }
.sb2-upload-picker input[type="file"] { flex: 1 1 auto; min-width: 0; }

@media (max-width: 991px) {
  .sb2-grid { grid-template-columns: 1fr; }
  /* span 2 against a single track would add an implicit column */
  .sb2-inline-hint,
  .sb2-field--wide { grid-column: auto; }
}
.info-label-box{
  max-width: 600px;
}

/* --- required markers ------------------------------------------------------- */
/* The marker sits on the control and on its wrapper, so the colour survives a
   plain <select> being upgraded to select2 on first hover. */
.sb2-root input.sb2-invalid,
.sb2-root select.sb2-invalid,
.sb2-root .sb2-invalid .select2-selection,
.sb2-root .sb2-invalid .select2-selection--single,
.sb2-root .sb2-invalid .select2-selection--multiple,
/* style.css gives this inner element a form-control border of its own, which
   would otherwise paint over the red on the element around it */
.sb2-root .sb2-invalid .select2-selection__rendered,
/* also as a sibling, in case select2 lands outside the marked wrapper */
.sb2-root .sb2-invalid + .select2-container .select2-selection {
  border-color: var(--sb2-red) !important;
}

/* --- items ------------------------------------------------------------------ */
.sb2-hint {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-left: 3px solid #a27d0c;
  background: #f0c541;
  color: #212121;
  font-size: 12px;
}
.sb2-hint.is-alert { border-left-color: var(--sb2-red); }
.sb2-employer-warning { color: #212121; }

.sb2-items-wrap { overflow-x: auto; }
.sb2-items { min-width: 980px; margin-bottom: 0; }
.sb2-items > thead > tr > th {
  padding: 8px 6px;
  border-bottom: 1px solid var(--sb2-border);
  font-size: 12px;
  font-weight: 600;
  color: #212121;
  text-transform: none;
  white-space: nowrap;
  vertical-align: bottom;
}
.sb2-items > tbody > tr > td {
  padding: 8px 6px;
  font-size: 13px;
  vertical-align: middle;
}
.sb2-items td[data-col="item"] { min-width: 220px; }
.sb2-items .sb2-cell-dd { min-width: 120px; }
.sb2-items .sb2-cell-dd .select2-container { width: 100% !important; }
.sb2-items .input-sm { height: 34px; }
.sb2-items td[data-col="units"] input { width: 70px; }
.sb2-items td[data-col="aff"] input { width: 95px; }
.sb2-items td[data-col="start"] input,
.sb2-items td[data-col="end"] input { width: 115px; }
.sb2-items input:disabled { background: #f0f2f4; }

/* A locked dropdown - Auth ID on an item the server does not flag as a
   procedure - reads as disabled. style.css paints select2 white regardless of
   state, so the greying is spelled out here for both the raw select and the
   select2 control that replaces it. */
.sb2-root select:disabled,
.sb2-root .select2-container--disabled .select2-selection,
.sb2-root .select2-container--disabled .select2-selection__rendered {
  background-color: #f0f2f4 !important;
  color: var(--sb2-muted) !important;
  cursor: not-allowed;
}
/* custom.css draws the arrow as a rotated chevron from these two borders */
.sb2-root .select2-container--disabled .select2-selection__arrow b {
  border-right-color: var(--sb2-muted);
  border-bottom-color: var(--sb2-muted);
}
.sb2-na { color: var(--sb2-muted); }

.sb2-empty > td {
  padding: 28px 0 !important;
  text-align: center;
  color: var(--sb2-muted);
  background: var(--sb2-pending-bg);
}
.sb2-item-row.is-editing > td { background: #fbfdfc; }
.sb2-item-row.is-addon > td { background: #fffbea; }
.sb2-linked-badge { margin-left: 5px; background: #f0c541; color: #212121; }
.sb2-auto-badge { margin-left: 6px; background: #999; }

.sb2-col-actions { width: 1%; text-align: right; white-space: nowrap; }
.sb2-icon-btn {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb2-row-edit   { background: #e3edf8; color: var(--sb2-blue); }
.sb2-row-apply  { background: #dff6ee; color: var(--sb2-green-dark); }
.sb2-row-delete,
.sb2-row-cancel { background: #fbe4df; color: var(--sb2-red); }
.sb2-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.sb2-icon-btn:focus-visible { outline: 2px solid var(--sb2-blue); outline-offset: 2px; }

/* Auth ID labels read "<auth>(<joint> - <injectate>)", too long for a default
   cell. Widen the closed control; select2 keeps its own title attribute, so the
   full text is still available on hover when it ellipsizes. */
.sb2-items td[data-col="auth"] .sb2-cell-dd { min-width: 190px; }

/* select2 renders its panel at the width of the control and appends it to the
   body, out of reach of .sb2-root - so scope by the results list, whose id
   carries the field name, and let the panel size to its content instead. */
.select2-dropdown:has(ul[id^="select2-sb2-"]) {
  min-width: 300px;
  width: auto !important;
}
.select2-dropdown:has(ul[id^="select2-sb2-"]) .select2-results__option {
  white-space: normal;
  overflow-wrap: anywhere;
}

.sb2-sedation-note { margin-top: 10px; font-size: 12px; color: #5b6570; }
.sb2-sed-summary { margin-left: 6px; color: var(--sb2-muted); }
.sb2-items-footer { display: flex; justify-content: flex-end; margin-top: 12px; }

/* --- footer ----------------------------------------------------------------- */
.sb2-notes { margin-bottom: 16px; }

/* Notes tabs on the left, the billing-edit reminder beside them. The tab strip
   keeps the underline, so it moves to the row that now holds both. */
.sb2-notes-head {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--sb2-border);
}
.sb2-notes-head > .nav-tabs { flex: 0 0 auto; border-bottom: 0; }
.sb2-note-hint {
  margin: 0 auto;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f0c541;
  color: #212121;
  font-size: 12px;
}
.sb2-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 0 30px;
}