/* product_labels_needed_html — the product-label quantity modal.
 *
 * Every rule moved verbatim from the form's own <style> block; the server
 * strips a template style block's text, so a head-linked asset is the only
 * route that both runs and styles the designer canvas.
 *
 * `.pln-container` is the form ROOT (its single top-level node), so its rule
 * stays a BARE class rather than :where()-scoped. It is a child component, not
 * a screen: no position, no flex, no min-height is added.
 *
 * Every other rule is scoped :where(.pln-container), which adds no specificity
 * and so cannot change which rule wins. Audited for order ties: `.pln-` appears
 * in no other template, in theme/assets/theme.css, or in the shared
 * dependency's injected theme, and no rule here declares a .px-* or
 * .themed-scrollbar name. The --px-* custom properties resolve at use time on
 * the element, so moving these declarations earlier cannot change them.
 *
 * No designer gate: every hidden state here is a class the script swaps
 * (.pln-validation.empty ships in the template), so the canvas renders the
 * same before and after the move.
 */

.pln-container {
  --pln-accent: #3b82f6;
  --pln-accent-light: #60a5fa;
  --pln-success: #10b981;
  --pln-error: #ef4444;
  font-family: var(--px-font);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
  color: var(--px-text-primary);
}

:where(.pln-container) .pln-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--px-border);
}

:where(.pln-container) .pln-drug-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pln-accent);
  margin-bottom: 8px;
}

:where(.pln-container) .pln-required-qty {
  font-size: 0.95rem;
  color: var(--px-text-secondary);
}

:where(.pln-container) .pln-required-qty strong {
  color: var(--px-text-primary);
}

:where(.pln-container) .pln-instructions {
  font-size: 0.85rem;
  color: var(--px-text-muted);
  margin-top: 8px;
}

:where(.pln-container) .pln-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.pln-container) .pln-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--px-text-primary);
}

:where(.pln-container) .pln-label-hint {
  font-weight: 400;
  color: var(--px-text-muted);
  font-size: 0.85rem;
}

:where(.pln-container) .pln-input {
  font-family: var(--px-font);
  font-size: 1rem;
  padding: 12px 16px;
  border: 1px solid var(--px-border);
  border-radius: 8px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

:where(.pln-container) .pln-input:focus {
  border-color: var(--pln-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

:where(.pln-container) .pln-input::placeholder {
  color: var(--px-text-muted);
}

:where(.pln-container) .pln-validation {
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

:where(.pln-container) .pln-validation-icon {
  font-size: 1.5rem;
}

:where(.pln-container) .pln-validation-text {
  font-size: 0.9rem;
  font-weight: 500;
}

:where(.pln-container) .pln-validation-detail {
  font-size: 0.85rem;
  color: var(--px-text-secondary);
}

:where(.pln-container) .pln-validation.valid {
  background: rgba(16, 185, 129, 0.1);
  color: var(--pln-success);
}

:where(.pln-container) .pln-validation.invalid {
  background: rgba(239, 68, 68, 0.1);
  color: var(--pln-error);
}

:where(.pln-container) .pln-validation.empty {
  background: rgba(148, 163, 184, 0.1);
  color: var(--px-text-muted);
}

:where(.pln-container) .pln-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

:where(.pln-container) .pln-btn {
  flex: 1;
  font-family: var(--px-font);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.pln-container) .pln-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.pln-container) .pln-btn-primary {
  background: var(--pln-accent);
  color: #ffffff;
}

:where(.pln-container) .pln-btn-primary:hover:not(:disabled) {
  background: var(--pln-accent-light);
}

:where(.pln-container) .pln-btn-secondary {
  background: rgba(148, 163, 184, 0.2);
  color: var(--px-text-primary);
  border: 1px solid var(--px-border);
}

:where(.pln-container) .pln-btn-secondary:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.3);
}

@media (max-width: 600px) {
  .pln-container {
    padding: 16px;
    gap: 16px;
  }

  :where(.pln-container) .pln-buttons {
    flex-direction: column;
  }

  :where(.pln-container) .pln-btn {
    padding: 12px 16px;
  }
}