/* ============================================
   TextControl Styles
   ============================================
   All CSS that is referenced ONLY by TextControl.razor lives here.
   Loaded as a separate global stylesheet (NOT Blazor-isolated) because
   the rules pierce into FluentUI web components (fluent-text-field,
   fluent-text-area) via descendant selectors and ::part() pseudo-
   elements. CSS isolation cannot reach these elements - they are
   emitted by child Blazor components and do not receive the parent
   component's [b-xxx] scope attribute. */

/* ============================================
   TextControl - Plain Cell Defaults
   ============================================
   By default, TextControl renders as a borderless, transparent cell
   that fills its parent container. This makes it a drop-in for grid
   cells and other containers that supply their own visual treatment.
   Hosts that want a standalone text-area look should add their own
   border/background via ClassParameter or a wrapping container.
   !important is required because FAST shadow DOM internal styles
   override external ::part() rules at normal cascade priority. */

.sc-ui-text-control {
    width: 100%;
    height: 100%;
}

    /* ---- Single-line (fluent-text-field) ---- */
    .sc-ui-text-control fluent-text-field {
        width: 100%;
        height: 100%;
        min-width: 0;
        display: block;
    }

        .sc-ui-text-control fluent-text-field::part(root) {
            border: none !important;
            background: transparent !important;
            padding: 0 !important;
            height: 100%;
        }

        .sc-ui-text-control fluent-text-field::part(control) {
            padding: 2px 4px;
            height: 100%;
        }

    /* Readonly text is informational, not forbidden: replace Fluent's built-in
       :host([readonly]) not-allowed cursor with the default arrow for every
       TextControl, recessed or not. */
    .sc-ui-text-control fluent-text-field[readonly]::part(control),
    .sc-ui-text-control fluent-text-area[readonly]::part(control) {
        cursor: default;
    }

    /* ---- Multi-line (fluent-text-area) ----
   fluent-text-area's shadow DOM applies its border via design tokens
   on the host element (--neutral-stroke-rest) and internal styles on
   a non-exposed div. Override at the host level + ::part selectors.
   Use the same pattern that works for fluent-text-field.
   --design-unit and --stroke-width are zeroed to collapse padding on
   the unreachable div.control wrapper between ::part(root) and
   ::part(control) - without this, the scrollbar sits inset from the
   cell edge.
   NOTE: zeroing --neutral-stroke-focus here is why the multi-line
   focus cue must be drawn by the wrapper (see the wrapper section). */
    .sc-ui-text-control fluent-text-area {
        width: 100%;
        height: 100%;
        min-width: 0;
        display: block;
        --design-unit: 0;
        --stroke-width: 0;
        --neutral-stroke-rest: transparent;
        --neutral-stroke-hover: transparent;
        --neutral-stroke-active: transparent;
        --neutral-stroke-focus: transparent;
        --neutral-fill-input-rest: transparent;
        --neutral-fill-input-hover: transparent;
        --neutral-fill-input-active: transparent;
        --neutral-fill-input-focus: transparent;
    }

        .sc-ui-text-control fluent-text-area::part(root) {
            border: none !important;
            background: transparent !important;
            padding: 0 !important;
            height: 100%;
            box-shadow: none !important;
            display: flex !important;
            flex-direction: column !important;
        }

        /* overflow-y: auto here is what lets the wrapper use overflow: hidden
           without losing content - all multi-line scrolling happens inside. */
        .sc-ui-text-control fluent-text-area::part(control) {
            padding: 2px 4px;
            resize: none;
            overflow-y: auto;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;
            height: 100% !important;
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }

    /* ============================================
   TextControl - Horizontal Images Stretch Behavior
   ============================================
   Unlike ChoiceControl (which shrink-wraps to its picker's intrinsic
   width so the right-side image hugs the widget), TextControl
   intentionally KEEPS width: 100% even when horizontal images are
   present. Rationale:
     - A text input's primary value is visible-character count; the
       more horizontal room, the less the user has to scroll.
     - A right-side image at the container's right edge is a
       well-established pattern (search icon, clear button, unit
       suffix) - see browser address bar, IDE search boxes, etc.
     - Image-less TextControl variants already stretch full-width;
       keeping image variants consistent avoids visual surprise.
   The base .sc-ui-text-control width: 100% / height: 100% already
   produces the correct stretched layout. The flex: 1 / min-width: 0
   rule below ensures the input flex-grows between the left and right
   images inside the .sc-ui-image-horizontal flex row instead of
   collapsing to its intrinsic width and leaving a gap before the
   right image. Multi-line targets the wrapper, not fluent-text-area,
   because the wrapper is the flex child. */

    .sc-ui-text-control.sc-ui-image-horizontal fluent-text-field,
    .sc-ui-text-control.sc-ui-image-horizontal .sc-ui-textarea-wrapper {
        flex: 1;
        min-width: 0;
    }

/* ============================================
   TextControl - Recessed Input Cue (Opt-In)
   ============================================
   Default TextControl is borderless/transparent for grid/spreadsheet
   cells. Opt in to a visible "input pocket" cue via either:
     - Metadata: DisplayFlagsEnum.ShowRecessed
     - Component: ShowRecessedParameter="true"
   Either source puts .sc-ui-text-control-recessed on the root element;
   every rule below keys off that one class.

   Single-line draws the pocket on fluent-text-field itself. Multi-line
   draws it on the wrapper instead - see the wrapper section for why the
   resizing box must also be the pocket box.

   Why outline + FAST tokens:
   - outline renders OUTSIDE the host box, ignoring shadow DOM, so it
     needs no ::part() overrides or !important.
   - --neutral-foreground-rest is NOT zeroed by the textarea transparent
     baseline (only --neutral-stroke-rest and --neutral-fill-input-*
     are), so it adapts to whichever theme FluentDesignTheme is
     rendering - light OR dark, OS-driven OR app-forced.
   - color-mix() converts the foreground token to a faint translucent
     fill that works against any background. */

.sc-ui-text-control-recessed fluent-text-field {
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -1px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    background-color: color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent);
    transition: outline-color 0.15s ease;
}

    /* ============================================
   TextControl - Recessed Editable (Light Mode White Pocket)
   ============================================
   The base rule above uses a faint translucent fill derived from
   --neutral-foreground-rest. That reads well for readonly (both themes)
   and for editable in DARK mode, but in LIGHT mode editable inputs
   should look like a true white "input pocket".

   Scope is intentionally narrow:
     - :not([readonly]) - preserves the readonly look exactly.
     - light-dark(white, <existing translucent>) - preserves dark mode
       exactly by re-asserting the same color-mix() value the base rule
       already uses. */

    .sc-ui-text-control-recessed fluent-text-field:not([readonly]) {
        background-color: light-dark( #ffffff, color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent) );
    }

    /* ============================================
   TextControl - Recessed Readonly (Dark Mode De-emphasis)
   ============================================
   In LIGHT mode, the base translucent fill on a white card already
   reads as a muted, non-editable surface - leave it alone.

   In DARK mode, the base translucent fill is visually identical to the
   editable variant (both derive from --neutral-foreground-rest), making
   readonly indistinguishable from editable. Differentiate by removing
   the input-pocket affordance:
     - transparent fill (flush with the card)
     - very faint outline (chrome nearly disappears)
     - dimmed foreground (reads as informational, still >= AA contrast)
     - default cursor (no text caret affordance)

   Scope is intentionally narrow:
     - [readonly] only - editable variants are untouched.
     - light-dark(<base>, <new>) - light mode re-asserts the exact base
       values so nothing changes there.
     - No hover rules - readonly should not react to pointer. Focus IS
       still indicated: readonly text remains focusable and selectable,
       so the multi-line focus rule at the end of this file deliberately
       out-specifies the readonly outline-color. */

    .sc-ui-text-control-recessed fluent-text-field[readonly] {
        background-color: light-dark( color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent), transparent );
        outline-color: light-dark( rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.08) );
        cursor: default;
    }

        /* Text color and cursor stay on the inner element for BOTH variants -
       only the box treatment moved out to the wrapper for multi-line. */
        .sc-ui-text-control-recessed fluent-text-field[readonly]::part(control),
        .sc-ui-text-control-recessed .sc-ui-textarea-wrapper fluent-text-area[readonly]::part(control) {
            color: light-dark( var(--neutral-foreground-rest), rgba(255, 255, 255, 0.72) );
            cursor: default;
        }

/* ============================================
   TextControl - Multi-Line Wrapper
   ============================================
   Multi-line text is always wrapped in a plain div. The wrapper owns
   three things fluent-text-area cannot own itself:

   1. The resize handle. fluent-text-area's shadow DOM suppresses native
      resize while readonly; a plain box has no such constraint.
   2. The recessed pocket. CSS resize requires non-visible overflow,
      which clips an outline drawn on the inner element - so the box
      that resizes must also be the box that draws the pocket.
   3. The focus cue. --neutral-stroke-focus is zeroed on the inner
      element (see the transparent baseline at the top of this file),
      so the inner element cannot show focus on its own.

   Because the wrapper is the sizing box, the inner textarea stretches
   to fill it and its rows attribute no longer governs;
   --sc-textarea-rows (set inline from SafeGetEffectiveRows) restores
   that height here. The + 10px compensates for ::part(control) padding
   plus the border. */

.sc-ui-text-control .sc-ui-textarea-wrapper {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: calc(var(--control-corner-radius) * 1px);
    height: calc((var(--sc-textarea-rows, 3) * var(--type-ramp-base-line-height)) + 10px);
    min-height: calc(var(--type-ramp-base-line-height) + 10px);
}

/* Inside a list/grid cell the row's height governs, not the rows attribute: the wrapper
       fills the cell so a dragged row grows and shrinks the visible text box; the grid's
       default row height is the floor. Resizing is left to the row handle. */
.sc-ui-cell .sc-ui-text-control .sc-ui-textarea-wrapper {
    height: 100%;
    min-height: 0;
}

    .sc-ui-cell .sc-ui-text-control .sc-ui-textarea-wrapper.sc-ui-textarea-resizer {
        resize: none;
        padding-inline-end: 0;
    }

.sc-ui-text-control .sc-ui-textarea-wrapper fluent-text-area {
    height: 100%;
}

/* hidden, not auto: resize is ignored only for overflow: visible, so this
       keeps the drag handle while leaving scrolling entirely to the inner
       textarea. auto here produces a second, redundant scrollbar.
       padding-right reserves a gutter for the handle, which is painted in this
       element's bottom-right corner. Without it the handle sits on top of the
       inner textarea's scrollbar and swallows clicks on its down-arrow. */
.sc-ui-text-control .sc-ui-textarea-wrapper.sc-ui-textarea-resizer {
    resize: vertical;
    overflow: hidden;
    padding-inline-end: 14px;
}

/* ---- Recessed pocket and focus cue: multi-line draws both on the wrapper.
   Mirrors the fluent-text-field rules above. The :has() selectors read the
   inner element's readonly state from the wrapper so the editable and
   readonly variants stay identical to the single-line treatment. */

.sc-ui-text-control-recessed .sc-ui-textarea-wrapper {
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -1px;
    background-color: color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent);
    transition: outline-color 0.15s ease;
}

    .sc-ui-text-control-recessed .sc-ui-textarea-wrapper:has(fluent-text-area:not([readonly])) {
        background-color: light-dark( #ffffff, color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent) );
    }

    .sc-ui-text-control-recessed .sc-ui-textarea-wrapper:has(fluent-text-area[readonly]) {
        background-color: light-dark( color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent), transparent );
        outline-color: light-dark( rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.08) );
    }

    /* :focus-within, not :focus-visible - the focused element is the textarea
       inside the shadow DOM, not the wrapper itself. The :has(...) is present
       only to raise specificity above the readonly variant, which would
       otherwise win on outline-color and leave focused readonly text with no
       visible indication at all. */
    .sc-ui-text-control-recessed .sc-ui-textarea-wrapper:has(fluent-text-area):focus-within {
        outline-color: var(--accent-fill-rest);
    }

/* ============================================
   DateTimeControl Styles
   ============================================
   The cell shows the formatted value and, when editable, a calendar button
   at the end that opens the selector in a ModalDialog. Direction-neutral
   (gap, no margins) so RTL and LTR page directions both lay out correctly. */

.sc-ui-datetime-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

    .sc-ui-datetime-control .sc-ui-datetime-summary {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.sc-ui-datetime-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sc-ui-datetime-utc-label {
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    color: var(--neutral-foreground-hint);
}