/* sp_manage_units_html — the Manage Units modal's own rules, kept here because
 * the server strips a template's <style> block.
 *
 * SCOPED ON THE OVERLAY ID, NEVER ON A ROOT CLASS AND NEVER ON .sp-dashboard.
 * This form's single top-level node IS the overlay, so #sp-units-overlay is the
 * adopted form root, and pxShowOverlay MOVES that node into #px-modal-portal on
 * every open. An id scope travels with it; a .sp-dashboard scope
 * would stop matching exactly when the dialog is on screen. :where() adds zero
 * specificity, so every .sp-units-* rule keeps the weight it has today.
 *
 * Rules written BARE rather than scoped, each for a stated reason:
 *   .sp-units-overlay.active .sp-units-modal and the @media .sp-units-overlay
 *   rule have the root itself as their subject — wrapping them would drop a
 *   class they need.
 *   #sp-units-overlay .px-modal-close is carried across byte-identical with its
 *   R3-65 comment.
 *   .sp-units-add-section .px-btn stays at (0,2,0) rather than scoping down to
 *   (0,1,0), because the dependency injects its own .px-btn block into <head> at
 *   runtime, AFTER every head link, so a specificity tie would be decided
 *   against this sheet.
 *
 * SAME ORDER TIE, three more rules (R3-66). The dependency's injected block also
 * declares .px-input/.px-select margin, .px-modal max-height and border-radius,
 * and .px-modal-overlay align-items — all at (0,1,0) and all later on the page
 * than this link. Each rule here that overrides one of those names the shared
 * class alongside its own: .sp-units-select.px-select, and inside the @media
 * block .sp-units-modal.px-modal and .sp-units-overlay.px-modal-overlay. A
 * media query adds no specificity, so the two inside it needed it just as much.
 *
 * .px-btn-full IS NEW HERE and was the shell's. It styles the Save button,
 * which leaves .sp-dashboard with the overlay on every open, so the rule follows
 * the button into the portal instead. Competitors checked:
 * neither the dependency's .px-btn block nor any .px-btn* rule in
 * theme/assets/theme.css declares a width, so no order tie exists either way.
 *
 * NO DESIGNER GATE. .sp-units-modal carries opacity: 0 until the overlay
 * gains .active, so the modal contents are invisible on the designer canvas,
 * which loads this head-linked asset. A gate would need a live class this leaf
 * does not have and cannot reach.
 *
 * No .themed-scrollbar rule, no .root-* rule, and no rule for a shared .px-*
 * name other than the compound ones named above.
 */

/* ========================================
   SP MANAGE UNITS MODAL
   Uses shared px-modal-overlay styles
   ======================================== */
.sp-units-overlay.active .sp-units-modal {
  transform: translateY(0);
  opacity: 1;
}

:where(#sp-units-overlay) .sp-units-modal {
  max-width: 640px;
  width: 90%;
  padding: 28px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

:where(#sp-units-overlay) .sp-units-modal::-webkit-scrollbar {
  width: 6px;
}

:where(#sp-units-overlay) .sp-units-modal::-webkit-scrollbar-track {
  background: transparent;
}

:where(#sp-units-overlay) .sp-units-modal::-webkit-scrollbar-thumb {
  background: var(--px-border);
  border-radius: 3px;
}

:where(#sp-units-overlay) .sp-units-modal::-webkit-scrollbar-thumb:hover {
  background: var(--px-text-muted);
}

/* ========================================
   MODAL HEADER
   ======================================== */
:where(#sp-units-overlay) .sp-units-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
}

:where(#sp-units-overlay) .sp-units-title {
  font-family: var(--px-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--px-text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

:where(#sp-units-overlay) .sp-units-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: var(--accent);
  border-radius: 2px;
}

/* R3-65: the X button takes the shared `.px-modal-close` chrome from
   theme.css. Only its placement is kept locally — the header is a
   centred flex row, so the button stays absolutely anchored right and
   the title stays centred. */
#sp-units-overlay .px-modal-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ========================================
   HOME SELECT DROPDOWN
   The dropdown carries px-select, and the dependency injects `.px-input,
   .px-select { margin: 0 }` into <head> AFTER this file's link, so a plain
   (0,1,0) rule here would lose the order tie and drop the 20px gap. Naming
   px-select too puts this at (0,2,0) so the gap survives.
   ======================================== */
:where(#sp-units-overlay) .sp-units-select.px-select {
  margin-bottom: 20px;
}

/* ========================================
   UNIT ROWS
   ======================================== */
:where(#sp-units-overlay) .sp-units-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  min-height: 40px;
}

:where(#sp-units-overlay) .sp-units-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  transition: opacity 0.25s ease;
}

:where(#sp-units-overlay) .sp-units-row-deleted {
  opacity: 0.5;
}

:where(#sp-units-overlay) .sp-units-row-deleted .sp-units-name-input {
  text-decoration: line-through;
  color: var(--px-text-muted);
}

:where(#sp-units-overlay) .sp-units-name-input {
  flex: 1;
}

:where(#sp-units-overlay) .sp-units-name-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#sp-units-overlay) .sp-units-empty {
  text-align: center;
  padding: 20px;
  font-family: var(--px-font);
  font-size: 13px;
  color: var(--px-text-muted);
  font-style: italic;
}

/* ========================================
   DELETE / UNDELETE BUTTONS
   ======================================== */
:where(#sp-units-overlay) .sp-units-delete-btn {
  padding: 8px 14px;
  font-family: var(--px-font);
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: var(--px-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
  background: rgba(220, 38, 38, 0.08);
  color: var(--px-danger);
  letter-spacing: 0.3px;
}

:where(#sp-units-overlay) .sp-units-delete-btn:hover {
  background: rgba(220, 38, 38, 0.15);
}

:where(#sp-units-overlay) .sp-units-delete-btn:active {
  transform: scale(0.97);
}

:where(#sp-units-overlay) .sp-units-delete-btn.sp-units-undelete {
  background: rgba(22, 163, 74, 0.08);
  color: var(--px-success);
}

:where(#sp-units-overlay) .sp-units-delete-btn.sp-units-undelete:hover {
  background: rgba(22, 163, 74, 0.15);
}

/* ========================================
   ADD UNIT SECTION
   ======================================== */
:where(#sp-units-overlay) .sp-units-add-section {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--px-border-subtle);
}

:where(#sp-units-overlay) .sp-units-add-input {
  flex: 1;
}

/* ========================================
   NOTE TEXT
   ======================================== */
:where(#sp-units-overlay) .sp-units-note {
  font-family: var(--px-font);
  font-size: 12px;
  font-style: italic;
  color: var(--px-text-muted);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
  line-height: 1.5;
}

/* ========================================
   SAVE BUTTON
   Moved off the shell: the button portals out of .sp-dashboard with the
   overlay, so the rule travels with the button.
   ======================================== */
:where(#sp-units-overlay) .px-btn-full {
  width: 100%;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 600px) {
  /* A media query adds no specificity, so these two must name the shared
     class as well: the dependency's .px-modal (max-height: 85vh,
     border-radius) and .px-modal-overlay (align-items: center) are injected
     into <head> after this file's link and would otherwise win the tie and
     undo the full-bleed sheet. */
  :where(#sp-units-overlay) .sp-units-modal.px-modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    padding: 20px 16px;
  }

  .sp-units-overlay.px-modal-overlay {
    align-items: stretch;
  }

  :where(#sp-units-overlay) .sp-units-title {
    font-size: 1.1rem;
  }

  :where(#sp-units-overlay) .sp-units-delete-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  :where(#sp-units-overlay) .sp-units-add-section {
    flex-direction: column;
  }

  .sp-units-add-section .px-btn {
    width: 100%;
  }
}