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

/* ----- 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 */
}

/* ----- 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;
}

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

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

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

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

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

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

/* ----- KEEP: App-specific component styles (dialogs, etc.) ----- */
.sc-ui-dialog {
    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 */
    }

/* ----- 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.
   min-height prevents the tab list from overflowing when the active panel
   has short content — without it the grid row shrinks to the panel height,
   starving the tab list of vertical space and triggering the +N overflow. */
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;
}

/* 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;
    }

.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;
}

/* ============================================
   GridComponent — Cell Content Propagation
   ============================================
   AutoControl and other components render error/dialog placeholder
   divs as siblings of the actual content div inside .grid-cell.
   display:contents removes them from layout without hiding future
   error content. The remaining content div fills the cell via flex:1.
   Deeper wrappers propagate width/height to the actual control.
   Must be in global CSS because Blazor CSS isolation prevents
   scoped GridComponent styles from reaching child component DOM. */

/* Remove placeholder divs from flex layout so the content div
   is the sole flex participant and gets all available space. */
.grid-cell div[id$="-error-placeholder"],
.grid-cell div[id$="-dialog-placeholder"] {
    display: contents;
}

/* Content div fills the cell */
.grid-cell > div:not([id$="-placeholder"]) {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    /* Inner content div (e.g. TextControl wrapper) fills its parent */
    .grid-cell > div:not([id$="-placeholder"]) > div:not([id$="-placeholder"]) {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

.sc-ui-regex-error {
    color: var(--error);
    font-size: var(--type-ramp-minus-1-font-size, 0.85em);
    margin-top: 4px;
    display: block;
}

.sc-ui-control-error {
    color: var(--sc-color-error);
    font-size: small;
}

.sc-ui-control-error-stack {
    margin: 0.25rem 0 0 0;
    padding: 0.25rem 0.5rem;
    font-family: var(--monospace-font-family, Consolas, "Courier New", monospace);
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    border-left: 2px solid var(--accent-fill-rest);
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Compact error envelope — keeps message + sanitized stack inside very small
   components (e.g., TextControl) without inflating their vertical footprint. */
.sc-ui-error-block {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

    .sc-ui-error-block .sc-ui-control-error {
        display: inline-block;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        /* color + font-size already inherited from the existing .sc-ui-control-error rule */
    }

    .sc-ui-error-block .sc-ui-control-error-stack {
        display: block;
        margin: 2px 0 0 0;
        padding: 2px 6px;
        font-family: var(--monospace-font-family, Consolas, "Courier New", monospace);
        font-size: 0.7rem;
        line-height: 1.15;
        color: var(--neutral-foreground-hint, #666);
        background: var(--neutral-fill-stealth-rest, rgba(0, 0, 0, 0.04));
        border-left: 2px solid var(--sc-color-error);
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 6em; /* ~5 frames visible; rest scrolls */
        overflow-y: auto;
    }