/* ============================================================================
   BAF-PR-005 (CPR) — Design System foundation CSS

   Cross-cutting presentational classes that no single Razor component can own,
   because Blazor's CSS isolation scopes a component's own .razor.css file to
   that component's own markup only (see Login.razor.css/AuthenticationLayout.
   razor.css's own documented lesson on this, this session) - a table or a
   skeleton row is composed by many different future BUSINESS pages, each its
   own component, not one shared wrapper component. This file is therefore
   loaded globally (App.razor, after tokens.css) exactly like tokens.css and
   app.css already are, and every class below is driven entirely by the
   existing BAF token set - no raw literal color/size value is introduced here
   that tokens.css does not already define.

   This is a UI FOUNDATION, not a data-grid framework: no remote querying,
   filtering engine, virtualization, or persistence is implemented or implied
   by any class below (Design System Step 13's own explicit boundary). A page
   that needs those already-real behaviors (sorting, filtering) supplies them
   itself; these classes only style the result.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TABLE FOUNDATION (CPR - adapted from baf-design-system.zip's own .baf-table
   family)
   ---------------------------------------------------------------------------- */
/* BAF-PR-005A: radius/shadow brought in line with Surface.razor.css's own identical containment
   family (--baf-radius-xl, the same inset top-edge highlight) - a table is a containment surface
   too, and should read as part of the same "precision instrument panel" language rather than a
   visually distinct, flatter treatment. */
.baf-table-wrap {
    border-radius: var(--baf-radius-xl);
    border: var(--baf-border-width) solid var(--baf-border);
    overflow: hidden;
    background: var(--baf-bg);
    box-shadow: var(--baf-shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--baf-color-white) 6%, transparent);
}

.baf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--baf-type-body-size-sm);
}

.baf-table thead th {
    text-align: left;
    padding: var(--baf-space-7) var(--baf-space-9);
    font-size: var(--baf-type-caption-size);
    font-weight: var(--baf-type-caption-weight-strong);
    letter-spacing: var(--baf-type-caption-tracking);
    text-transform: uppercase;
    color: var(--baf-text-subtle);
    background: var(--baf-surface);
    border-bottom: var(--baf-border-width) solid var(--baf-border);
    white-space: nowrap;
}

.baf-table-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--baf-space-3);
    cursor: pointer;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.baf-table-sort svg {
    width: 0.8rem;
    height: 0.8rem;
    opacity: 0.5;
}

.baf-table-sort-active {
    color: var(--baf-text);
}

.baf-table-sort-active svg {
    opacity: 1;
    color: var(--baf-accent);
}

.baf-table tbody td {
    padding: var(--baf-space-7) var(--baf-space-9);
    border-bottom: var(--baf-border-width) solid var(--baf-border);
    color: var(--baf-text);
    vertical-align: middle;
}

.baf-table tbody tr:last-child td {
    border-bottom: none;
}

.baf-table tbody tr:hover {
    background: var(--baf-color-overlay-hover);
}

.baf-table tbody tr.baf-table-row-selected {
    background: var(--baf-color-accent-selected);
}

.baf-table-cell-primary {
    display: flex;
    align-items: center;
    gap: var(--baf-space-7);
}

.baf-table-cell-sub {
    color: var(--baf-text-subtle);
    font-size: var(--baf-type-caption-size-lg);
}

.baf-table-row-actions {
    display: flex;
    align-items: center;
    gap: var(--baf-space-3);
    justify-content: flex-end;
}

.baf-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--baf-space-8);
    padding: var(--baf-space-7) var(--baf-space-9);
    background: var(--baf-surface);
    border-top: var(--baf-border-width) solid var(--baf-border);
    font-size: var(--baf-type-caption-size-lg);
    color: var(--baf-text-muted);
}

.baf-table-empty {
    padding: var(--baf-space-14) var(--baf-space-9);
}

/* Wide tables scroll within their own region rather than the page (docs/107 §33's own
   responsive-table priority order). */
@media (max-width: 640px) {
    .baf-table-wrap {
        overflow-x: auto;
    }

    .baf-table {
        min-width: 40rem;
    }
}

/* ----------------------------------------------------------------------------
   FACT (label/value) FOUNDATION (BAF-PR-008H12A)

   Codifies, as a shared, opt-in primitive, the label/value typography
   relationship docs/135_Capability_Detail_Visual_Hierarchy.md §2/§4 already
   established and already ships today in PlatformAdministrationSurface.razor.
   css's own `.pa-fact-tile` (Overview's grid of summary facts) - the exact same
   three rules below, generalized from that file's Platform-Administration-
   scoped `pa-` prefix to this shared foundation's own `baf-` prefix, the same
   transformation `.baf-table`/`.baf-skeleton` already represent for other
   concepts a single page first proved out. No new token: every declaration
   below reuses a token `.pa-fact-tile` itself already uses.

   Distinct from `FormField.razor.css`'s own `.baf-form-field label` (title-
   size/weight + full-contrast `--baf-text`) - a form field's own label is
   necessarily prominent (the control it names is about to be interacted
   with), while a fact's label is deliberately subordinate (a passive caption
   beside an already-displayed value) - the two solve different problems and
   are not the same primitive.

   Opt-in only - a plain `<dl>`/`<dt>`/`<dd>` (or any other element) is
   completely unaffected unless it explicitly carries one of these three
   classes. Composable with either a stacked single-fact layout (this file's
   own `.baf-fact` wrapper, mirroring `.pa-fact-tile`'s exact layout) or a
   page's own side-by-side/grid arrangement (apply `.baf-fact-label`/
   `.baf-fact-value` directly to that page's own `dt`/`dd`, the way
   `.pa-fact-list` already does) - this foundation does not mandate one
   layout, only the label/value typography itself.

   No consumer has adopted this yet (BAF-PR-008H12A is the foundation only) -
   see docs/137's own H12A section for the future adoption rule. */
.baf-fact {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-3);
}

.baf-fact-label {
    color: var(--baf-text-muted);
    font-size: var(--baf-type-caption-size-lg);
}

.baf-fact-value {
    margin: 0;
    color: var(--baf-text);
    font-size: var(--baf-type-body-size);
    font-weight: var(--baf-font-weight-semibold);
}

/* ----------------------------------------------------------------------------
   ACTION GROUP FOUNDATION (BAF-PR-008H14/H14A)

   docs/140_Action_Group_Button_Spacing_Discovery.md found no shared primitive
   represents a body-level/trailing group of action buttons (as opposed to
   PageHeader's own `.baf-page-header-actions`, Dialog's own
   `.baf-dialog-actions`, or Drawer's own `.baf-drawer-footer` - all a
   different UI position, already correct, already gapped) - bare, sequential
   <Button> elements were rendered directly in the page body with no wrapper
   and no gap, reading as one touching, segmented control rather than separate
   actions. `--baf-space-6` is reused, not invented - the exact token already
   proven correct in all three of those existing patterns. `flex-wrap: wrap`
   is the one property none of those three needs today but this one does,
   since a Detail page's trailing action count is conditional/variable and can
   legitimately overflow a narrow viewport - flexbox's own `gap` property
   already applies to both axes once wrapping is enabled, so one declaration
   provides horizontal separation between adjacent actions and vertical
   separation between wrapped rows. Layout only - no background, border,
   padding, margin, or width, so it never competes with `Button.razor`'s own
   visual styling. Opt-in only, exactly like `.baf-fact` (H12A) - a page wraps
   its own existing <Button> elements in `<div class="baf-action-group">`
   without changing any button's text/variant/color/size/route/handler.
   First (pilot) consumers: ProjectDetails/WorkItemDetails/KnowledgeDetails/
   PlaybookDetails.razor (H14A) - the remaining 5 standard Record Detail pages
   are intentionally not migrated yet, pending Walter's own visual approval of
   this pilot. */
.baf-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--baf-space-6);
}

/* ----------------------------------------------------------------------------
   SKELETON (CPR - adapted from baf-design-system.zip's own .baf-skel family;
   Design System Step 18)
   ---------------------------------------------------------------------------- */
.baf-skeleton {
    border-radius: var(--baf-radius-sm);
    background: linear-gradient(90deg, var(--baf-surface) 25%, var(--baf-border) 37%, var(--baf-surface) 63%);
    background-size: 400% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .baf-skeleton {
        animation: baf-skeleton-shimmer 1.4s ease infinite;
    }
}

@keyframes baf-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.baf-skeleton-line {
    height: var(--baf-space-6);
}

.baf-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--baf-space-7);
    padding: var(--baf-space-7) var(--baf-space-9);
    border-bottom: var(--baf-border-width) solid var(--baf-border);
}

.baf-skeleton-row:last-child {
    border-bottom: none;
}

/* ----------------------------------------------------------------------------
   PROVIDER CONFIGURATION DRAWER FOUNDATION (BAF-ORG-CAP-002D)

   Native-<dialog>-plus-JS-interop drawer shell shared, BY THIS SAME GLOBAL RULE,
   by BOTH BAF.Web.Components.Pages.PlatformAdministration.EmailConfigurationDrawer
   and BAF.Web.Components.Pages.OrganizationAdministration.
   OrganizationEmailConfigurationDrawer - the two components already rendered
   identical "baf-email-config-drawer*" markup (Organization's own component was
   written to mirror Platform's exactly), but the CSS itself remained trapped in
   Platform's own component-scoped EmailConfigurationDrawer.razor.css, which
   Blazor CSS isolation scopes exclusively to Platform's own rendered output -
   Organization's identically-classed markup never matched any rule and fell
   back to the browser's bare <dialog> stylesheet (unstyled white surface, no
   dark theme, no backdrop, no docked width). Relocating the existing rules here
   - byte-for-byte the same declarations, with the one Blazor-isolation-only
   `::deep` combinator replaced by a plain descendant selector since a global
   stylesheet has no scope boundary to cross - fixes Organization's drawer with
   zero new CSS of its own and zero visible change to Platform's already-
   certified drawer (the selectors and their computed styles are unchanged, only
   their file location and scoping mechanism are). This mirrors how
   .baf-table-wrap/.baf-fact/.baf-action-group above already solve the identical
   "no single Razor component owns this" problem for other cross-component
   markup. EmailConfigurationDrawer.razor.css was deleted as part of this same
   change - this file is now this drawer shell's one and only stylesheet. */
.baf-email-config-drawer {
    position: fixed;
    top: var(--baf-space-14);
    right: 0;
    bottom: 0;
    left: auto;
    margin: 0;
    height: calc(100vh - var(--baf-space-14));
    width: min(28rem, 100vw);
    max-width: 100vw;
    max-height: calc(100vh - var(--baf-space-14));
    background-color: var(--baf-bg);
    color: var(--baf-text);
    border: none;
    border-left: var(--baf-border-width) solid var(--baf-border);
    box-shadow: var(--baf-shadow-modal);
    box-sizing: border-box;
    padding: 0;
    display: none;
    flex-direction: column;
}

.baf-email-config-drawer[open] {
    display: flex;
}

.baf-email-config-drawer::backdrop {
    background-color: var(--baf-color-scrim);
}

.baf-email-config-drawer-header {
    padding: var(--baf-space-10) var(--baf-space-10) var(--baf-space-7);
    border-bottom: var(--baf-border-width) solid var(--baf-border);
}

.baf-email-config-drawer-title {
    margin: 0;
    font-size: var(--baf-type-title-size-lg);
    font-weight: var(--baf-type-title-weight);
    color: var(--baf-text);
}

.baf-email-config-drawer-subtitle {
    margin: var(--baf-space-3) 0 0;
    font-size: var(--baf-type-caption-size-lg);
    color: var(--baf-text-subtle);
}

.baf-email-config-drawer form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.baf-email-config-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--baf-space-10);
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-9);
}

.baf-email-config-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--baf-space-6);
    padding: var(--baf-space-9) var(--baf-space-10);
    border-top: var(--baf-border-width) solid var(--baf-border);
}

/* breakpoint: --baf-breakpoint-sm (641px, max-width companion) - full-viewport on Mobile. */
@media (max-width: 640px) {
    .baf-email-config-drawer {
        width: 100vw;
    }
}