/* Produce Labels — the screen's styles, linked from anvil.yaml's
   native_deps.head_html.

   Scoping: every rule whose subject sits inside the form root is prefixed
   :where(.pl-root), which adds zero specificity and so cannot change which rule
   wins. [data-theme="dark"] keeps its place at the front, because the attribute
   is on the html element, outside the root.

   NOT scoped, and this is the trap the section turns on: three subtrees leave
   the root at runtime. #validation-modal carries .px-modal-overlay and
   pxShowOverlay moves it into #px-modal-portal; .pl-instructions-popup and
   .pl-grid-popup are built and appended to the body. Scoping any of their rules
   would stop it matching and the dialog and both popups would render unstyled,
   with no error. Their rules stay bare, exactly as they are today, and so does
   their consequence: both popups inherit --accent from the body, not from
   .pl-container, so a focused grid input glows the theme's accent rather than
   this screen's teal. That is today's behaviour; do not correct it.

   No url(), no @font-face and no @keyframes rename: all six keyframe names
   already carry the pl prefix, and pxSpin is the dependency theme's. No designer
   gate and no live class: every element hidden until JavaScript runs is hidden
   by these same declarations on the designer canvas too, so nothing new goes dark.
 No .themed-scrollbar rule.
   ======================================================================== */

/* The form root. It is auto-height, so .pl-container's height: 100% resolves
   against an indefinite height and stays inert. Bare, never :where()-scoped, per the
   guide's root rule. It carries no custom property on purpose: #validation-modal
   is a sibling of .pl-container and reads the document's --accent, and
   pxShowOverlay copies the overlay's computed accent variables inline before
   portaling it. */
.pl-root {
  display: block;
}

/* ========================================
   PRODUCT LABELS - Main Styles
   Uses shared px-* vars from theme.css
   ======================================== */
:where(.pl-root) .pl-container {
  /* Accent colors for shared px-* components */
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-subtle: rgba(13, 148, 136, 0.12);
  --px-loading-accent: #0d9488;

  /* Local aliases for pl-* styles */
  --pl-accent: var(--accent);
  --pl-accent-light: #14b8a6;
  --pl-accent-glow: var(--accent-subtle);
  --pl-row-hover: rgba(13, 148, 136, 0.06);
  --pl-selected-bg: rgba(13, 148, 136, 0.15);
  --pl-selected-border: var(--accent);

  font-family: var(--px-font);
  background: var(--px-bg-deep);
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  color: var(--px-text-primary);
  position: relative;
  isolation: isolate;
  z-index: 0;
}

/* Dark mode overrides */
[data-theme="dark"] :where(.pl-root) .pl-container {
  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-subtle: rgba(20, 184, 166, 0.25);
  --pl-accent-light: #2dd4bf;
  --pl-row-hover: rgba(20, 184, 166, 0.15);
  --pl-selected-bg: rgba(20, 184, 166, 0.18);
}

/* ========================================
   HEADER - Uses px-page-title, px-subtitle from theme.css
   ======================================== */
:where(.pl-root) .pl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

:where(.pl-root) .pl-header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

:where(.pl-root) .pl-label-mode-toggle {
  display: flex;
  border: 1px solid var(--px-border);
  border-radius: 999px;
  overflow: hidden;
}

:where(.pl-root) .pl-label-mode-btn {
  font-family: var(--px-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  cursor: pointer;
  border: none;
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

:where(.pl-root) .pl-label-mode-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ========================================
   SELECTION SECTION - extends px-card
   ======================================== */
:where(.pl-root) .px-card.pl-selection-container {
  display: grid;
  grid-template-columns: 1fr 1fr 180px auto auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 20px;
}

/* eMAR-scanning banner — shown below the home/patient selector when the
   selected home is locked. Hidden by default; toggled by plSetScanningMode. */
:where(.pl-root) .pl-scan-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin: -8px 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--px-warning);
  border-radius: var(--px-radius-sm);
  background: var(--px-warning-subtle, rgba(217, 119, 6, 0.08));
  color: var(--px-warning);
  font-size: 0.85rem;
  line-height: 1.4;
}

:where(.pl-root) .pl-scan-banner.pl-active {
  display: flex;
}

:where(.pl-root) .pl-scan-banner .pl-scan-banner-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

:where(.pl-root) .pl-select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(.pl-root) .pl-select-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
   COMBOBOX STYLES
   ======================================== */
:where(.pl-root) .pl-combobox {
  position: relative;
}

:where(.pl-root) .pl-combobox-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-input-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

:where(.pl-root) .pl-combobox-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.pl-root) .pl-combobox-input {
  flex: 1;
  padding: 12px 14px;
  border: none;
  border-radius: var(--px-radius-sm) 0 0 var(--px-radius-sm);
  font-size: 0.95rem;
  font-family: var(--px-font);
  background: transparent;
  color: var(--px-text-primary);
  outline: none;
  min-width: 0;
}

:where(.pl-root) .pl-combobox-input::placeholder {
  color: var(--px-text-muted);
}

:where(.pl-root) .pl-combobox-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(.pl-root) .pl-combobox-toggle {
  padding: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--px-text-muted);
  transition: color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.pl-root) .pl-combobox-toggle:hover {
  color: var(--accent);
}

:where(.pl-root) .pl-combobox-toggle.open {
  transform: rotate(180deg);
}

:where(.pl-root) .pl-combobox-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

:where(.pl-root) .pl-combobox-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  box-shadow: var(--px-shadow-md);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

:where(.pl-root) .pl-combobox-dropdown.open {
  display: block;
  animation: plDropdownReveal 0.2s ease;
}

@keyframes plDropdownReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

:where(.pl-root) .pl-combobox-option {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--px-border-subtle);
}

:where(.pl-root) .pl-combobox-option:last-child {
  border-bottom: none;
}

:where(.pl-root) .pl-combobox-option:hover,
:where(.pl-root) .pl-combobox-option.highlighted {
  background: var(--pl-row-hover);
}

:where(.pl-root) .pl-combobox-option.selected {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

:where(.pl-root) .pl-combobox-option-name {
  font-weight: 500;
}

:where(.pl-root) .pl-combobox-option-meta {
  font-size: 0.8rem;
  color: var(--px-text-muted);
  margin-top: 2px;
}

:where(.pl-root) .pl-combobox-empty {
  padding: 16px;
  text-align: center;
  color: var(--px-text-muted);
  font-size: 0.9rem;
}

/* Combobox loading state */
:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-input-wrapper {
  background: var(--px-bg-elevated);
  border-color: var(--px-border);
}

:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-input,
:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-toggle {
  cursor: wait;
}

:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-input::placeholder {
  color: var(--px-text-muted);
}

:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-toggle {
  position: relative;
}

:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-toggle svg {
  display: none;
}

:where(.pl-root) .pl-combobox.pl-loading .pl-combobox-toggle::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--px-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pxSpin 0.8s linear infinite;
}

/* Disabled combobox state (distinct from loading) */
:where(.pl-root) .pl-combobox.pl-disabled .pl-combobox-input-wrapper {
  background: var(--px-bg-elevated);
  opacity: 0.6;
}

:where(.pl-root) .pl-combobox.pl-disabled .pl-combobox-input,
:where(.pl-root) .pl-combobox.pl-disabled .pl-combobox-toggle {
  cursor: not-allowed;
}

/* ========================================
   SCAN INPUT
   ======================================== */
:where(.pl-root) .pl-scan-group {
  min-width: 180px;
}

:where(.pl-root) .pl-scan-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--px-radius-sm);
  background: var(--px-input-bg);
  color: var(--px-text-muted);
  font-size: 0.9rem;
  font-family: var(--px-font);
  font-style: italic;
  cursor: default;
  user-select: none;
}

:where(.pl-root) .pl-scan-indicator.pl-scan-ready {
  color: var(--accent);
  font-style: normal;
}

:where(.pl-root) .pl-scan-icon {
  color: var(--accent);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}

/* Flash animation for auto-selected rows */
@keyframes plRowFlash {
  0% { background: var(--pl-accent-glow); }
  50% { background: var(--pl-selected-bg); }
  100% { background: var(--pl-selected-bg); }
}

:where(.pl-root) .pl-flash-selected {
  animation: plRowFlash 0.6s ease;
}

/* ========================================
   VALIDATION MODAL - icon only, uses px-modal-overlay
   ======================================== */
.pl-validation-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--px-danger) 0%, #dc2626 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

#validation-modal .px-modal {
  max-width: 400px;
  width: 90%;
}

/* The three declaration sets that were inline style= attributes on
   #validation-modal's header, title row and message. BARE,
   like the rest of the dialog. .px-modal-header is DOUBLED to (0,2,0): the
   inline style="gap: 12px" it replaces beat everything, and the dependency's
   .px-modal-header is head-injected after every head
   link, so one class would lose the tie. The other two divs carry no shared
   class, so one class each is enough. */
.px-modal-header.pl-validation-header {
  gap: 12px;
}

.pl-validation-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-validation-message {
  color: var(--px-text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

:where(.pl-root) .pl-top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

:where(.pl-root) .pl-selection-info-inline {
  font-size: 0.85rem;
  color: var(--px-text-secondary);
}

:where(.pl-root) .pl-selection-info-inline .pl-selection-count {
  font-weight: 600;
  color: var(--accent);
}

/* Second line under the counts: why Generate Labels is disabled. Empty
   (and zero-height) whenever the selection is valid. */
:where(.pl-root) .pl-selection-info-inline .pl-selection-message {
  display: block;
  font-size: 0.78rem;
  color: var(--px-text-muted);
}

/* ========================================
   ITEMS TABLE - Uses px-table-wrapper, px-table from theme.css
   ======================================== */
:where(.pl-root) .pl-table-container {
  margin-bottom: 20px;
}

:where(.pl-root) .pl-table th:first-child {
  width: 40px;
  text-align: center;
}

:where(.pl-root) .pl-table tbody tr {
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Pointer cursor on row-selectable columns */
:where(.pl-root) .pl-table tbody tr .pl-checkbox-cell,
:where(.pl-root) .pl-table tbody tr .pl-date,
:where(.pl-root) .pl-table tbody tr .pl-drug-name,
:where(.pl-root) .pl-table tbody tr .pl-qty-display {
  cursor: pointer;
}

/* Text cursor on editable inputs */
:where(.pl-root) .pl-table tbody tr .pl-labels-input,
:where(.pl-root) .pl-table tbody tr .pl-box-labels-input {
  cursor: text;
}

/* Round 41mm labels have no inner/box artwork — block that column.
   The whole cell, so the grid-editor trigger beside the input goes with it. */
:where(.pl-root) .pl-round-mode .pl-table tbody tr .pl-box-labels-cell {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

:where(.pl-root) .pl-table tbody tr:hover {
  background: var(--pl-row-hover);
}

/* ========================================
   SELECTED ROW STYLING - Delightful!
   ======================================== */
:where(.pl-root) .pl-table tbody tr.pl-selected {
  background: var(--pl-selected-bg);
}

:where(.pl-root) .pl-table tbody tr.pl-selected td:first-child {
  position: relative;
}

:where(.pl-root) .pl-table tbody tr.pl-selected td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--pl-selected-border);
  border-radius: 0 2px 2px 0;
  animation: plAccentSlide 0.3s ease;
}

@keyframes plAccentSlide {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

:where(.pl-root) .pl-table tbody tr.pl-selected .pl-drug-name {
  color: var(--pl-accent);
}

:where(.pl-root) .pl-table tbody tr.pl-selected .pl-checkbox {
  transform: scale(1.1);
}

/* Checkbox styling - uses px-checkbox-wrap pattern */
:where(.pl-root) .pl-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
  transition: transform 0.2s ease;
}

:where(.pl-root) .pl-checkbox:hover {
  transform: scale(1.15);
}

:where(.pl-root) .pl-checkbox-cell {
  text-align: center;
}

/* Drug name column */
:where(.pl-root) .pl-drug-name {
  font-weight: 600;
  color: var(--px-text-primary);
  max-width: 200px;
  transition: color 0.2s ease;
}

/* Quantity display (not editable) */
:where(.pl-root) .pl-qty-display {
  font-family: var(--px-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--px-text-primary);
  background: var(--px-bg-elevated);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  min-width: 50px;
  text-align: center;
}

/* Inline input overrides for table context */
:where(.pl-root) .pl-table .px-input {
  padding: 6px 10px;
  font-size: 0.85rem;
  min-width: 60px;
}

:where(.pl-root) .pl-table .pl-grid-input-wrapper .px-input {
  padding-right: 30px;
}

/* Grid Input Wrapper */
:where(.pl-root) .pl-grid-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Grid Trigger Button - inside input */
:where(.pl-root) .pl-grid-trigger-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  opacity: 0.7;
}

:where(.pl-root) .pl-grid-trigger-btn:hover {
  color: var(--accent);
  background: var(--accent-subtle);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* Grid Popup */
.pl-grid-popup {
  position: absolute;
  min-width: 260px;
  padding: 14px;
  background: var(--px-bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--px-radius-sm);
  box-shadow: var(--px-shadow-lg);
  z-index: 10000;
  display: none;
}

.pl-grid-popup.open {
  display: block;
  animation: plPopupReveal 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Grid Rows */
.pl-grid-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  animation: plGridRowSlide 0.15s ease;
}

@keyframes plGridRowSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pl-grid-row:last-child { margin-bottom: 0; }

/* Grid Inputs */
.pl-grid-qty-input,
.pl-grid-count-input {
  padding: 8px 10px;
  border: 1.5px solid var(--px-border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--px-font);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  text-align: center;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pl-grid-qty-input { width: 85px; }
.pl-grid-count-input { width: 65px; }

.pl-grid-qty-input:focus,
.pl-grid-count-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Invalid state - red glow */
.pl-grid-qty-input.pl-invalid,
.pl-grid-count-input.pl-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  animation: plShake 0.3s ease;
}

@keyframes plShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Multiplication symbol */
.pl-grid-multiply {
  color: var(--px-text-muted);
  font-weight: 600;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  user-select: none;
}

/* Delete row button */
.pl-grid-delete-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--px-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pl-grid-delete-btn:hover {
  color: var(--px-danger);
  background: rgba(239, 68, 68, 0.1);
  opacity: 1;
}

/* Hide delete on auto-expand row */
.pl-grid-row.pl-auto-expand .pl-grid-delete-btn {
  visibility: hidden;
}

/* Instructions popup trigger */
:where(.pl-root) .pl-instructions-cell {
  position: relative;
}

:where(.pl-root) .pl-instructions-trigger {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: var(--px-font);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  cursor: pointer;
  min-height: 32px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

:where(.pl-root) .pl-instructions-trigger:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

:where(.pl-root) .pl-instructions-trigger:empty::before,
:where(.pl-root) .pl-instructions-trigger.pl-empty::before {
  content: '(click to edit)';
  color: var(--px-text-muted);
  font-style: italic;
}

/* eMAR-scanning lock: instructions/warnings come from Analyst and can't be
   edited here. The cell renders as a plain span (no trigger affordance);
   these rules also harden any residual trigger on a locked table. */
:where(.pl-root) .pl-instructions-locked {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: var(--px-font);
  color: var(--px-text-secondary);
  min-height: 32px;
  opacity: 0.85;
  cursor: default;
}

:where(.pl-root) .pl-instructions-locked::before {
  content: '\01F512 ';
  opacity: 0.6;
}

:where(.pl-root) .pl-table.pl-scanning-locked .pl-instructions-trigger {
  pointer-events: none;
  cursor: default;
  opacity: 0.7;
}

/* Instructions popup */
.pl-instructions-popup {
  position: absolute;
  min-width: 350px;
  max-width: 450px;
  padding: 12px;
  background: var(--px-bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--px-radius-sm);
  box-shadow: var(--px-shadow-lg);
  z-index: 10000;
  display: none;
}

.pl-instructions-popup.open {
  display: block;
  animation: plPopupReveal 0.2s ease;
}

.pl-popup-section {
  margin-bottom: 12px;
}

.pl-popup-section:last-child {
  margin-bottom: 0;
}

.pl-popup-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.pl-warnings-section {
  margin-top: 12px;
}

.pl-warnings-section .pl-popup-label {
  color: #b8860b;
}

.pl-warnings-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid rgba(255, 193, 7, 0.5);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--px-font);
  background: rgba(255, 193, 7, 0.15);
  color: var(--px-text-primary);
  resize: vertical;
  line-height: 1.5;
}

.pl-warnings-textarea:focus {
  outline: none;
  border-color: var(--px-warning);
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
}

[data-theme="dark"] .pl-warnings-section .pl-popup-label {
  color: var(--px-warning);
}

[data-theme="dark"] .pl-warnings-textarea {
  background: rgba(255, 193, 7, 0.2);
}

/* Warnings text in table cell */
:where(.pl-root) .pl-warnings-text {
  color: #b8860b;
  font-size: 0.8rem;
  display: block;
  margin-top: 4px;
}

[data-theme="dark"] :where(.pl-root) .pl-warnings-text {
  color: var(--px-warning);
}

@keyframes plPopupReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pl-popup-header {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--px-text-primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--px-border);
}

.pl-instructions-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--px-font);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  resize: vertical;
  line-height: 1.5;
}

.pl-instructions-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

/* Date column */
:where(.pl-root) .pl-date {
  font-family: var(--px-mono);
  font-size: 0.85rem;
  color: var(--px-text-secondary);
}

/* Empty state - uses px-empty-state from theme.css */
:where(.pl-root) .pl-empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

:where(.pl-root) .pl-selection-count {
  font-weight: 700;
  color: var(--accent);
}

/* ========================================
   LOADING STATE
   ======================================== */
:where(.pl-root) .pl-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--px-text-muted);
}

:where(.pl-root) .pl-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--px-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pxSpin 0.8s linear infinite;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
  :where(.pl-root) .px-card.pl-selection-container {
    grid-template-columns: 1fr 1fr;
  }
  :where(.pl-root) .pl-top-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  :where(.pl-root) .pl-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  :where(.pl-root) .pl-header-controls {
    width: 100%;
    justify-content: space-between;
  }
  :where(.pl-root) .px-card.pl-selection-container {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

@media (max-width: 700px) {
  :where(.pl-root) .pl-container { padding: 16px; }
}

@media (max-width: 500px) {
  :where(.pl-root) .pl-container { padding: 12px; }
}