/**
 * Admin panel brand tokens (see docs/brand.md).
 * Served from public/ so Filament does not require npm run build / Vite manifest.
 */
:root {
    --pf-gradient: linear-gradient(135deg, #eb5589, #f08354, #f9b233);
    --pf-coral: #f08354;
    --pf-pink: #eb5589;
    --pf-amber: #f9b233;
    --pf-charcoal: #4d5158;
}

/** Login accent bar (panels::auth.login.form.before) — uses brand tokens only */
.pf-login-gradient-accent {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, var(--pf-pink), var(--pf-coral), var(--pf-amber));
}

/**
 * Brand logo: Filament sets height via brandLogoHeight(). Ensure the SVG keeps a
 * readable width (some layouts were effectively shrinking the wordmark).
 */
.fi-logo img {
    width: auto !important;
    max-width: min(100%, 22rem);
    object-fit: contain;
}

/* Login (fi-simple-page): allow wide wordmark to use full brand height — global max-width
   can shrink the image below brandLogoHeight() when the SVG is wide. */
.fi-simple-page .fi-simple-header .fi-logo img {
    max-width: min(100%, 48rem);
}

/**
 * Topbar: workspace picker, mode badge separator, and notification bell.
 * These live in custom Blade partials outside Filament's compiled panel CSS so
 * Tailwind utilities are not available there — styles are defined here instead.
 */

/** 1px hairline separators — light / dark aware */
.pf-topbar-separator {
    width: 1px;
    height: 1.25rem;
    background-color: #d1d5db; /* gray-300 */
    flex-shrink: 0;
}

.dark .pf-topbar-separator {
    background-color: rgba(255, 255, 255, 0.15);
}

/** Separator variant used between logo and mode badge — needs horizontal breathing room */
.pf-topbar-separator--after-logo {
    margin-inline: 0.5rem;
}

/**
 * Mode badge — structural layout only.
 * Colour modifier classes (bg-*, text-*, ring-*) are intentionally kept as Tailwind
 * utilities because they are drawn exclusively from Filament's own colour palette and
 * are guaranteed to be present in the compiled panel CSS.
 */
.pf-mode-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;  /* rounded-md */
    padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
    font-size: 0.75rem;       /* text-xs */
    font-weight: 500;         /* font-medium */
    white-space: nowrap;
}

/** Workspace picker root — must stay inline-flex so it sits in the topbar flex row */
.pf-workspace-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/** Trigger button — mirror fi-topbar icon-button sizing & hover states */
.pf-workspace-picker-trigger {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.5rem;   /* rounded-lg */
    padding: 0.375rem 0.625rem; /* py-1.5 px-2.5 */
    font-size: 0.875rem;
    line-height: 1;
    color: #374151;          /* gray-700 */
    outline: none;
    transition: background-color 75ms;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.pf-workspace-picker-trigger:hover,
.pf-workspace-picker-trigger:focus {
    background-color: #f9fafb; /* gray-50 */
}

/** Keyboard focus ring — replaces removed browser outline */
.pf-workspace-picker-trigger:focus-visible {
    outline: 2px solid #6366f1; /* indigo-500 — matches Filament's default ring */
    outline-offset: 2px;
}

.dark .pf-workspace-picker-trigger {
    color: #e5e7eb; /* gray-200 */
}

.dark .pf-workspace-picker-trigger:hover,
.dark .pf-workspace-picker-trigger:focus {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .pf-workspace-picker-trigger:focus-visible {
    outline-color: #818cf8; /* indigo-400 — better contrast on dark */
}

/** Icons inside the trigger */
.pf-workspace-picker-trigger svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/** Truncated workspace name */
.pf-workspace-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

/** Disabled notification bell placeholder */
.pf-topbar-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0.5rem;
    padding: 0.375rem;
    color: #9ca3af; /* gray-400 */
    background: none;
    border: none;
}

.pf-topbar-bell svg {
    width: 1.25rem;
    height: 1.25rem;
}

/** Workspace picker dropdown panel */
.pf-workspace-picker-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.5rem;       /* mt-2 */
    width: 14rem;             /* w-56 */
    transform-origin: top right;
    border-radius: 0.5rem;    /* rounded-lg */
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    outline: 1px solid rgb(3 7 18 / 0.05); /* ring-1 ring-gray-950/5 */
    outline-offset: -1px;
    padding: 0.25rem 0;       /* py-1 */
}

.dark .pf-workspace-picker-menu {
    background-color: #111827; /* gray-900 */
    outline-color: rgba(255, 255, 255, 0.1); /* ring-white/10 */
}

/** Empty state message */
.pf-workspace-picker-empty {
    padding: 0.5rem 0.75rem;  /* py-2 px-3 */
    font-size: 0.875rem;
    color: #6b7280;           /* gray-500 */
}

.dark .pf-workspace-picker-empty {
    color: #9ca3af;           /* gray-400 */
}

/** Organisation group header inside the picker dropdown */
.pf-workspace-picker-org-header {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.6875rem;       /* ~11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;             /* gray-400 */
    border-top: 1px solid #f3f4f6; /* gray-100 */
}

.pf-workspace-picker-org-header:first-child {
    border-top: none;
}

.dark .pf-workspace-picker-org-header {
    color: #6b7280;             /* gray-500 */
    border-top-color: rgba(255, 255, 255, 0.06);
}

/** Individual workspace option button */
.pf-workspace-picker-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;  /* py-2 px-3 */
    text-align: left;
    font-size: 0.875rem;
    transition: background-color 75ms;
    background: none;
    border: none;
    cursor: pointer;
}

.pf-workspace-picker-item:hover {
    background-color: #f9fafb; /* gray-50 */
}

.dark .pf-workspace-picker-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.pf-workspace-picker-item-name {
    display: block;
    font-weight: 500;
    color: #111827;           /* gray-900 */
}

.dark .pf-workspace-picker-item-name {
    color: #ffffff;
}

.pf-workspace-picker-item-key {
    display: block;
    font-size: 0.75rem;       /* text-xs */
    color: #6b7280;           /* gray-500 */
}

.dark .pf-workspace-picker-item-key {
    color: #9ca3af;           /* gray-400 */
}


/* Action inbox bell (replaces disabled placeholder) */
.pf-topbar-inbox {
    position: relative;
    display: inline-flex;
}

.pf-topbar-bell {
    opacity: 1;
    cursor: pointer;
}

.pf-topbar-bell:hover,
.pf-topbar-bell:focus {
    color: #4b5563;
    background-color: #f3f4f6;
}

.pf-topbar-bell:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.dark .pf-topbar-bell:hover,
.dark .pf-topbar-bell:focus {
    color: #e5e7eb;
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .pf-topbar-bell:focus-visible {
    outline-color: #818cf8;
}

.pf-topbar-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: center;
}

.pf-topbar-inbox-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.5rem;
    width: 20rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    outline: 1px solid rgb(3 7 18 / 0.05);
    padding: 0.5rem 0;
}

.dark .pf-topbar-inbox-panel {
    background: #111827;
    outline-color: rgba(255, 255, 255, 0.1);
}

.pf-topbar-inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
}

.pf-topbar-inbox-link {
    font-weight: 500;
    text-transform: none;
    color: #2563eb;
}

.pf-topbar-inbox-item {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
}

.pf-topbar-inbox-item:hover {
    background: #f9fafb;
}

.dark .pf-topbar-inbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.pf-topbar-inbox-item-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
}

.pf-topbar-inbox-item-message {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
}

.pf-topbar-inbox-empty {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
}

/* ------------------------------------------------------------------ */
/* Nav chrome v2 (#1008 P4a) — two-tier rail + cluster panel shell    */
/* ------------------------------------------------------------------ */

.pf-nav-chrome-v2,
.pf-nav-chrome-v2 .fi-body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Allow the content column to shrink beside the fixed-width sidebar — without
   this, wide non-scrolling content can push the column off-screen (no min-width:0). */
.pf-nav-chrome-v2 .fi-main-ctn {
    min-width: 0;
}

/* Light-mode canvas only. In dark mode this was left forced to #f6f6f7 while
   Filament whitens page text → invisible headings. Gating to :not(.dark) lets
   dark mode fall back to Filament's own dark surface. */
.pf-nav-chrome-v2:not(.dark) .fi-main-ctn,
.pf-nav-chrome-v2:not(.dark) .fi-layout {
    background: #f6f6f7;
}

.pf-nav-chrome-v2 .fi-topbar-ctn:not(.pf-nav-chrome-topbar-ctn) {
    display: none !important;
}

.pf-nav-chrome-v2 .fi-topbar-start,
.pf-nav-chrome-v2 .fi-topbar-end:not(.pf-nav-chrome-topbar-end) {
    display: none !important;
}

.pf-nav-chrome-v2 .pf-nav-chrome-sidebar {
    width: 19.125rem !important; /* 68px rail + 238px panel */
    min-width: 19.125rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.pf-nav-chrome-v2 .pf-nav-chrome-sidebar .fi-sidebar-header-ctn,
.pf-nav-chrome-v2 .pf-nav-chrome-sidebar .fi-sidebar-nav,
.pf-nav-chrome-v2 .pf-nav-chrome-sidebar .fi-sidebar-footer {
    display: none !important;
}

.pf-nav-chrome-shell {
    display: flex;
    /* Fill the sidebar slot Filament already sizes (desktop: calc(100dvh - 4rem),
       offset top:4rem). Using 100vh here overran that by ~64px → page-level
       double-scroll + the rail footer (avatar/popover) pushed below the fold.
       100% tracks the aside's real height at every breakpoint. */
    height: 100%;
    min-height: 0;
}

.pf-nav-chrome-rail {
    width: 4.25rem; /* 68px */
    background: #1e2024;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    position: relative;
    /* Must sit ABOVE the popover/flyout backdrops (z:40/44, children of the
       outer aside). The account popover and rail flyouts live INSIDE this rail,
       so their own z-index is trapped in this stacking context — if the rail
       sits below the backdrops, the (transparent) backdrop paints over the
       popover and swallows every click ("nothing in the menu works"). Keeping
       the rail above the backdrops lets the popover/flyouts receive clicks
       while the backdrops still cover the page content behind them. */
    z-index: 50;
}

.pf-nav-chrome-rail-brand {
    margin-bottom: 1rem;
}

.pf-nav-chrome-rail-mark {
    width: 2rem;
    height: 2rem;
}

.pf-nav-chrome-rail-icons {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.pf-nav-chrome-rail-divider {
    width: 1.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0.5rem 0;
}

.pf-nav-chrome-rail-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.8125rem;
    color: #9aa0a8;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.pf-nav-chrome-rail-btn:hover {
    color: #d7dadf;
    background: rgba(255, 255, 255, 0.06);
}

.pf-nav-chrome-rail-btn--active {
    color: #f08354;
    background: rgba(240, 131, 84, 0.14);
}

.pf-nav-chrome-rail-btn--active::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 0.6875rem;
    bottom: 0.6875rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f08354;
}

.pf-nav-chrome-rail-star {
    position: absolute;
    top: 0.3125rem;
    right: 0.4375rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f9b233;
    box-shadow: 0 0 0 2px #1e2024;
}

.pf-nav-chrome-rail-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.pf-nav-chrome-rail-footer {
    position: relative;
    margin-top: auto;
    padding-bottom: 0.5rem;
}

.pf-nav-chrome-avatar-trigger {
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.pf-nav-chrome-avatar-trigger:hover {
    border-color: rgba(255, 255, 255, 0.32);
}

.pf-nav-chrome-avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, #eb5589, #f08354, #f9b233);
    color: #fff;
    font-weight: 700;
}

.pf-nav-chrome-avatar-circle--rail {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.8125rem;
}

.pf-nav-chrome-avatar-circle--lg {
    width: 2.375rem;
    height: 2.375rem;
    font-size: 0.8125rem;
    flex: 0 0 auto;
}

.pf-nav-chrome-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: none;
    background: transparent;
    cursor: default;
}

.pf-nav-chrome-popover {
    position: absolute;
    left: 3.375rem;
    bottom: 0;
    width: 17rem;
    background: #2a2d31;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
    z-index: 50;
    color: #c7cace;
}

.pf-nav-chrome-popover-identity {
    display: flex;
    gap: 0.6875rem;
    align-items: center;
    padding: 0.625rem 0.625rem 0.75rem;
}

.pf-nav-chrome-popover-identity-text {
    min-width: 0;
    flex: 1;
}

.pf-nav-chrome-popover-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-nav-chrome-popover-email {
    font-size: 0.75rem;
    color: #8c9098;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-nav-chrome-role-chip {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    background: rgba(240, 131, 84, 0.16);
    color: #f3a17b;
    font-size: 0.66rem;
    font-weight: 700;
}

.pf-nav-chrome-popover-section {
    padding: 0.25rem 0.25rem 0.375rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.pf-nav-chrome-popover-section-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7079;
    padding: 0.25rem 0.625rem;
}

.pf-nav-chrome-popover-link {
    display: block;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 0.5625rem;
    color: #c7cace;
    text-decoration: none;
    font-size: 0.84rem;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.pf-nav-chrome-popover-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.pf-nav-chrome-popover-link--danger {
    color: #e9897f;
}

.pf-nav-chrome-popover-link--danger:hover {
    background: rgba(233, 137, 127, 0.1);
    color: #e9897f;
}

.pf-nav-chrome-popover-muted {
    font-size: 0.84rem;
    color: #8c9098;
}

.pf-nav-chrome-popover-logout {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.25rem;
}

.pf-nav-chrome-panel {
    width: 14.875rem; /* 238px */
    background: #26282d;
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.pf-nav-chrome-panel-header {
    padding: 1.25rem 0.875rem 0.625rem;
}

.pf-nav-chrome-panel-title {
    margin: 0;
    font-size: 1.03125rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.pf-nav-chrome-panel-star {
    color: #f9b233;
    font-size: 0.6875rem;
}

.pf-nav-chrome-panel-desc {
    margin: 0.4375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: #878b93;
}

.pf-nav-chrome-panel-clusters {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.5rem 1rem;
}

.pf-nav-chrome-cluster + .pf-nav-chrome-cluster {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pf-nav-chrome-cluster-label {
    padding: 0.5625rem 0.5rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #666b73;
}

.pf-nav-chrome-cluster-items {
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
}

.pf-nav-chrome-panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5rem;
    color: #a8adb4;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.pf-nav-chrome-panel-link-label {
    min-width: 0;
}

.pf-nav-chrome-panel-link:hover {
    color: #e7e9ec;
    background: rgba(255, 255, 255, 0.05);
}

.pf-nav-chrome-panel-link--active {
    color: #f08354;
    background: rgba(240, 131, 84, 0.13);
    font-weight: 600;
}

.pf-nav-chrome-topbar-ctn .fi-topbar {
    background: #fff;
    border-bottom: 1px solid #ececee;
    /* Match Filament's hard-coded 4rem topbar height — the sidebar offset is
       top:4rem / calc(100dvh - 4rem), so 3.75rem here left a 4px seam. */
    min-height: 4rem;
    box-shadow: none;
}

.pf-nav-chrome-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding-inline: 1.625rem;
}

.pf-nav-chrome-topbar-start {
    display: flex;
    flex-direction: column;
    min-width: 12rem;
}

.pf-nav-chrome-topbar-island {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a3a7ae;
}

.pf-nav-chrome-topbar-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #33363b;
    letter-spacing: -0.01em;
}

.pf-nav-chrome-topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pf-nav-chrome-search-wrap {
    position: relative;
    width: min(100%, 24rem);
}

.pf-nav-chrome-search-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 1px solid #ececee;
    border-radius: 0.625rem;
    padding: 0.45rem 0.75rem;
    background: #f4f4f5;
}

.pf-nav-chrome-search-icon {
    width: 0.95rem;
    height: 0.95rem;
    color: #9ca3af;
    flex: 0 0 auto;
}

.pf-nav-chrome-search {
    width: 100%;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    background: transparent;
    color: #4d5158;
}

.pf-nav-chrome-search:focus {
    outline: none;
}

.pf-nav-chrome-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 0.625rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    max-height: 18rem;
    overflow: auto;
}

.pf-nav-chrome-search-result {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    text-decoration: none;
    color: inherit;
}

.pf-nav-chrome-search-result:hover {
    background: #faf6f3;
}

.pf-nav-chrome-search-result-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #33363b;
}

.pf-nav-chrome-search-result-island {
    font-size: 0.72rem;
    color: #9ca3af;
}

.pf-nav-chrome-workspace-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #ececee;
    border-radius: 0.625rem;
    background: #fff;
    max-width: 16rem;
}

.pf-nav-chrome-workspace-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4d5158;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-nav-chrome-popover-workspace .pf-workspace-picker--popover {
    position: relative;
}

.pf-workspace-picker-popover-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.pf-workspace-picker-current-mark {
    color: #f08354;
    font-weight: 700;
}

.pf-workspace-picker-menu--popover {
    left: 0;
    right: auto;
    min-width: 14rem;
    max-width: 18rem;
    background: #1f2125;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.pf-workspace-picker--popover .pf-workspace-picker-popover-current {
    color: #fff;
    font-weight: 600;
}

.pf-workspace-picker--popover .pf-workspace-picker-item {
    color: #c7cace;
}

.pf-workspace-picker--popover .pf-workspace-picker-item-name {
    color: #f3f4f6;
}

.pf-workspace-picker--popover .pf-workspace-picker-item-key {
    color: #9ca3af;
}

.pf-workspace-picker--popover .pf-workspace-picker-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.pf-workspace-picker--popover .pf-workspace-picker-empty {
    color: #8c9098;
}

.pf-nav-chrome-popover-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.pf-nav-chrome-popover-theme .fi-theme-switcher {
    scale: 0.85;
    transform-origin: right center;
}

.pf-nav-chrome-topbar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.pf-nav-chrome-primary-action {
    border: none;
    border-radius: 0.625rem;
    padding: 0.5625rem 0.9375rem;
    background: #f08354;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pf-nav-chrome-primary-action:hover {
    background: #e2774a;
    color: #fff;
}

.pf-nav-chrome-v2 .fi-topbar-end .fi-user-menu,
.pf-nav-chrome-v2 .fi-topbar-open-sidebar-btn,
.pf-nav-chrome-v2 .fi-topbar-close-sidebar-btn {
    display: none !important;
}

/* P5b — badges, rail flyouts (#372), responsive compact rail */
.pf-nav-chrome-rail-item {
    position: relative;
}

.pf-nav-chrome-rail-badge-dot {
    position: absolute;
    top: 0.3125rem;
    right: 0.3125rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f08354;
    box-shadow: 0 0 0 2px #1e2024;
    z-index: 1;
}

.pf-nav-chrome-item-badge {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(240, 131, 84, 0.16);
    color: #f0936a;
}

.pf-nav-chrome-flyout-backdrop,
.pf-nav-chrome-popover-backdrop {
    cursor: default;
}

.pf-nav-chrome-flyout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 44;
    border: none;
    background: rgba(0, 0, 0, 0.18);
}

.pf-nav-chrome-flyout {
    position: absolute;
    left: calc(100% + 0.375rem);
    /* Anchor to the rail item's top and grow downward. Centering with
       top:50%/translateY(-50%) let tall flyouts on upper rail icons extend up
       into the sticky topbar, which paints over the sidebar and swallowed the
       flyout's clicks. Rail icons all sit below the 4rem topbar, so top:0 keeps
       the flyout clear of it. */
    top: 0;
    width: 14.5rem;
    max-height: min(70vh, 24rem);
    overflow-y: auto;
    background: #2a2d31;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.875rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    padding: 0.375rem;
    z-index: 45;
}

.pf-nav-chrome-flyout-header {
    padding: 0.5rem 0.625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8c9098;
}

.pf-nav-chrome-flyout-cluster-label {
    padding: 0.375rem 0.625rem 0.125rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #666b73;
}

.pf-nav-chrome-flyout-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5rem;
    color: #c7cace;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.pf-nav-chrome-flyout-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.pf-nav-chrome-flyout-link--active {
    color: #f08354;
    background: rgba(240, 131, 84, 0.13);
    font-weight: 600;
}

@media (max-width: 1023px) {
    .pf-nav-chrome-v2 .pf-nav-chrome-sidebar {
        width: 4.25rem !important;
        min-width: 4.25rem !important;
        /* Below lg Filament shoves the sidebar off-canvas (translate:-100%) and
           expects its hamburger to reopen it — but our custom topbar has no
           hamburger, so nav was completely lost. Keep the rail in-flow and
           visible; the cluster panel collapses to the rail flyouts (already
           wired in the blade's compact/flyout Alpine logic). */
        translate: none !important;
        transform: none !important;
        position: sticky !important;
        top: 4rem !important;
        height: calc(100dvh - 4rem) !important;
    }

    .pf-nav-chrome-panel {
        display: none;
    }

    .pf-nav-chrome-flyout {
        left: calc(100% + 0.25rem);
        width: min(16rem, calc(100vw - 5.5rem));
    }
}

/* ------------------------------------------------------------------ */
/* Dark mode — topbar + its light-tuned children. The rail/panel/      */
/* popover are intentionally always-dark; only the white topbar zone   */
/* needed dark variants. Without these, toggling dark mode left a      */
/* white topbar with near-invisible dark text + a white search/chip.   */
/* ------------------------------------------------------------------ */
.dark .pf-nav-chrome-topbar-ctn .fi-topbar {
    background: #1f2125;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .pf-nav-chrome-topbar-title {
    color: #f3f4f6;
}

.dark .pf-nav-chrome-topbar-island {
    color: #8c9098;
}

.dark .pf-nav-chrome-search-label {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .pf-nav-chrome-search {
    color: #e7e9ec;
}

.dark .pf-nav-chrome-search-results {
    background: #26282d;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dark .pf-nav-chrome-search-result-label {
    color: #e7e9ec;
}

.dark .pf-nav-chrome-search-result:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dark .pf-nav-chrome-workspace-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .pf-nav-chrome-workspace-name {
    color: #e7e9ec;
}

/* ------------------------------------------------------------------ */
/* Overview home (#1061) — KPI cards + needs-attention + activity      */
/* App-authored utilities aren't in Filament's compiled Tailwind, so   */
/* the Overview is styled here (same approach as the nav chrome).      */
/* ------------------------------------------------------------------ */

.pf-overview-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.pf-overview-cols {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 18px;
    margin-top: 18px;
}

@media (max-width: 1100px) {
    .pf-overview-kpis { grid-template-columns: repeat(2, 1fr); }
    .pf-overview-cols { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .pf-overview-kpis { grid-template-columns: 1fr; }
}

.pf-overview-card {
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
}

.pf-overview-kpi { padding: 16px 17px; }
.pf-overview-kpi-label { font-size: 12px; font-weight: 600; color: #8b9098; }
.pf-overview-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #2c2f34;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pf-overview-kpi-caption { font-size: 12px; font-weight: 500; color: #aeb2b9; margin-top: 4px; }

.pf-overview-panel { padding: 18px 19px; }
.pf-overview-panel--flush { padding: 0; overflow: hidden; }
.pf-overview-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 19px 12px;
}
.pf-overview-panel-title { font-size: 14px; font-weight: 700; color: #33363b; }
.pf-overview-panel-sub { font-size: 12px; color: #9a9ea5; margin-top: 2px; }
.pf-overview-panel-link { font-size: 12px; color: #7b8088; text-decoration: underline; white-space: nowrap; }

.pf-overview-attn { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.pf-overview-attn-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 8px;
    border-radius: 9px;
    text-decoration: none;
    transition: background .12s ease;
}
.pf-overview-attn-row:hover { background: #faf6f3; }
.pf-overview-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.pf-overview-dot--danger { background: #e2774a; }
.pf-overview-dot--warning { background: #F9B233; }
.pf-overview-attn-body { flex: 1; min-width: 0; }
.pf-overview-attn-label { font-size: 13.5px; font-weight: 600; color: #3a3d42; }
.pf-overview-attn-context { font-size: 12px; color: #9a9ea5; }
.pf-overview-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pf-overview-badge--danger { background: rgba(226,119,74,.14); color: #cf6638; }
.pf-overview-badge--warning { background: rgba(183,121,31,.14); color: #a06a1c; }
.pf-overview-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 8px;
    font-size: 13.5px;
    color: #6f747c;
}
.pf-overview-empty svg { width: 18px; height: 18px; color: #1F8A5B; flex: 0 0 auto; }

.pf-overview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-overview-table th { color: #9a9ea5; text-align: left; font-weight: 600; padding: 8px 19px; }
.pf-overview-table th.is-right { text-align: right; }
.pf-overview-table td { padding: 11px 19px; color: #3a3d42; border-top: 1px solid #f0f0f1; }
.pf-overview-table td.is-right { text-align: right; }
.pf-overview-mono { color: #7b8088; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pf-overview-chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    background: #f2f3f4;
    color: #4d5158;
}
.pf-overview-when { font-size: 12px; color: #9a9ea5; }
.pf-overview-when-link { margin-left: 8px; font-size: 12px; color: #e2774a; text-decoration: none; }
.pf-overview-empty-row { padding: 16px 19px; color: #9a9ea5; font-size: 13px; }

/* dark mode */
.dark .pf-overview-card { background: #1d1e21; border-color: #313338; }
.dark .pf-overview-kpi-label { color: #9aa0a8; }
.dark .pf-overview-kpi-value { color: #f1f3f5; }
.dark .pf-overview-kpi-caption { color: #71767e; }
.dark .pf-overview-panel-title { color: #e7e9ec; }
.dark .pf-overview-attn-label { color: #d7dadf; }
.dark .pf-overview-attn-row:hover { background: rgba(255,255,255,.04); }
.dark .pf-overview-table td { color: #cfd2d7; border-top-color: #2a2c30; }
.dark .pf-overview-table th { color: #80858d; }
.dark .pf-overview-chip { background: #2a2c30; color: #c4c8ce; }
.dark .pf-overview-empty { color: #9aa0a8; }

/* ------------------------------------------------------------------ */
/* L2 shared scaffolds (docs/filament-admin-nav-l2-spec.md §1)         */
/* Plus Jakarta + tabular-nums on numeric surfaces; max width 1180px.  */
/* ------------------------------------------------------------------ */

.pf-l2-archetype,
.pf-l2-detail,
.pf-l2-table-card {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

.pf-l2-archetype {
    max-width: 1180px;
}

/* Status pills (§1.2) */
.pf-l2-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}
.pf-l2-pill--green { background: rgba(31, 138, 91, 0.12); color: #1F8A5B; }
.pf-l2-pill--amber { background: rgba(183, 121, 31, 0.13); color: #a06a1c; }
.pf-l2-pill--red { background: rgba(226, 119, 74, 0.14); color: #cf6638; }
.pf-l2-pill--gray { background: rgba(120, 124, 132, 0.14); color: #6b7079; }
.pf-l2-pill--pink { background: rgba(235, 85, 137, 0.13); color: #d8417a; }

/* Note banners (§1.2 noteColors) */
.pf-l2-note-banner {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}
.pf-l2-note-banner--green { background: rgba(31, 138, 91, 0.1); color: #1F8A5B; }
.pf-l2-note-banner--amber { background: rgba(183, 121, 31, 0.12); color: #a06a1c; }
.pf-l2-note-banner--red { background: rgba(226, 119, 74, 0.12); color: #cf6638; }
.pf-l2-note-banner--pink { background: rgba(235, 85, 137, 0.11); color: #d8417a; }

/* Bespoke / registry list toolbar (§1.3) */
.pf-l2-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.pf-l2-list-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-l2-list-tab {
    border: 1px solid #e3e4e7;
    background: #fff;
    color: #5f646c;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.pf-l2-list-tab.is-active {
    border-color: rgba(240, 131, 84, 0.35);
    background: rgba(240, 131, 84, 0.13);
    color: #cf6638;
}
.pf-l2-list-tab--red.is-active { color: #cf6638; }
.pf-l2-list-tab--pink.is-active { color: #d8417a; }
.pf-l2-list-toolbar-actions { display: flex; gap: 8px; }
.pf-l2-list-action,
.pf-l2-registry-cta {
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.pf-l2-list-action {
    border: 1px solid #e3e4e7;
    background: #fff;
    color: #5f646c;
}
.pf-l2-registry-cta {
    border: none;
    background: #F08354;
    color: #fff;
}
.pf-l2-registry-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

/* Shared table card */
.pf-l2-table-card {
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
    overflow: hidden;
}

/* Filament table inside L2 bespoke list card (§1.3) */
.pf-l2-filament-table-card > .fi-ta-ctn,
.pf-l2-filament-table-card > div > .fi-ta-ctn {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.pf-l2-filament-table-card .fi-ta-header-ctn {
    background: #fafafa;
    border-bottom: 1px solid #ececee;
}
.pf-l2-filament-table-card .fi-ta-header-cell {
    color: #9a9ea5;
    font-size: 13px;
    font-weight: 600;
}
.pf-l2-filament-table-card .fi-ta-row {
    cursor: pointer;
}
.pf-l2-filament-table-card .fi-ta-row:hover {
    background: #faf6f3;
}
.pf-l2-filament-table-card .fi-ta-cell {
    font-size: 13px;
}
.pf-l2-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-l2-table th {
    background: #fafafa;
    color: #9a9ea5;
    text-align: left;
    font-weight: 600;
    padding: 10px 16px;
}
.pf-l2-table th.is-right,
.pf-l2-table td.is-right { text-align: right; }
.pf-l2-table td {
    padding: 12px 16px;
    color: #3a3d42;
    border-top: 1px solid #f0f0f1;
}

/* Detail scaffold (§1.4 — 1.6fr / 1fr) */
.pf-l2-detail-head { margin-bottom: 14px; }
.pf-l2-detail-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9ea5;
}
.pf-l2-detail-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.pf-l2-detail-title {
    font-size: 24px;
    font-weight: 800;
    color: #2c2f34;
    margin: 0;
}
.pf-l2-detail-subtitle { font-size: 13px; color: #7b8088; margin-top: 4px; }
.pf-l2-detail-note { margin: 12px 0; }
.pf-l2-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 14px 0 16px;
}
.pf-l2-detail-stat {
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
    padding: 14px 15px;
}
.pf-l2-detail-stat-label { font-size: 12px; font-weight: 600; color: #8b9098; }
.pf-l2-detail-stat-value {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #2c2f34;
}
.pf-l2-detail-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: start;
}
.pf-l2-detail-main,
.pf-l2-detail-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pf-l2-section {
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
    padding: 16px;
}
.pf-l2-section-title { font-size: 14px; font-weight: 700; color: #33363b; margin-bottom: 8px; }
.pf-l2-section-text { font-size: 13px; color: #5f646c; line-height: 1.5; }
.pf-l2-section-kv { margin: 0; }
.pf-l2-section-kv-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 8px 0;
    border-top: 1px solid #f5f5f6;
}
.pf-l2-section-kv-row:first-child { border-top: none; padding-top: 0; }
.pf-l2-section-kv-row dt { margin: 0; color: #9a9ea5; font-weight: 400; }
.pf-l2-section-kv-row dd { margin: 0; font-weight: 600; color: #3a3d42; text-align: right; font-variant-numeric: tabular-nums; }
.pf-l2-section-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-l2-section-table th { font-weight: 600; padding: 8px 0; color: #9a9ea5; text-align: left; }
.pf-l2-section-table td { padding: 11px 0; color: #3a3d42; border-top: 1px solid #f0f0f1; font-variant-numeric: tabular-nums; }
.pf-l2-section-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-l2-section-tag {
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #4D5158;
    border: 1px solid #ececee;
}
.pf-l2-section--accent {
    border-left: 3px solid #F08354;
    padding-left: 14px;
}
.pf-l2-section-tag--active {
    background: rgba(240, 131, 84, 0.13);
    color: #cf6638;
    border-color: rgba(240, 131, 84, 0.35);
}
.pf-l2-section-list { list-style: none; margin: 0; padding: 0; }
.pf-l2-section-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid #f5f5f6;
}
.pf-l2-section-list-item:first-child { border-top: none; padding-top: 0; }
.pf-l2-section-list-title { font-size: 13.5px; font-weight: 600; color: #3a3d42; }
.pf-l2-section-list-meta { font-size: 12px; color: #9a9ea5; margin-top: 1px; }
.pf-l2-section-list-right { font-size: 13px; font-weight: 600; color: #6b7079; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pf-l2-section-unsupported { font-size: 13px; color: #9a9ea5; font-style: italic; }
.pf-l2-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.pf-l2-section-meta { font-size: 12px; color: #9a9ea5; flex: 0 0 auto; }
.pf-l2-evidence-list { list-style: none; margin: 0; padding: 0; }
.pf-l2-evidence-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid #f5f5f6;
}
.pf-l2-evidence-item:first-child { border-top: none; padding-top: 0; }
.pf-l2-evidence-icon { display: inline-flex; flex: 0 0 auto; }
.pf-l2-evidence-icon--done { color: #1F8A5B; }
.pf-l2-evidence-icon--pending { color: #cdd0d4; }
.pf-l2-evidence-label { font-size: 13.5px; font-weight: 500; color: #3a3d42; flex: 1; }
.pf-l2-evidence-attach {
    background: #fff;
    border: 1px solid #e3e4e6;
    border-radius: 8px;
    padding: 5px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #4D5158;
    cursor: pointer;
    flex: 0 0 auto;
}
.pf-l2-evidence-attach:hover { border-color: #F08354; color: #F08354; }

/* Order detail partials (Operations §2.2) */
.pf-l2-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #7b8088;
    text-decoration: none;
    margin-bottom: 10px;
}
.pf-l2-detail-back:hover { color: #cf6638; }
.pf-l2-line-product { font-weight: 600; color: #3a3d42; }
.pf-l2-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.pf-l2-line-sku { font-size: 11px; color: #9a9ea5; }
.pf-l2-totals-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pf-l2-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #5f646c;
}
.pf-l2-totals-row--emphasis { font-weight: 700; color: #2c2f34; }
.pf-l2-kv { display: flex; flex-direction: column; gap: 8px; }
.pf-l2-kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.pf-l2-kv-key { color: #8b9098; font-weight: 600; }
.pf-l2-kv-value { color: #3a3d42; text-align: right; }
.pf-l2-section-link { display: inline-block; margin-top: 12px; }
.pf-l2-section-footnote { margin-top: 8px; }
.pf-l2-customer-name { font-size: 15px; font-weight: 700; color: #33363b; margin-bottom: 4px; }
.pf-l2-table-link { color: #cf6638; font-weight: 600; text-decoration: none; }
.pf-l2-table-note { font-size: 12px; color: #7b8088; border-top: none !important; padding-top: 0 !important; }
.pf-l2-notes-list { display: flex; flex-direction: column; gap: 10px; }
.pf-l2-note-item { padding: 10px 12px; background: #f6f6f7; border-radius: 9px; }
.pf-l2-note-body { font-size: 13px; color: #3a3d42; }
.pf-l2-note-meta { font-size: 11px; color: #9a9ea5; margin-top: 4px; }

/* Customer detail partials (Operations §2.2) */
.pf-l2-customer-detail-head { margin-bottom: 4px; }
.pf-l2-customer-detail-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pf-l2-customer-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #eb5589, #f08354, #f9b233);
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}
.pf-l2-customer-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: 18px;
}
.pf-l2-customer-detail-title-block { min-width: 0; }
.pf-l2-table-row--clickable { cursor: pointer; }
.pf-l2-table-row--clickable:hover { background: #faf6f3; }
.pf-l2-payment-methods { display: flex; flex-direction: column; gap: 9px; }
.pf-l2-payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #ececee;
    border-radius: 11px;
    padding: 11px 13px;
}
.pf-l2-payment-method-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
    border-radius: 5px;
    background: #2c2f34;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    flex: 0 0 auto;
}
.pf-l2-payment-method-body { flex: 1; min-width: 0; }
.pf-l2-payment-method-pan { font-size: 13.5px; font-weight: 600; color: #3a3d42; }
.pf-l2-payment-method-exp { font-size: 12px; color: #9a9ea5; margin-top: 1px; }
.pf-l2-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9a9ea5;
    margin-bottom: 11px;
}
.pf-l2-subscriptions-list { display: flex; flex-direction: column; gap: 8px; }
.pf-l2-subscription-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fafafa;
    border: 1px solid #ececee;
    border-radius: 10px;
    padding: 11px 13px;
    text-decoration: none;
    color: inherit;
}
.pf-l2-subscription-row:hover { border-color: #f08354; }
.pf-l2-subscription-id { font-size: 13.5px; font-weight: 700; color: #2c2f34; font-variant-numeric: tabular-nums; }
.pf-l2-subscription-plan { font-size: 12px; color: #9a9ea5; margin-top: 1px; }

/* Linked records (§1.5) */
.pf-l2-linked-records,
.pf-l2-timeline {
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
    padding: 16px;
}
.pf-l2-linked-records-title,
.pf-l2-timeline-title {
    font-size: 14px;
    font-weight: 700;
    color: #33363b;
    margin-bottom: 10px;
}
.pf-l2-linked-records-list { display: flex; flex-direction: column; gap: 6px; }
.pf-l2-linked-records-link {
    display: block;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #5f646c;
    text-decoration: none;
    background: #f6f6f7;
}
.pf-l2-linked-records-link--primary {
    background: rgba(240, 131, 84, 0.13);
    color: #cf6638;
}

/* Activity timeline (§1.4 right rail) */
.pf-l2-timeline-list { display: flex; flex-direction: column; gap: 12px; }
.pf-l2-timeline-item { display: flex; gap: 10px; align-items: flex-start; }
.pf-l2-timeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex: 0 0 auto;
}
.pf-l2-timeline-dot--green { background: #1F8A5B; }
.pf-l2-timeline-dot--amber { background: #B7791F; }
.pf-l2-timeline-dot--red { background: #cf6638; }
.pf-l2-timeline-dot--gray { background: #9a9ea5; }
.pf-l2-timeline-dot--pink { background: #d8417a; }
.pf-l2-timeline-label { font-size: 13px; font-weight: 600; color: #3a3d42; }
.pf-l2-timeline-sub { font-size: 12px; color: #9a9ea5; margin-top: 2px; }
.pf-l2-timeline-empty { font-size: 13px; color: #9a9ea5; }

/* Subscription detail partials (Operations §2.2) */
.pf-l2-billing-period-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.pf-l2-billing-period-range {
    font-size: 12px;
    font-weight: 600;
    color: #7b8088;
    font-variant-numeric: tabular-nums;
}
.pf-l2-progress {
    height: 8px;
    border-radius: 999px;
    background: #f0f0f1;
    overflow: hidden;
    margin-bottom: 10px;
}
.pf-l2-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #eb5589, #f08354, #f9b233);
    transition: width 0.2s ease;
}
.pf-l2-billing-period-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #7b8088;
}
.pf-l2-billing-period-next { font-weight: 600; color: #5f646c; font-variant-numeric: tabular-nums; }
.pf-l2-upcoming-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.pf-l2-section-subtitle { font-size: 12px; color: #9a9ea5; margin-top: 2px; }
.pf-l2-upcoming-manage {
    font-size: 12px;
    font-weight: 600;
    color: #9a9ea5;
    background: #f6f6f7;
    border: 1px solid #ececee;
    border-radius: 9px;
    padding: 6px 10px;
    cursor: not-allowed;
}
.pf-l2-upcoming-mvp-note {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 9px;
    border: 1px solid #ececee;
}
.pf-l2-upcoming-list { display: flex; flex-direction: column; }
.pf-l2-upcoming-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #f0f0f1;
}
.pf-l2-upcoming-row:first-child { border-top: none; padding-top: 0; }
.pf-l2-upcoming-row-main { flex: 1; min-width: 0; }
.pf-l2-upcoming-date { font-size: 13px; font-weight: 600; color: #3a3d42; }
.pf-l2-upcoming-date--skipped { text-decoration: line-through; color: #9a9ea5; }
.pf-l2-upcoming-note { font-size: 12px; color: #9a9ea5; margin-top: 2px; }
.pf-l2-upcoming-amount { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-l2-upcoming-actions { display: flex; gap: 6px; }
.pf-l2-upcoming-action {
    font-size: 11px;
    font-weight: 600;
    color: #9a9ea5;
    background: transparent;
    border: 1px solid #ececee;
    border-radius: 7px;
    padding: 4px 8px;
    cursor: not-allowed;
}
.pf-l2-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a9ea5;
    margin-bottom: 10px;
}
.pf-l2-billing-config-rows { margin: 0; }
.pf-l2-billing-config-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #f0f0f1;
    font-size: 13px;
}
.pf-l2-billing-config-row:first-child { border-top: none; padding-top: 0; }
.pf-l2-billing-config-row dt { margin: 0; color: #9a9ea5; font-weight: 400; }
.pf-l2-billing-config-row dd { margin: 0; font-weight: 600; color: #3a3d42; text-align: right; }

/* Control plane + generic launcher scaffolds */
.pf-l2-control-banner { margin-bottom: 14px; }
.pf-l2-control-grid,
.pf-l2-generic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.pf-l2-control-card,
.pf-l2-generic-card {
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
}
.pf-l2-control-card-title,
.pf-l2-generic-card-title { font-size: 14px; font-weight: 700; color: #33363b; }
.pf-l2-control-card-body,
.pf-l2-generic-card-sub { font-size: 13px; color: #7b8088; margin-top: 6px; }

.pf-l2-empty-state {
    padding: 32px 24px;
    text-align: center;
    color: #7b8088;
    background: #fff;
    border: 1px solid #ececee;
    border-radius: 14px;
    font-size: 14px;
}
.pf-l2-table tr.is-clickable { cursor: pointer; }
.pf-l2-table tr.is-clickable:hover td { background: #faf6f3; }
.pf-l2-table-row-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.pf-l2-table-row-link:hover { color: #F08354; }
.pf-l2-table-empty {
    padding: 24px 16px;
    text-align: center;
    color: #7b8088;
    font-size: 14px;
}
.pf-l2-registry-detail-page .pf-l2-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #7b8088;
    text-decoration: none;
}
.pf-l2-registry-detail-page .pf-l2-detail-back:hover { color: #F08354; }

@media (max-width: 1100px) {
    .pf-l2-detail-stats { grid-template-columns: repeat(2, 1fr); }
    .pf-l2-detail-body { grid-template-columns: 1fr; }
    .pf-l2-control-grid,
    .pf-l2-generic-grid { grid-template-columns: 1fr; }
}

.dark .pf-l2-table-card,
.dark .pf-l2-detail-stat,
.dark .pf-l2-section,
.dark .pf-l2-linked-records,
.dark .pf-l2-timeline,
.dark .pf-l2-control-card,
.dark .pf-l2-generic-card {
    background: #1d1e21;
    border-color: #313338;
}
.dark .pf-l2-detail-title,
.dark .pf-l2-timeline-label,
.dark .pf-l2-section-title,
.dark .pf-l2-linked-records-title,
.dark .pf-l2-timeline-title { color: #e7e9ec; }
.dark .pf-l2-table td { color: #cfd2d7; border-top-color: #2a2c30; }
.dark .pf-l2-list-tab,
.dark .pf-l2-list-action { background: #1d1e21; border-color: #313338; color: #c4c8ce; }