/* ==========================================================================
   Page Header Chrome — Shared
   --------------------------------------------------------------------------
   Edge-to-edge gray header bar at the top of pages, plus a content wrapper
   that restores padding inside the (now-flush) .dashboard-content area.

   Used by:
   - Dashboard home (Overview header)
   - Merchant pages (Onboarding Agent header) via merchants_page.css @import
   - Merchant detail layout (Onboarding Agent breadcrumb header)
   - Future agent rollouts (risk, monitoring, periodic_control)

   Pages opt in by linking this CSS in their extra_css block — once loaded,
   .dashboard-content padding is zeroed out so .page-header-bar can render
   edge-to-edge. Restore inner padding with .page-content around your body.
   ========================================================================== */

/* Zero out the dashboard-layout's content padding so a page header bar
   can sit flush against the top/sides. Body content lives inside
   .page-content which restores 24px padding. */
.dashboard-content { padding: 0 !important; }

/* Edge-to-edge header bar at the top of the page. height is FIXED at
   56px so every page that uses this chrome has pixel-identical bar
   regardless of whether it includes a back button, action buttons,
   or just the title. Padding is 13px so the 28px back button has 1px
   buffer inside the 27px content area. */
.page-header-bar {
    background: light-dark(var(--color-neutral-50, oklch(98.5% 0 0)), #000);
    border-bottom: 1px solid #e5e7eb;
    padding: 13px 20px 13px 32px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 60;
}

/* Left-side group inside .page-header-bar — back button + icon + title. */
.page-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Right-side group — Support link + user menu trigger sit together. */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Support pill — icon + label. Typography copied wholesale from Cloudflare
   Kumo's text-color-kumo-default + text-base scale (14px / 500 / 1.5 /
   -0.01em / antialiased / cv02-04+calt feature settings, color #171717
   ≈ neutral-900). font-family stays on --font-sans (project default). */
.page-header-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #171717;
    font-feature-settings: "cv02", "cv03", "cv04", "calt";
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.page-header-support:hover,
.page-header-support:focus {
    background: #f2f2f2;
    color: #0a0a0a;
    text-decoration: none;
}
.page-header-support svg {
    flex-shrink: 0;
}

/* Scoped override — page header bar's title takes Cloudflare-Kumo's
   compact app-title typography. font-family stays on our Funnel Sans
   (not the global .display-heading's Funnel Display); everything else
   is taken from Kumo: 14px (--text-base), weight 500 (medium), line
   1.5, -0.01em letter-spacing, cv01-04+calt feature settings, and
   antialiased smoothing. Color tracks --text-color-kumo-default
   (≈ neutral-900 / #171717) — we use the project equivalent. */
.page-header-bar .display-heading,
.page-header-bar .display-heading-sans {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #171717;
    font-feature-settings: "cv02", "cv03", "cv04", "calt";
    -webkit-font-smoothing: antialiased;
}

/* Body content wrapper, restores padding inside the flush .dashboard-content.
   Named .page-body (not .page-content) to avoid clashing with the existing
   .page-content used in merchant detail layout for its main content area.
   Top padding is 32px (vs 24 sides/bottom) so the page hero / first content
   sits 32px below the page header bar — matches the visual rhythm we use
   on list pages. */
.page-body {
    padding: 32px 24px 24px 32px;
}

/* Page hero — title + description block that sits below the page header
   chrome (and tabs) and above the page body content. Mirrors the dashboard
   "Welcome back" hierarchy so list pages get a clear lead-in. The hero
   itself has no margins; vertical spacing comes from the parent's
   padding-top (32px) above and the divider's margin-bottom (16px) below. */
/* Hero heading sizing — Cloudflare-Kumo --text-3xl: 30px / weight 600 /
   line-height 1.5 / letter-spacing -0.01em. Font-family stays on Funnel
   Display (inherited from .display-heading). Overrides the global
   .display-heading (22px / 800 / 1.2 / -0.02em) just inside .page-hero. */
.page-hero .display-heading,
.page-hero .display-heading-sans {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #313131;
}
/* Hero eyebrow — small label above the h2 (e.g. the parent agent name).
   Uses --font-sans (project sans), weight 600, color #4a4a4a, line-height
   1.5, with -0.01em tracking to match the h2's optical alignment. */
.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #4a4a4a;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "calt";
    margin: 0;
}
.page-hero-eyebrow-icon {
    flex-shrink: 0;
    display: block;
}
.page-hero-desc {
    font-size: 16px;
    color: #4a4a4a;
    font-weight: 400;
    margin: 6px 0 0;
    line-height: 1.25;
}
/* Hero divider — two variants:
   - Default (when the hero has a Usage Video badge): Cloudflare-Kumo
     "kumo line" — 1px border-top in #d9d9d9, margins 8/16 (tight, since
     the badge already adds vertical breathing above it).
   - `.page-hero-rule--soft` (no badge): softer 1px hairline in #e5e7eb
     with wider top + bottom margins (14/24) so the hero feels finished
     without a badge anchoring the bottom edge. Auto-applied by
     page_hero.html when `hero_video_id` is not set; used on Profile,
     Risk Chart, Periodic Control, and other badge-less heroes. */
.page-hero-rule {
    border-top: 1px solid #d9d9d9;
    margin-top: 8px;
    margin-bottom: 16px;
}
.page-hero-rule--soft {
    border-top: none;
    height: 1px;
    background: #e5e7eb;
    margin-top: 14px;
    margin-bottom: 24px;
}

/* Optional "Usage Video" outline-pill badge inside .page-hero — links
   out to the YouTube video in a new tab. No embedded iframe; the
   badge IS the entire UI affordance.

   Cloudflare-Kumo style: sizing (4px 16px padding, 100vw radius,
   1px inset border via box-shadow) AND typography (font-size 14,
   weight 500, line-height 1.2, letter-spacing -0.01em, antialiased
   smoothing, feature settings) taken from Kumo. Only font-family
   stays on --font-sans (inherited from <html>); color uses project
   brand blue (#2563eb) instead of Kumo's #056dff. */
.page-hero-video-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 4px 16px;
    background: #fff;
    box-shadow: 0 0 0 1px #2563eb inset;
    border-radius: 100vw;
    color: #2563eb;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "calt";
    text-decoration: none;
    transition: all 0.3s ease;
}
.page-hero-video-label:hover {
    background: #eff6ff;
    color: #1e40af;
    box-shadow: 0 0 0 1px #1e40af inset;
    text-decoration: none;
}
.page-hero-video-label svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Page Header Search (.phs-*) — global merchant/page search dropdown that
   sits inside the header bar's left column, right after the org-name h1.
   Markup lives in templates/_includes/headers/org_page_header.html; the
   inline <script> in that partial wires events and provides MOCK data.

   The .page-header-inner override below makes the inner column flex-grow
   so the search input can stretch to its max-width; without it the
   default content-sized inner column squashes the input.
   ========================================================================== */
.page-header-inner {
    flex: 1;
    min-width: 0;
}

.phs-root {
    position: relative;
    margin-left: 6px;
    flex: 1;
    max-width: 420px;
    min-width: 200px;
    font-family: var(--font-sans);
}

.phs-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.phs-input-wrap:hover {
    border-color: #d4d4d4;
}
.phs-root.is-open .phs-input-wrap,
.phs-input-wrap:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.phs-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    flex-shrink: 0;
}
.phs-input-wrap:focus-within .phs-input-icon {
    color: #2563eb;
}

.phs-input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 36px 0 30px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #171717;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "calt";
}
.phs-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.phs-input-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: #737373;
    line-height: 1;
    pointer-events: none;
}
.phs-root.is-open .phs-input-kbd,
.phs-input-wrap:focus-within .phs-input-kbd {
    opacity: 0;
}

.phs-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 480px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 6px;
    z-index: 200;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.phs-root.is-open .phs-results {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.phs-empty,
.phs-noresults {
    padding: 20px 12px;
    text-align: center;
}

/* Loading skeleton — shown for ~2s after the user pauses typing, before
   results render. Two mock groups with varied item widths so the page
   doesn't feel dead while results "load" (currently a synthetic delay
   on top of the mock data). Uses the same shimmer pattern as
   .skeleton-loader in merchant_detail.css but scoped under
   `phsShimmer` to avoid coupling with that file. */
/* Screen-reader-only text helper. Used by .phs-loading to announce
   "Searching..." while the visual skeleton plays. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.phs-loading-group + .phs-loading-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #f2f2f2;
}
.phs-loading-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 6px;
}
.phs-skel {
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: phsShimmer 1.4s ease-in-out infinite;
}
.phs-skel-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.phs-skel-name {
    width: 110px;
    height: 10px;
}
.phs-skel-count {
    width: 22px;
    height: 14px;
    border-radius: 9999px;
    margin-left: auto;
}
.phs-loading-item {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.phs-skel-title {
    height: 11px;
}
.phs-skel-sub {
    height: 9px;
}

@keyframes phsShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.phs-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: #313131;
    line-height: 1.4;
}
.phs-empty-hint {
    font-size: 12px;
    font-weight: 400;
    color: #737373;
    margin-top: 4px;
    line-height: 1.4;
}

.phs-group + .phs-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #f2f2f2;
}
.phs-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.phs-group-icon {
    flex-shrink: 0;
    display: block;
}
.phs-group-name {
    flex: 0 0 auto;
}

/* Count chip — mirrors the project-wide .badge / .badge-neutral baseline
   (static/css/data_table.css + components/cards.css) but compact:
   small (10px / 14px line-height), pill radius, neutral fill + hairline. */
.phs-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 16px;
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #4a4a4a;
    border: 1px solid #e5e7eb;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.phs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #313131;
    text-align: left;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    line-height: 1.3;
}
.phs-item:hover,
.phs-item.is-active,
.phs-item:focus-visible {
    background: #f2f2f2;
    color: #0a0a0a;
    text-decoration: none;
    outline: none;
}
.phs-item-body {
    flex: 1;
    min-width: 0;
}
.phs-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #171717;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phs-item-title mark {
    background: rgba(37, 99, 235, 0.12);
    color: #1e40af;
    padding: 0 2px;
    border-radius: 3px;
}
.phs-item-sub {
    font-size: 11px;
    font-weight: 400;
    color: #737373;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phs-item-arrow {
    color: #c4c4c4;
    flex-shrink: 0;
}
.phs-item:hover .phs-item-arrow,
.phs-item.is-active .phs-item-arrow {
    color: #525252;
}

@media (max-width: 768px) {
    .phs-root {
        display: none;
    }
}