/*
 * POS-UX3 — the back-office menu editors: the section tree (views-menu.js) and the modifier editor
 * (views-modifiers.js). Every colour, size and radius is a token (tokens.css); a section's hue is a CLASS
 * (`.hue-amber` ... in the sale stylesheet) that sets `--h`, never a value stored or written here. Spacing is
 * logical (inline/block), so the page reads right to left without a rule of its own. Nothing moves but a drop
 * marker, which is a border, not an animation — a person who asked for less motion gets exactly the same page.
 * Controls are at least the small touch size (--tap-sm, 44 px); text wraps, so 200% zoom reflows instead of
 * scrolling sideways.
 */

/* ---------------------------------------------------------------- levels: a section sits one step in per level */

.tree-l1 {
  --lvl: 0;
}
.tree-l2 {
  --lvl: 1;
}
.tree-l3 {
  --lvl: 2;
}
.tree-l4 {
  --lvl: 3;
}
.tree-l5 {
  --lvl: 4;
}
.tree-l6 {
  --lvl: 5;
}

/* ---------------------------------------------------------------- the tree */

.tree-editor {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.tree-help {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
}
.tree-live {
  min-height: var(--t-body-lh);
  color: var(--ink);
  font-weight: 600;
}
.tree-empty {
  margin: 0;
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--ink-soft);
  line-height: var(--t-body-lh);
}
.tree {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.tree-row,
.tree-status {
  padding-inline-start: calc(var(--lvl, 0) * var(--s-5));
  min-width: 0;
}
.tree-status {
  color: var(--ink-soft);
  padding-block: var(--s-2);
}

.tree-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding-inline: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.tree-item:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.tree-item:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 2px;
}
.tree-item--on {
  border-width: 2px;
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}
.tree-item--drag {
  opacity: 0.55;
}

/* where a drop would land: before and after a row are an edge, inside is the whole row */
.tree-item--drop-before {
  box-shadow: 0 -4px 0 var(--accent);
}
.tree-item--drop-after {
  box-shadow: 0 4px 0 var(--accent);
}
.tree-item--drop-inside {
  outline: var(--ring) dashed var(--accent);
  outline-offset: -3px;
  background: var(--accent-soft);
}
.tree-item--refuse {
  outline: var(--ring) solid var(--stop);
  outline-offset: -3px;
  background: var(--stop-bg);
  cursor: not-allowed;
}

.tree-grip,
.tree-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--tap-sm);
  min-height: var(--tap-sm);
  color: var(--ink-soft);
  user-select: none;
}
.tree-grip {
  cursor: grab;
  font-size: var(--t-title);
  letter-spacing: -0.2em;
}
.tree-grip:active {
  cursor: grabbing;
}
.tree-caret::before {
  content: '';
}
.tree-caret {
  font-size: var(--t-title);
}
[dir='rtl'] .tree-caret:not(.tree-caret--none, .tree-caret--open)::before {
  content: '\25C2';
}
[dir='ltr'] .tree-caret:not(.tree-caret--none, .tree-caret--open)::before {
  content: '\25B8';
}
.tree-caret--open::before {
  content: '\25BE';
}
.tree-swatch {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--r-chip);
  border: 1px solid var(--line-strong);
  background: var(--h, var(--hue-none));
}
.tree-name {
  flex: 1 1 8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tree-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  color: var(--ink-soft);
  font-size: var(--t-meta);
  font-weight: 400;
}

/* the selected row's own buttons: where it goes, what is under it, its hue, hiding it */
.tree-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-block: var(--s-1) var(--s-2);
  margin-inline-start: var(--s-6);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-2);
}
.tree-tools__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.tree-tools .btn {
  margin: 0;
}
.tree-hues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.tree-hue {
  position: relative;
  min-width: var(--tap-sm);
  min-height: var(--tap-sm);
  padding: 0;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--h, var(--hue-none));
  color: var(--on-hue);
  cursor: pointer;
  touch-action: manipulation;
}
.tree-hue.hue-none {
  border-style: dashed;
}
.tree-hue:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 2px;
}
.tree-hue[aria-pressed='true'] {
  border-color: var(--ink);
  box-shadow:
    0 0 0 3px var(--surface),
    0 0 0 5px var(--ink);
}
.tree-hue[aria-pressed='true']::after {
  content: '\2713';
  font-weight: 700;
}

/* «نقل إلى قسم…» and the pickers: a list of places, indented by level, long names wrapped */
.tree-targets {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding: var(--s-1);
  list-style: none;
  max-height: 50vh;
  overflow: auto;
}
.tree-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
  inline-size: calc(100% - var(--lvl, 0) * var(--s-4));
  margin: 0;
  margin-inline-start: calc(var(--lvl, 0) * var(--s-4));
  text-align: start;
}
.tree-target__name {
  overflow-wrap: anywhere;
}
.tree-target__path {
  color: var(--ink-soft);
  font-size: var(--t-meta);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- the forms: a label, a field, its error beside it */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.field input {
  inline-size: 100%;
}
.field input[readonly] {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.field--bad input {
  border-color: var(--stop);
  border-width: 2px;
}
.field__hint {
  color: var(--ink-soft);
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
}
.field__error {
  color: var(--stop);
  font-size: var(--t-meta);
  font-weight: 600;
}
.field__error::before {
  content: '\26A0\00a0';
}
.field--check {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}
.field--check input {
  inline-size: 1.5rem;
  min-height: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--accent);
}
.dialog-form {
  gap: var(--s-3);
}
.dialog-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.layer-body .pick-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}
.layer-body .pick-form .field {
  flex: 1 1 12rem;
}
.pick-status {
  min-height: var(--t-body-lh);
  margin: var(--s-2) 0;
}

/* ---------------------------------------------------------------- the modifier editor */

.mod-list,
.mod-detail,
.mod-options,
.mod-links {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.mod-off {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.mod-detail > .link {
  align-self: flex-start;
}
.mod-groups,
.mod-option-list,
.mod-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-group__open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  inline-size: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
.mod-group__open:hover {
  background: var(--surface-2);
}
.mod-group__open:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 2px;
}
.mod-group__name {
  flex: 1 1 10rem;
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.mod-group--off .mod-group__open {
  color: var(--ink-soft);
  border-style: dashed;
}
.mod-rule {
  font-weight: 600;
}
.mod-explain {
  margin: 0;
  min-height: var(--t-body-lh);
  color: var(--ink-soft);
  line-height: var(--t-body-lh);
}
.mod-form {
  max-inline-size: 36rem;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--raised);
}
.mod-form h2 {
  margin: 0;
}
.mod-option,
.mod-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--raised);
}
.mod-option--off {
  color: var(--ink-soft);
  border-style: dashed;
}
.mod-option__name,
.mod-link__name {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mod-option__price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.mod-option .row-actions {
  margin-inline-start: auto;
}