/* ─────────────────────────────────────────────────────────────────
   J.Hilburn iPhone Prototype · Primitives
   Button, card, chip, status chip, avatar, search bar, glass nav
   backdrop. Every screen consumes these — extend with care.
   ───────────────────────────────────────────────────────────────── */

/* ───── Card (white on beige, 3-layer card shadow) ───── */
.card {
  background: var(--app-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  padding: var(--gutter-double);
}

.card--flush  { padding: 0; }
.card--tight  { padding: var(--gutter-double) var(--gutter-double) var(--gutter); }

/* ───── Buttons ─────
   .btn-primary    — black filled (Add to Bag, Save Changes)
   .btn-secondary  — white with 0.5pt stroke (Call, Email)
   .btn-tertiary   — icon-only, no background (chevron, close)
   .btn-glass-c    — glass nav circle (44×44, icon-only)
   .btn-glass-p    — glass nav capsule (pill, icon + text) */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--radius-button);
  font: var(--app-h4);
  cursor: pointer;
  border: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.btn-primary {
  background: var(--app-button-black);
  color: #FFFFFF;
}
.btn-primary:active   { background: #000000; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: var(--app-card-bg);
  color: var(--app-text-primary);
  /* Source: bare .border() modifier on Call/Email TertiaryIconButton →
     Color.dividerBackground (#E1E1E1). The earlier --app-stroke-gray
     (#4E545B) read almost-black on the white card. */
  border: 1px solid var(--app-divider);
}
.btn-secondary:active { background: #F5F5F5; }

.btn-primary--full,
.btn-secondary--full { width: 100%; }

.btn-tertiary {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.btn-glass-c,
.btn-glass-p {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--app-text-primary);
}

.btn-glass-c {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.btn-glass-p {
  height: 44px;
  padding: 0 16px;
  gap: 6px;
  border-radius: 999px;
  font: var(--app-body-lg);
}

/* ───── Capsule chip (filter / subcategory / tab pill) ───── */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-chip);
  font: var(--app-button);
  color: var(--app-text-primary);
  /* Source: CoreUI/Chip/FilterChip.swift — unselected = primaryWhite fill +
     1pt dividerBackground stroke; selected = primaryBlack fill + primaryWhite
     text (handled in .chip--selected below). The earlier `transparent` made
     the chips read as outlined on beige sheets — wrong. */
  background: var(--app-card-bg);
  border: 1px solid var(--app-divider);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.chip--selected {
  background: var(--app-button-black);
  color: #FFFFFF;
  border-color: transparent;
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chip-row::-webkit-scrollbar { display: none; }

/* ───── Status chip (Active / Shipped / Remake / Inactive) ─────
   Matches ClientStatusChip.swift exactly: no fixed height (content
   drives it), 12pt horizontal × 8pt vertical padding, .clipShape(Capsule). */
.chip-status {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font: var(--app-button-sm);
  font-family: var(--app-font-sans);
  white-space: nowrap;
}

.chip-status--success  { background: var(--app-success-bg); color: var(--app-success-text); }
.chip-status--warning  { background: var(--app-warning-bg); color: var(--app-warning-text); }
.chip-status--error,
.chip-status--inactive { background: var(--app-error-bg); color: var(--app-error-text); }
/* Neutral status chip — used for "Submitted By Partner" per Rebekah's
   screenshots (#73 / #75 / #84 / #88). [Inference] Exact iOS color tokens
   not yet verified against OrderStatusTagListView; matched visually to
   the gray chip in the screenshots. */
.chip-status--neutral  { background: rgba(120, 120, 128, 0.16); color: var(--app-text-primary); }

/* ───── Initials avatar (black circle, gold initials) ───── */
/* Source: CoreUI/Components/Avatars/InitialsAvatar.swift:37-46.
   Always black circle + white initials — no per-context variants in
   the iOS code. The earlier gold default + --initials-light modifier
   in the prototype were prototype-only quirks not derived from source. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-button-black);
  color: var(--app-card-bg);
  font-weight: 700;
  font-family: var(--app-font-sans);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.avatar--xs { width: 32px;  height: 32px;  font-size: 11px; }
.avatar--sm { width: 40px;  height: 40px;  font-size: 13px; }
.avatar--md { width: 48px;  height: 48px;  font-size: 14px; }
.avatar--lg { width: 60px;  height: 60px;  font-size: 18px; }
.avatar--xl { width: 80px;  height: 80px;  font-size: 24px; }

.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ───── Search bar (native iOS capsule style) ─────
   Source: CoreUI/Components/Inputs/SearchBar/SearchBar.swift (Newsroom +
   Clients List active state) + CoreUI/Components/Buttons/SearchBarButton.swift
   `.capsule` style (Clients List initial state). On iPhone both render as:
   - shape: Capsule() / cornerRadius 100 → border-radius:999px
   - fill: Color.searchBarCapsuleFill = rgba(120, 120, 128, 0.16)
   - height: 40pt (SearchBar default); SearchBarButton.capsule is padding-
     driven (12pt all around) and ends up ~40pt tall with the 16pt fontBodyLarge
   - icon: iconMagnifyingGlass at gutter × 3 = 24×24
   - icon foreground (iPhone): Color.lightTextSecondary (#4C4D53)
   - HStack: SearchBarButton.capsule = 8pt spacing; SearchBar = 0 spacing
     with 8pt icon padding (both resolve to ~8pt between icon and text). */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--gutter);              /* 8pt — SearchBarButton.capsule HStack spacing */
  height: 40px;                    /* SearchBar.Style.default.height */
  padding: 0 var(--gutter);        /* matches SearchBar's icon 8pt horizontal padding */
  background: var(--app-search-fill);   /* rgba(120, 120, 128, 0.16) */
  border-radius: 999px;            /* Capsule() */
}

.search-bar__icon {
  width: 24px;                     /* .gutter(withMultiplier: 3) */
  height: 24px;
  flex-shrink: 0;
  color: var(--app-text-secondary);   /* iPhone: Color.lightTextSecondary */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font: var(--app-body-lg);        /* fontBodyLarge (16pt regular) */
  color: var(--app-text-primary);
  outline: none;
}
.search-bar__input::placeholder {
  color: var(--app-text-secondary);   /* SearchBarButton.capsule.contentColor */
}

/* Hide the browser-native clear button on <input type="search"> — Chrome /
   Safari render a blue X by default that visually collides with our custom
   X clear icon. We supply our own button. */
.search-bar__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Outer SearchBar layout — HStack(spacing: 0) wrapping the capsule on the
   left and an inline Cancel TertiaryButton on the right. Cancel is hidden
   until the field is focused (SearchBarDomain.isCancelButtonVisible =
   showCancel && searchBarInFocus). */
.search-row {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}

.search-row > .search-bar {
  flex: 1;
  min-width: 0;
}

/* Cancel — TertiaryButton(LocalizableStrings.cancel, configuration: .medium)
   on iPhone: text-only, fontButtonMedium, lightTextPrimary. */
.search-row__cancel {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: var(--gutter) 0;
  font: var(--app-button);
  font-family: var(--app-font-sans);
  color: var(--app-text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.search-row__cancel[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────
   Glass nav backdrop + title
   Two-layer composition inside .device-screen so the title isn't
   masked by the backdrop's blur-fade gradient (mask applies to the
   whole element including children, which washed the title out).
   Stack (z-index, all within .device-screen's isolation context):
     .screens              1   scrollable content
     .glass-nav-backdrop   5   beige tint + blur, mask-faded at bottom
     .glass-nav-title      6   17pt semibold "Home", solid #111
     .status-bar           7   9:41 / signal / wifi / battery
     .dynamic-island       8   black pill silhouette
     .tab-bar              9   floating tab pill
   JS fades both backdrop and title together on scroll (multiplier ×3,
   fully opaque by ~33% scroll). 120pt total height with the bottom
   ~24pt being the soft fade tail.
   ───────────────────────────────────────────────────────────────── */
.glass-nav-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Values match CoreUI/.../GlassNavBackdrop.swift exactly:
     height: gutter × 16 = 128pt
     backdropOpacity: 0.9
     plateauStop: 0.75
     No blur, no material, no mask. The gradient's own alpha taper
     IS the soft edge — layering backdrop-filter on top of it was
     what produced the visible cutoff. */
  height: 128px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(239, 237, 233, 0.9) 0%,
    rgba(239, 237, 233, 0.9) 75%,
    rgba(239, 237, 233, 0)   100%
  );
  opacity: 0;
  will-change: opacity;
}

.glass-nav-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;                 /* sits in toolbar area, above the soft fade tail */
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 54px;            /* skip status-bar area */
  font: var(--app-nav-title);   /* 17pt semibold SF Pro */
  color: var(--app-text-primary);
  opacity: 0;
  will-change: opacity;
}

/* Per-screen collapsed toolbar that pairs with the glass-nav-backdrop.
   Used on Clients List (search/add/filter), and the same pattern will
   carry over to Orders List, My Account, and Notifications. Opacity is
   driven by scroll progress in JS (same value as the backdrop), so the
   buttons appear in lockstep with the backdrop fade. */
.glass-nav-toolbar {
  position: absolute;
  top: 54px;                    /* below the status-bar area */
  left: var(--gutter-double);
  right: var(--gutter-double);
  height: 44px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;         /* JS re-enables once fade-in clears 30% */
  will-change: opacity;
}

.glass-nav-toolbar[hidden] { display: none; }

.glass-nav-toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: var(--gutter);
}

.glass-nav-toolbar > *,
.glass-nav-toolbar__right > * {
  pointer-events: auto;
}