/* ============================================
   StandardsCore.Ui Component Library Styles
   ============================================ */

.sc-ui-wait-cursor,
.sc-ui-wait-cursor * {
    cursor: wait !important;
}

/* ----- Brand Colors (CSS Variables) -----
   DO NOT REMOVE the color descriptor comments
   ----- */
:root {
    --sc-color-primary: #0c3983; /* Vivid Blue (SC brand from Canva) */
    --sc-color-error: #e50000; /* Pure Red */
    --sc-color-bg-light: #F5F5F5; /* WhiteSmoke */
    --sc-color-bg-disabled: #E5E4E2; /* Platinum Gray */
    --sc-color-border: #ccc; /* Light Gray */
}

/* ----- Page Basics -----
   sc-ui-page: root element of typical routable pages; sets page padding and full width.
   sc-ui-page-panel: bordered, padded, scrollable container for a page's main content (e.g. a grid).
   ----- */
.sc-ui-page {
    padding: 1.5em 2em;
    box-sizing: border-box;
    width: 100%;
}

.sc-ui-page-panel {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-1);
    padding: 0.75em;
    overflow: auto;
}

/* ----- KEEP: Layout Utilities (Fluent doesn't provide these) ----- */
.sc-ui-flex-column {
    display: flex;
    flex-direction: column;
}

.sc-ui-flex-row {
    display: flex;
    flex-direction: row;
}

.sc-ui-flex-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Directional glyphs and icons (forward/back arrows, chevrons) that must point the
   other way under right-to-left layout. Apply to the glyph element, not its container. */
[dir="rtl"] .sc-ui-rtl-mirror {
    display: inline-block;
    transform: scaleX(-1);
}

.sc-ui-flex-item-top {
    margin-bottom: auto;
}

.sc-ui-flex-item-bottom {
    margin-top: auto;
}

.sc-ui-flex-item-left {
    margin-inline-end: auto;
}

.sc-ui-flex-item-right {
    margin-inline-start: auto;
}

.sc-ui-flex-item-fill-vertical {
    flex: 1 1 auto;
}

.sc-ui-flex-item-fill-horizontal {
    flex: 1 1 auto;
}

/* "More" (...) button: accent-tinted, between a stealth button (too easy to miss) and a filled
   accent button (too heavy). Overrides Fluent's stealth fill tokens on the host element only, so
   the tint follows the theme's accent color in Light and Dark modes. A thin accent ring (inset
   box-shadow, follows the control corner radius) gives the edge. Fixed square size so it never
   grows with row height. Placed visually at the start of its flex row (order -1) so the buttons
   of one grid column line up regardless of each cell's text length; DOM order is unchanged, so
   keyboard and screen-reader order stays summary first, action second. */
.sc-ui-more-action-button {
    --neutral-fill-stealth-rest: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    --neutral-fill-stealth-hover: color-mix(in srgb, var(--accent-fill-rest) 24%, transparent);
    --neutral-fill-stealth-active: color-mix(in srgb, var(--accent-fill-rest) 32%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill-rest) 45%, transparent);
    border-radius: calc(var(--control-corner-radius) * 1px);
    width: 24px;
    min-width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-self: center;
    order: -1;
    margin-inline-end: 4px;
}

/*--------- Property-Pane-Style component/control layout --------*/

/* Metadata-driven form layout (DataControl and components that render the same
   markup inline). Grid: optional label column + value column.
   Reuses the --sc-color-* variables for theme consistency. */

.property-pane {
    overflow: hidden;
}

.property-pane-grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

.property-pane-grid-values-only {
    grid-template-columns: minmax(0, 1fr);
}

.property-pane-label {
    border: 1px solid var(--sc-color-border);
    background-color: var(--neutral-layer-2, var(--sc-color-bg-light));
    padding: 4px 8px;
    display: flex;
    align-items: center;
}

    .property-pane-label label {
        margin-inline-end: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }

.property-pane-value {
    border: 1px solid var(--sc-color-border);
    padding: 4px 8px;
    min-width: 0;
    /* Force all child controls to fill the cell horizontally */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    /* Every div inside a value cell must fill the available width, across component
       boundaries (AutoControl -> ChoiceControl, TextControl, BooleanControl, etc.), so
       that wrapper divs with intrinsic widths (e.g. fit-content) don't bottleneck their
       children. No per-control class lists to maintain. */
    .property-pane-value div {
        width: 100%;
    }

        /* Empty divs (closed dialog and error placeholders) have nothing to fill; at 100% they
           would take the whole width of a flex row (e.g. CollectionControl's summary row) and
           push their siblings to the far edge. */
        .property-pane-value div:empty {
            width: auto;
        }

.property-pane-readonly {
    background-color: var(--neutral-layer-3, var(--sc-color-bg-disabled));
}

/* ----- KEEP: App-specific component styles (dialogs, etc.) ----- */
.sc-ui-dialog {
    box-sizing: border-box;       /* Never exceed the viewport (the task pane in the Word Add-in); leave a small gutter. */
    max-width: calc(100vw - 2em);
    max-height: calc(100vh - 2em);
    min-width: 300px;
    min-height: 200px;
    overflow: hidden; /* the inner .sc-ui-dialog-content scrolls; chrome + buttons stay put */
    resize: both; /* user-resizable; the browser draws the corner grip, content reflows into the new box */
    border: 1px solid var(--sc-color-border); /* Light Gray — subtle edge */
    border-radius: 8px; /* Rounded corners (Fluent convention) */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), /* Soft depth shadow */
    0 2px 6px rgba(0, 0, 0, 0.08); /* Tight contact shadow */
    padding: 24px; /* Comfortable inner spacing */
}

    .sc-ui-dialog::backdrop {
        background: rgba(0, 0, 0, 0.3); /* Dim overlay behind modal */
    }

/* Scrollable dialog body: when content (e.g. a tall property pane) exceeds the
   available height, this region gets automatic scroll bars while the action
   buttons (#modal-dialog-buttons) stay pinned at the bottom and always reachable. */
.sc-ui-dialog-content {
    flex: 1 1 auto;
    min-height: 0; /* REQUIRED so this flex child can shrink below its content size and scroll */
    overflow: auto;
}

/* Action button bar: separated from the content above and spaced between buttons. */
.sc-ui-dialog-buttons {
    padding-top: 16px;
    gap: 8px;
}

/* Row manager "..." / "+" menu hosted in a ModalDialog: one full-width command per line. */
.sc-ui-row-manager-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
}

    .sc-ui-row-manager-menu fluent-button {
        justify-content: flex-start;
    }

/* ----- KEEP: Form Field Layout ----- */
.sc-ui-form-field {
    margin-bottom: 0.75rem;
}

/* ----- Control Label ----- */
.sc-ui-control-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--accent-foreground-rest, var(--sc-color-primary));
}

/* ----- Label Position Layout -----
   Applied to the control wrapper div to arrange label + control. */
.sc-ui-label-top {
    display: flex;
    flex-direction: column;
}

.sc-ui-label-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

    .sc-ui-label-left > .sc-ui-control-label {
        margin-bottom: 0;
        white-space: nowrap;
    }

    /* When a compound label (label + description) is present in left/right layout,
       switch to flex-start so the control aligns with the main label text
       rather than centering against the full compound label height. */
    .sc-ui-label-left:has(.sc-ui-compound-label) {
        align-items: flex-start;
    }

.sc-ui-label-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

    .sc-ui-label-right > .sc-ui-control-label {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .sc-ui-label-right:has(.sc-ui-compound-label) {
        align-items: flex-start;
    }

.sc-ui-label-bottom {
    display: flex;
    flex-direction: column;
}

    .sc-ui-label-bottom > .sc-ui-control-label {
        margin-bottom: 0;
        margin-top: 5px;
    }

/* ----- Fluent Web Component Overrides (global — shadow DOM unreachable by scoped CSS) ----- */

/* Vertical tabs: constrain the fluent-tabs element to its container width.
   The internal shadow DOM grid uses "auto 1fr" columns - setting width: 100%
   ensures the 1fr panel column is calculated from actual available space.
   The host's height tracks the ACTIVE PANEL, not the tab strip, so keep
   min-height >= the rendered tab strip height; otherwise a short panel lets
   the strip visually overflow past the host bottom. (Tab hiding via the "+N"
   overflow badge is disabled separately with the [fixed] attribute on each
   FluentTab in TabsComponent.razor.) */
fluent-tabs[orientation="vertical"] {
    width: 100%;
    min-height: 200px;
}

    fluent-tabs[orientation="vertical"]::part(tabpanel) {
        min-width: 0;
    }

/* Fluent form controls inside tab panels: override fixed default width so they
   fill available space instead of overflowing in narrow containers.
   These elements are in the light DOM so descendant selectors work normally. */
fluent-tab-panel fluent-select,
fluent-tab-panel fluent-text-field {
    width: 100%;
    min-width: 0;
}

    /* Tighten label-to-control spacing inside Fluent form controls in tab panels.
   The default label margin in fluent-select/fluent-text-field is generous;
   reduce it so labels feel connected to their controls. */
    fluent-tab-panel fluent-select::part(label),
    fluent-tab-panel fluent-text-field::part(label) {
        margin-bottom: 2px;
    }

/* ============================================
   Page Shell Layout
   ============================================
   Standard full-viewport app shell used by any host that renders
   <div class="sc-ui-page-shell"><header class="sc-ui-top-header">…</header><main>@Body</main></div>.
   Host-specific overrides (e.g. #blazor-error-ui) stay in scoped CSS. */

html, body {
    overflow-x: clip;
    scrollbar-gutter: auto;
}

.sc-ui-page-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

    .sc-ui-page-shell main {
        flex: 1;
    }

.sc-ui-top-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--neutral-layer-1, #fff);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
}

.sc-ui-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    opacity: 0.6;
    user-select: none;
}

/* ============================================
   Content Page Column
   ============================================
   Centered reading column for standalone content pages (terms, privacy,
   and similar documents) rendered directly into a host's main layout.
   Mirrors the content-section measurements used by the product sites
   (max-width 1000px, centered, 48px/24px padding) so direct-URL pages
   match integration page layout. Applied via ClassParameter at the page
   level only - embedded usages (e.g. a Settings tab) are not affected. */
.sc-ui-content-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* ============================================
   Data Table
   ============================================
   Baseline styling for plain <table> markup in content pages (subprocessor
   list and similar documents). Plain tables are used because Fluent has no
   simple static-table component (FluentDataGrid is interactive and
   datasource-driven - overkill for short static legal tables). Uses Fluent
   design tokens so Light and Dark themes render correctly. */
.sc-ui-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px;
}

    .sc-ui-table th,
    .sc-ui-table td {
        text-align: start;
        vertical-align: top;
        padding: 10px 14px;
        border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    }

    .sc-ui-table thead th {
        background-color: var(--neutral-layer-2, #f5f5f5);
        font-weight: 600;
    }

/* FocusOnNavigate programmatically focuses h1 after navigation.
   tabindex="-1" elements are never Tab-reachable, so removing
   their focus ring is safe — keyboard users can't land here. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

.sc-host-panel {
    height: 100%;
    min-width: 0;
    overflow: auto;
    box-sizing: border-box;
}

/* ============================================
   Control Image Rendering
   ============================================
   Base styling for images rendered by BaseControl.RenderImage()
   and position layout classes mirroring the label position pattern.
   Supports three image kinds: inline SVG, Fluent Icon, and <img>.
   Developer controls image size via the image/SVG/icon they supply —
   no min/max constraints are enforced by CSS. */

/* ----- Control Image Base ----- */
.sc-ui-control-image {
    flex-shrink: 0;
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Path-based images: native size, never enlarge */
img.sc-ui-control-image {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Inline SVG containers: size to content */
span.sc-ui-control-image {
    width: fit-content;
    height: fit-content;
}

/* Let inline SVGs use their declared width/height attributes. */
.sc-ui-control-image svg {
    display: block;
}

/* ----- Image Position Layout (semantic) -----
   Used by GetImagePositionClass() — DOM order via IsImageBefore()/IsImageAfter()
   determines actual left/right or top/bottom visual placement. */
.sc-ui-image-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

    .sc-ui-image-horizontal > .sc-ui-control-image {
        margin-bottom: 0;
    }

    .sc-ui-image-horizontal > .sc-ui-control-label {
        margin-bottom: 0;
    }

    /* When a compound label (label + description) is present, switch to
       flex-start so the checkbox aligns with the main label text rather
       than centering against the full compound label height. */
    .sc-ui-image-horizontal:has(.sc-ui-compound-label) {
        align-items: flex-start;
    }

/* An action control's button fills the row remaining after its image, so adding
   an image does not shrink a button that otherwise spans its container. */
.sc-ui-action-control.sc-ui-image-horizontal > fluent-button {
    flex: 1 1 auto;
}

    .sc-ui-action-control.sc-ui-image-horizontal > fluent-button::part(control) {
        width: 100%;
    }

.sc-ui-image-vertical {
    display: flex;
    flex-direction: column;
}

/* ============================================
   Compound Label (Label + Description)
   ============================================
   Two-line label for controls: bold label text on top, lighter
   description sub-text below. Reuses the proven NavMenuItem pattern
   (.sc-ui-nav-submenu-label + .sc-ui-nav-submenu-description) adapted
   for control labels. Applied via BaseControl.BuildCompoundLabel().
   When no description is present, controls render a plain
   .sc-ui-control-label — no compound wrapper — so existing
   behavior is unchanged. */

/* The compound container is added alongside .sc-ui-control-label
   to turn the label into a stacked flex column. */
.sc-ui-compound-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Label text inherits .sc-ui-control-label styling (16px/12pt, 600 weight).
   No additional overrides needed. */
.sc-ui-compound-label-text {
    line-height: 1.3;
}

/* Description sub-text: lighter weight, ~11pt font, muted opacity.
   display: block ensures correct stacking when used standalone
   (e.g., below a FluentCheckbox); inside flex containers
   (compound labels, option labels), flex item display wins. */
.sc-ui-compound-label-description {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.72;
    line-height: 1.3;
    white-space: normal;
}

/* ============================================
   Label-Level Images (inside <label> element)
   ============================================
   When control-level images (ImageIdLeft / ImageIdRight) are present,
   BuildCompoundLabel adds .sc-ui-label-with-images to the <label>,
   switching it from column (compound text stack) to row layout:
   [image-left] [text-stack] [image-right]. The text + description
   move into a .sc-ui-label-text-stack span that preserves the
   vertical stacking. gap: 6px provides internal spacing between
   images and text. No external margins — the control extends to
   its true edges; parent containers own padding/spacing.
   RTL-safe: flex-direction: row respects document direction. */

.sc-ui-label-with-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

    /* When images and description are both present, align images with the
   main label text rather than centering against the full compound
   height (label + description). Simple labels (no description) are
   unaffected since center and flex-start are equivalent for one line. */
    .sc-ui-label-with-images.sc-ui-compound-label {
        align-items: flex-start;
    }

/* Vertical text stack inside a label-with-images row.
   Holds label-text + description in a column when images
   are positioned to the left/right of the text. */
.sc-ui-label-text-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sc-ui-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-ui-search-extras {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sc-ui-column-selector-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
}

.sc-ui-column-selector-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .sc-ui-column-selector-row > fluent-checkbox {
        flex: 1 1 auto;
    }