:root {
  --orders-border: #e1e4ea;
  --orders-heading: #111827;
  --orders-text: #374151;
  --orders-muted: #6b7280;
  --orders-success: #047857;
  --orders-warning: #ca8a04;

  --orders-lab-bg: #eff6ff;
  --orders-lab-border: #bfdbfe;
  --orders-lab-text: #1d4ed8;

  --orders-imaging-bg: #faf5ff;
  --orders-imaging-border: #e9d5ff;
  --orders-imaging-text: #7c3aed;

  --orders-med-bg: #ecfdf5;
  --orders-med-border: #a7f3d0;
  --orders-med-text: #047857;
}

#transcriptPanelOutlet:has(#ordersTab),
.active-transcript-panel:has(#ordersTab),
.output.orders-tab {
  min-height: 0;
  overflow: hidden;
}

.orders-tab {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}

.orders-scroll {
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 4px 16px 0;
}

/* Header */
.orders-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.orders-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.orders-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--orders-heading);
}

.orders-header-title > i {
  color: var(--blue, #2563eb);
}

.orders-header-subtitle {
  font-size: 12px;
  color: var(--orders-muted);
}

.orders-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.orders-btn-redetect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue, #2563eb);
  background: none;
  border: 1px solid var(--orders-border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.orders-btn-redetect:hover:not(:disabled) {
  background-color: #eff6ff;
  border-color: var(--blue, #2563eb);
}

.orders-btn-redetect:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.orders-btn-redetect i {
  font-size: 11px;
}

.orders-btn-select {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.orders-btn-select-all {
  color: var(--blue, #2563eb);
}

.orders-btn-select-all:hover {
  background-color: #eff6ff;
}

.orders-btn-select-none {
  color: var(--orders-muted);
}

.orders-btn-select-none:hover {
  background-color: #f3f4f6;
}

/* Order type group cards */
.orders-group {
  border-radius: 12px;
  border: 1px solid var(--orders-border);
  overflow: visible;
}

.orders-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

.orders-group-header > i {
  font-size: 14px;
}

.orders-group-label {
  font-size: 14px;
  font-weight: 600;
}

.orders-group-count {
  margin-left: auto;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #fff;
  font-weight: 500;
}

/* Per-type colors */
.orders-group.type-lab .orders-group-header {
  background-color: var(--orders-lab-bg);
}

.orders-group.type-lab .orders-group-header > i,
.orders-group.type-lab .orders-group-label,
.orders-group.type-lab .orders-group-count {
  color: var(--orders-lab-text);
}

.orders-group.type-lab {
  border-color: var(--orders-lab-border);
}

.orders-group.type-imaging .orders-group-header {
  background-color: var(--orders-imaging-bg);
}

.orders-group.type-imaging .orders-group-header > i,
.orders-group.type-imaging .orders-group-label,
.orders-group.type-imaging .orders-group-count {
  color: var(--orders-imaging-text);
}

.orders-group.type-imaging {
  border-color: var(--orders-imaging-border);
}

.orders-group.type-med .orders-group-header,
.orders-group.type-prescription .orders-group-header {
  background-color: var(--orders-med-bg);
}

.orders-group.type-med .orders-group-header > i,
.orders-group.type-med .orders-group-label,
.orders-group.type-med .orders-group-count,
.orders-group.type-prescription .orders-group-header > i,
.orders-group.type-prescription .orders-group-label,
.orders-group.type-prescription .orders-group-count {
  color: var(--orders-med-text);
}

.orders-group.type-med,
.orders-group.type-prescription {
  border-color: var(--orders-med-border);
}

/* Order items */
.orders-group-items {
  border-top: 1px solid #f3f4f6;
}

.orders-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
  min-height: 76px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid #f3f4f6;
}

.orders-item:last-child {
  border-bottom: none;
}

.orders-item:hover {
  background-color: #f9fafb;
}

.orders-item.deselected {
  background-color: #f9fafb;
  opacity: 0.6;
}

.orders-item.review-needed {
  background-color: #fffbeb;
  opacity: 1;
  cursor: default;
}

/* Disabled checkbox state (used after submit). */
.orders-item input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.orders-item.submitted-selected {
  background-color: #f0fdf4;
}

.orders-item input[type='checkbox'] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  accent-color: var(--blue, #2563eb);
  cursor: pointer;
  flex-shrink: 0;
}

.orders-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orders-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.orders-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--orders-heading);
  line-height: 1.35;
  word-break: break-word;
  /* min-width:0 lets the name shrink/wrap inside the flex row instead of
     pushing badges out of alignment. The badges then sit on the line
     after the name when it gets long, instead of awkwardly hugging the
     wrapped portion. */
  min-width: 0;
  flex: 1 1 auto;
}

.orders-item-details {
  font-size: 12px;
  color: var(--orders-muted);
  line-height: 1.4;
  word-break: break-word;
}

.orders-item-dx {
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  word-break: break-word;
}

.orders-item-review {
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}

.orders-item-dx-dot {
  width: 5px;
  height: 5px;
  background-color: #9ca3af;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Badges */
.orders-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.orders-badge-routine {
  background-color: #f3f4f6;
  color: #4b5563;
}

.orders-badge-stat {
  background-color: #fee2e2;
  color: #b91c1c;
}

.orders-badge-review-needed {
  background-color: #fef3c7;
  color: #92400e;
}

.orders-badge-urgent {
  background-color: #ffedd5;
  color: #c2410c;
}

.orders-badge-once {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.orders-badge-prn {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.orders-badge-drafted {
  background-color: #dcfce7;
  color: #15803d;
}

/* Unmapped select dropdown */
.orders-unmapped-select {
  margin-top: 8px;
  font-size: 12px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 4px 8px;
  background-color: #fefce8;
  width: 100%;
}

.orders-unmapped-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.5);
}

/* Success banner */
.orders-success-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  gap: 8px;
}

.orders-partial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  gap: 8px;
}

.orders-partial-banner .orders-success-banner-left > i {
  color: #b45309;
}

.orders-partial-banner .orders-success-banner-text {
  color: #78350f;
}

.orders-success-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orders-success-banner-left > i {
  color: #059669;
  flex-shrink: 0;
}

.orders-success-banner-text {
  font-size: 14px;
  font-weight: 500;
  color: #065f46;
}

.orders-success-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orders-btn-edit {
  font-size: 12px;
  color: var(--orders-muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.orders-btn-edit:hover {
  color: var(--orders-heading);
}

/* Footer CTA */
.orders-footer {
  flex: 0 0 auto;
  background: #fff;
  padding: 16px 0 8px;
  border-top: 1px solid var(--orders-border);
}

.orders-footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.orders-footer-count {
  font-size: 14px;
  color: var(--orders-muted);
}

.orders-footer-count strong {
  color: var(--orders-heading);
}

.orders-footer-hint {
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}

.orders-btn-draft {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: var(--blue, #335df3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.orders-btn-draft:hover:not(:disabled) {
  opacity: 0.9;
}

.orders-btn-draft:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.orders-btn-draft.submitted {
  background-color: #059669;
}

/* Empty state */
.orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-top: 3rem;
  text-align: center;
  color: var(--orders-muted);
  gap: 16px;
}

.orders-graphic {
  background-color: var(--primaryAccentLighter, #eef2ff);
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
}

.orders-graphic > i {
  color: var(--blue, #2563eb);
  font-size: 32px;
}

.orders-empty h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--orders-heading);
  margin: 0;
}

.orders-empty-desc {
  font-size: 14px;
  max-width: 320px;
}

.orders-btn-detect {
  background-color: var(--blue, #335df3);
  border: none;
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.orders-btn-detect:hover {
  opacity: 0.9;
}

.orders-btn-detect:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Loading state */
.orders-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  gap: 12px;
}

.orders-loading-icon {
  width: 56px;
  height: 56px;
  background-color: #eff6ff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ordersPulse 2s ease-in-out infinite;
}

.orders-loading-icon > i {
  font-size: 28px;
  color: var(--blue, #2563eb);
}

.orders-loading-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--orders-heading);
}

.orders-loading-subtitle {
  font-size: 12px;
  color: var(--orders-muted);
}

.orders-loading-dots {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.orders-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--blue, #2563eb);
  animation: ordersBounce 1.4s ease-in-out infinite;
}

.orders-loading-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.orders-loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* Error state */
.orders-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  gap: 12px;
  color: var(--orders-muted);
}

.orders-error-icon {
  color: #ef4444;
  font-size: 32px;
}

.orders-error-msg {
  font-size: 14px;
  max-width: 320px;
}

.orders-btn-retry {
  background: none;
  border: 1px solid var(--orders-border);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--orders-text);
}

.orders-btn-retry:hover {
  background-color: #f9fafb;
}

/* Tab badge */
.orders-tab-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 600;
  margin-left: 4px;
}

.orders-tab-badge.pending {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.orders-tab-badge.drafted {
  background-color: #dcfce7;
  color: #15803d;
}

@keyframes ordersPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ordersBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}

/* Smaller-desktop fit (laptop screens, dev-tools docked, side panels open).
   Trims padding and lets header controls wrap so labels stop clipping
   without changing the layout on full-width displays. */
@media (max-width: 1280px) {
  .orders-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .orders-header-actions {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .orders-item {
    padding: 14px 14px;
    min-height: 0;
  }

  .orders-group-header {
    padding: 8px 14px;
  }

  .orders-footer-info {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .orders-footer-hint {
    flex-basis: 100%;
  }

  .orders-success-banner,
  .orders-partial-banner {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* =========================================================================
   Inline prescription editor (hybrid sig)
   Provider can override dose/unit/frequency/dispense/refills/sig before
   drafting. Mode badge shows whether the current values will post as
   structured fields or fall back to free-text unstructuredsig.
   ========================================================================= */
.orders-rx-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid var(--orders-border, #e5e7eb);
  border-radius: 6px;
  background-color: #fafbfc;
  /* Don't let the editor get clipped by an ancestor that misjudged its
     height (e.g. a flex sibling racing the textarea's resize). */
  flex-shrink: 0;
}

.orders-rx-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.orders-rx-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
}

.orders-rx-field-dose,
.orders-rx-field-qty,
.orders-rx-field-refills {
  width: 70px;
}

.orders-rx-field-unit {
  flex: 1 1 110px;
  min-width: 110px;
}

.orders-rx-field-freq {
  flex: 2 1 180px;
  min-width: 160px;
}

.orders-rx-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orders-muted, #6b7280);
}

.orders-rx-input {
  font-size: 13px;
  padding: 5px 7px;
  border: 1px solid var(--orders-border, #d1d5db);
  border-radius: 4px;
  background-color: #fff;
  color: var(--orders-text, #111827);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.orders-rx-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.orders-rx-input:disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.orders-rx-sig {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orders-rx-sig-input {
  resize: vertical;
  min-height: 48px;
  line-height: 1.4;
}

.orders-rx-note {
  font-size: 11px;
  color: var(--orders-muted, #6b7280);
  line-height: 1.35;
}

.orders-rx-mode {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 9999px;
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
}

.orders-rx-mode-structured {
  background-color: #dcfce7;
  color: #15803d;
}

.orders-rx-mode-free {
  background-color: #fef3c7;
  color: #92400e;
}

@media (max-width: 1280px) {
  .orders-rx-row {
    gap: 6px;
  }
  .orders-rx-field-dose,
  .orders-rx-field-qty,
  .orders-rx-field-refills {
    width: 64px;
  }
  .orders-rx-field-unit {
    flex-basis: 100px;
    min-width: 100px;
  }
  .orders-rx-field-freq {
    flex-basis: 100%;
    min-width: 0;
  }
  .orders-rx-mode {
    margin-left: 0;
  }
}

body.dark-mode .orders-rx-editor {
  background-color: #1f2937;
  border-color: #374151;
}

body.dark-mode .orders-rx-input {
  background-color: #111827;
  border-color: #374151;
  color: #f3f4f6;
}

body.dark-mode .orders-rx-input:disabled {
  background-color: #1f2937;
  color: #6b7280;
}

body.dark-mode .orders-rx-mode-structured {
  background-color: #064e3b;
  color: #86efac;
}

body.dark-mode .orders-rx-mode-free {
  background-color: #78350f;
  color: #fcd34d;
}