@scope (.native-shell) {
/*
 * sidebar-quickadd.css — Sidebar "Quick add" hero button + menu.
 *
 * Owned module: public/assets/css/core/sidebar/
 *
 * Styles the hero create affordance pinned under the logo (markup:
 * shared/layout/sidebar/partials/sidebar-quickadd.php; behaviour:
 * public/assets/js/core/sidebar/sidebar-quickadd.js):
 *
 *   - .sb-quickadd  — fixed wrapper between .logo-row and .nav
 *   - .qadd-btn     — the hero pill (expanded) / round "+" (collapsed)
 *   - .qadd-menu    — the floating popover (role=menu), JS-positioned
 *   - .qadd-item    — the create rows (one glyph + one label, nothing else)
 *
 * THE INVERSION (the whole idea): the create button is the ONE element
 * that inverts the rail surface, so it reads unmistakably as the primary
 * action. On the dark rail it is white with ink glyphs; on the light rail
 * it is ink-black with white glyphs (matching the app's ink-black primary).
 * Everything else on the rail is a quiet ghost row — only this is filled.
 *
 * COLOUR = LEDGER CODE (iOS-Settings grammar): each row carries a 28px
 * SOLID-fill tile with a white glyph; the hue is per-GROUP, never per-row —
 * blue = Schedule, green = Checkout, indigo = the person. Three hues, two
 * of them repeated: repetition is what makes it a code, not a rainbow.
 * Fills are theme-ADAPTIVE and taken from Apple's UNIFIED 2026 system
 * palette (updated by Apple 2025-06-09 with Liquid Glass); every
 * white-glyph-on-fill pair clears 3:1 non-text on both popup surfaces —
 * default systemGreen (#34c759/#30d158, unchanged in 2026) is BANNED
 * here (≈2.2:1 on white), the ACCESSIBLE green is used instead. Tiles are the
 * only chromatic objects on the popup; labels/headers stay in the ink ramp
 * and the inverted hero pill remains the rail's one loud element.
 * GOVERNANCE: a future row joins an existing ledger or founds a new
 * LABELLED group with its own hue — never a per-row hue.
 *
 * GEOMETRY: three radius classes, zero orphan numbers — the BUTTON is a
 * full CAPSULE (border-radius 999px → r = h/2 = 20px expanded; the SAME
 * declaration renders the collapsed 40×40 as a perfect circle — the "+"
 * is the capsule's own end-cap, one object at two widths, never a second
 * shape); the MENU is the floating container (14px, 6px padding → rows
 * 14−6=8px concentric). ELEVATION: the button is a RESIDENT of the rail —
 * it carries NO shadow (the inversion is the elevation, ~21:1 contrast);
 * the floating menu owns the composition's only shadow.
 *
 * MOTION SCALE: two durations only — micro (hover-out 80ms; press 120ms)
 * and 200ms open / 140ms close for the popover. Hover-IN is deliberately
 * INSTANT: perceived latency in a menu is worse than abruptness. Transform+
 * opacity only; no blur, no keyframes, no permanent will-change layer.
 *
 * Loaded by base.php right after sidebar-nav.css so it can lean on the
 * rail's --c-* token scope (defined in sidebar-base.css / sidebar-theme.css).
 */

/* ── Hero tokens — DARK rail defaults (white button, ink glyphs). ─────── */
.sb {
  --qadd-bg:        #ffffff;
  --qadd-bg-hover:  #f0f0f2;
  --qadd-bg-press:  #e8e8ed;   /* one tonal step past hover */
  --qadd-ink:       #1d1d1f;   /* the app ink — no bespoke near-black */
  /* Glyphs are ink now, not filled tiles — see .qadd-tile. Lira's face is the
   * only colour in the menu, which is what makes it findable. */
  --qadd-glyph:      #a1a1a8;
  --qadd-glass-bg:    rgba(28, 28, 32, 0.72);
  --qadd-glass-sheen: rgba(255, 255, 255, 0.14);
  --qadd-glass-edge:  rgba(255, 255, 255, 0.10);
  --qadd-row-press:     #2a2a2f;
  --qadd-focus-ring:    rgba(255,255,255,0.45);   /* ink-neutral — never a hue */
}

/* ── Hero tokens — LIGHT rail (ink-black button, white glyphs). ───────── */
.sb.theme-light,
:scope[data-app-theme="light"] .sb {
  /* Blue System v1.0 — the global "+" hero is the primary create action,
   * so it carries the brand blue (was ink-black). White glyphs on blue. */
  --qadd-bg:        var(--ds-color-interactive);
  --qadd-bg-hover:  var(--ds-color-interactive-hover);
  --qadd-bg-press:  var(--app-theme-fill-hover,#00489c);
  --qadd-ink:       #ffffff;
  --qadd-glyph:      #6f7076;
  --qadd-glass-bg:    rgba(255, 255, 255, 0.74);
  --qadd-glass-sheen: rgba(255, 255, 255, 0.85);
  --qadd-glass-edge:  rgba(0, 0, 0, 0.06);
  --qadd-row-press:     #ececf0;
  --qadd-focus-ring:    rgba(0,0,0,0.40);
}


/* Invert the selected rail so its primary create command stays distinct.
 * The white surface is intentional; theme-colored ink retains account identity. */
:scope[data-app-color] .sb {
  --qadd-bg:var(--gray-0,#fff);
  --qadd-bg-hover:color-mix(in srgb,var(--app-color-ink) 4%,var(--gray-0,#fff));
  --qadd-bg-press:color-mix(in srgb,var(--app-color-ink) 8%,var(--gray-0,#fff));
  --qadd-ink:var(--ds-color-primary-command-bg-hover);
}

/* ── Wrapper — fixed band under the logo, aligned to the nav gutter. ──── */
.sb-quickadd {
  flex-shrink: 0;
  padding: 12px 10px 6px;
  /* MUST stay position:static (the default) so it forms no positioning
   * context — the menu inside deliberately anchors to .sb (like .flyout /
   * .user-popup), not to this wrapper. Do not add position:relative here. */
  position: static;
}


/* ── The hero button ─────────────────────────────────────────────────── */
.qadd-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  padding: 0 14px;   /* inert minimum — the centered unit drives position */
  /* Full capsule (r = h/2) — the one declaration that also renders the
   * collapsed 40×40 as a perfect circle. Never reassert a px radius. */
  border-radius: var(--ds-button-radius);
  background: var(--qadd-bg);
  color: var(--qadd-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.12s ease, transform 0.12s ease;
}
/* Menu-open = held (like a macOS toolbar button whose menu is showing) —
 * the same surface as hover, NOT a focus-lookalike ring. */
.qadd-btn:hover,
.qadd-btn[aria-expanded="true"] { background: var(--qadd-bg-hover); }
/* Press = one tonal step past hover + a PERCEPTIBLE squish (0.97 — the
 * module's single non-unity scale, shared with the menu's closed state). */
.qadd-btn:active { transform: scale(0.97); background: var(--qadd-bg-press); }
.qadd-btn:focus-visible {
  outline: 2px solid var(--c-rail-active);
  outline-offset: 2px;
}

/* The plus never morphs — the held surface + the visible menu are the
 * open cue; "×" under a "New" label would contradict itself. ONE size in
 * both rail states (no collapsed override — one glyph, one object); 2.25
 * stroke is the optical match for the 600-weight label beside it. */
.qadd-plus {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke-width: 2.25;
}


/* ── Collapsed rail — round "+" only, centred in the 64px gutter. ───────
 * Second selector = first-paint hydration parity: when the boot script
 * pre-marks the rail collapsed, the still-.expanded element must paint
 * the collapsed "+" too (mirrors sidebar-base.css pre-paint overrides). */
.sb.collapsed .sb-quickadd,
:scope[data-app-sidebar-collapsed="true"] .sb.expanded .sb-quickadd {
  padding-left: 0; padding-right: 0;
  display: flex; justify-content: center;
}
.sb.collapsed .qadd-label,
:scope[data-app-sidebar-collapsed="true"] .sb.expanded .qadd-label { display: none; }
.sb.collapsed .qadd-btn,
:scope[data-app-sidebar-collapsed="true"] .sb.expanded .qadd-btn {
  width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center;
}


/* ── The floating menu (popover) ─────────────────────────────────────── */
.qadd-menu {
  /* The popover follows the page theme independently of the rail colour. */
  --c-text:var(--ds-color-text);
  --c-text-muted:var(--ds-color-text-secondary);
  --c-text-dim:var(--ds-color-text-secondary);
  --c-popup-bg:var(--ds-color-bg-canvas);
  --c-popup-border:var(--ds-color-border-subtle);
  --c-popup-hover:var(--ds-color-bg-subtle);
  --qadd-glass-bg:var(--ds-color-bg-canvas);
  --qadd-glyph:var(--ds-color-text-secondary);
  --qadd-row-press:var(--ds-color-bg-muted);
  --qadd-focus-ring:var(--ds-color-focus-ring);
  color:var(--c-text);
  position: absolute;
  left: 12px; top: 0;
  width: 240px;   /* tile column + the longest labels without wrapping */
  background: var(--c-popup-bg);
  border: 1px solid var(--c-popup-border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--c-popup-shadow);
  z-index: 200;                 /* peer with the account popup / flyout, below modals */
  /* Sized by its own content — the whole menu is nine rows, and a menu that
   * scrolls to reveal its last item is a menu that is too tall for its job.
   * The cap only exists so a genuinely short window cannot push it off the
   * screen; positionMenu shifts it up before that ever bites. */
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  /* No scrollbar. The menu still scrolls when the viewport is short, but a
   * track drawn down the side of a floating panel is chrome about chrome —
   * the cut-off row already tells you there is more. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transform-origin: left top;   /* JS re-pins the origin to the button per rail state */
  /* Closed resting transform matches the anchor side (JS sets data-side):
   * below the button → slides up 4px away; right of it → slides left 6px. */
  transform: translateY(-4px) scale(0.97);
  /* Base transition = the CLOSE (140ms, plain ease-out feel). */
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.qadd-menu::-webkit-scrollbar { width: 0; height: 0; }

/* ── Liquid Glass (Apple 2026) ─────────────────────────────────────────────
   macOS-calibrated, not iOS-loud: a mostly-opaque veil, a wide blur with a
   saturation lift so colour beneath still reads through, a lit top hairline,
   and shadow doing the separation instead of a border. Behind an @supports
   guard — without backdrop-filter the opaque token surface above stands, so
   the menu is never a translucent smear on an engine that cannot blur. */
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .qadd-menu {
    background: var(--qadd-glass-bg);
    border-color: transparent;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
      inset 0 0.5px 0 var(--qadd-glass-sheen),
      0 0 0 0.5px var(--qadd-glass-edge),
      0 20px 48px -12px rgba(0, 0, 0, 0.24);
  }
}

.qadd-menu[data-side="right"] { transform: translateX(-6px) scale(0.97); }
/* Open — 200ms decelerating arrival from the button. Transform+opacity
 * only; blur-in is expensive and not part of the system's motion language. */
.qadd-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1);
}

/* Intent groups — quiet section headings + an optional hairline before
 * the odd-one-out (New client). The labels do the classifying; the eye
 * lands on the right cluster before it reads a single word. */
.qadd-group--sep {
  margin-top: 4px; padding-top: 5px;
  border-top: 1px solid var(--c-popup-border);
}
.qadd-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-text-muted); font-weight: 600;
  /* Left-aligned to the TILE column (10px), like iOS Settings section
   * headers; 12px top air separates it from the previous group's rows. */
  padding: 12px 10px 5px;
}
.qadd-group:first-child .qadd-group-label { padding-top: 6px; }

/* Rows — tile + one label, one type size. Radius is concentric with the
 * menu shell (14px shell − 6px padding = 8px); 28px tile → 44px row. */
.qadd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  /* Hover-IN is instant (see MOTION SCALE); this is the hover-OUT fade. */
  transition: background-color 80ms ease-out;
}
.qadd-item:hover { background: var(--c-popup-hover); transition: none; }
.qadd-item:active { background: var(--qadd-row-press); transition: none; }
.qadd-item:focus-visible {
  outline: none;
  background: var(--c-popup-hover);
  /* Ink-neutral inset ring — never a ledger hue (a blue ring would lie
   * about which group the focused row belongs to). */
  box-shadow: inset 0 0 0 1.5px var(--qadd-focus-ring);
}

/* Glyphs, not tiles. Six filled colour chips in a nine-row menu is a paint
 * chart — the eye has to reject five of them before it finds the one it wants.
 * Stripped to ink, the ONLY colour left is Lira's face, so the assistant is
 * found by colour and everything else by its label. The 28px box stays so the
 * label column does not shift. NO hover reaction (the row is the affordance). */
.qadd-tile {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--qadd-glyph);
  background: none;
  box-shadow: none;
}
/* A touch larger than the old 16px: without a fill behind it, the glyph has
 * to carry the row's weight on its own. */
.qadd-tile svg { width: 19px; height: 19px; stroke-width: 1.7; }
.qadd-tile .qadd-reference-glyph { fill:currentColor;stroke:none; }
/* Salon front-desk terminals live on 1x Windows displays — bump the glyph
 * stroke so it doesn't grey out on coarse pixels. Lira's face is filled
 * shapes, not strokes, so it is unaffected either way. */
@media (max-resolution: 1.5dppx) {
  .qadd-tile svg { stroke-width: 1.9; }
}
/* Լիրայի տողը՝ դեմքն ինքն է սալիկը, ու մենակ ինքն է գույնով։ Չափը 26px է՝
   մյուս գլիֆների 19px-ից մեծ, որովհետև լցոնված ձևն ավելի ծանր չի կարդացվում
   ինքնաբերաբար — այստեղ մեծությունն է, որ նրան առաջին տեղը տալիս է։ */
.qadd-tile--face { border-radius: 0; }
.qadd-tile--face svg { width: 26px; height: 26px; }

/* Lira's row sits tighter than the rest: the mark and the name are one object
   (a signature), not an icon with a caption, so the 10px ledger gap is wrong
   here by exactly the amount that makes it read as two things. */
.qadd-item:has(.qadd-tile--face) { gap: 8px; }
.qadd-item-label--wm { display: inline-flex; align-items: center; gap: 6px; }
.lira-wm { display: block; }
/* The version is metadata, not part of the name — so it stays in the UI font,
   a step down and a step back, and never competes with the logotype. */
.lira-wm-ver {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  /* Sat on the logotype's baseline, not the flex box's centre — a version
     number floating above the name is the tell of a bolted-on badge. */
  color: var(--c-text-dim); transform: translateY(1.6px);
}

.qadd-item-label {
  font-size: 13px; font-weight: 500; color: var(--c-text);
  line-height: 1.25; min-width: 0;
}

/* The menu is display:none while the rail is collapsed ONLY for the closed
 * state guard the flyout uses — but here we WANT it usable when collapsed
 * (it flies out to the right), so no such rule. Positioning is JS-driven. */


/* ── Tablet / mobile (<900px): rail is locked collapsed — round "+" too. ─
 * (Same declarations as the collapsed block above; media queries cannot
 * join a selector list, so this stays a deliberate mirror.) */
@media (max-width: 900px) {
  .sb .sb-quickadd { padding-left: 0; padding-right: 0; display: flex; justify-content: center; }
  .sb .qadd-label { display: none; }
  .sb .qadd-btn { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; }
}

}