/* S3FileUpload (Components/S3FileUpload.razor) — React parity.
   Single mode is a line-for-line port of React's attachment field
   (devtrac-ui ContractRequestForm.css): the .crf-input box (.fu-input), the
   custom "Choose File" control (.crf-file-picker*) and the picked-file view
   (.crf-attachment-display / -link / -clear). Declared React values, unscaled.
   React's --brand-hover (the Choose File fill) = --projectrac-secondary-color.
   Multi mode (pills) has no React counterpart; it reuses the same box, button
   and link values.
   Focus ring (project primary) lives in project-inputs.css with the other inputs. */

/* Block, not a flex column: React's boxes carry `flex: 1` (meant for a ROW parent,
   i.e. width). In a column flexbox that flex-basis 0 collapsed the 24px height. */
.fu-root {
    position: relative;     /* anchors the absolutely-positioned hidden input */
    display: block;
    width: 100%;
    min-width: 0;
}

/* -- The input box (React .crf-input) -- */
.fu-input {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    color: #333;
    padding: 0 6.4px;
    height: 24px;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #ffffff;
    box-sizing: border-box;
    min-width: 0;
}

/* -- No file yet: Choose File + "No file chosen" (React .crf-file-picker) -- */
.fu-file-picker {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 6.4px;
    height: 24px;
    padding: 0 3.2px;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
}

.fu-file-picker-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 17.6px;
    padding: 0 8px;
    border-radius: 2.4px;
    background: var(--projectrac-secondary-color, #5b9bd5);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.fu-file-picker-name {
    min-width: 0;
    font-size: 10px;
    color: #b0b0b0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visually hidden but focusable: Tab lands on the file input and Enter/Space
   opens the chooser; the ring is drawn on the box that follows it
   (project-inputs.css). The input sits outside the box, before it. */
.fu-file-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -- File uploaded: doc-icon link + × (React .crf-attachment-display) -- */
.fu-attachment-display {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.fu-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
    color: #1565c0;
    text-decoration: underline;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fu-attachment-link:hover {
    color: #0d47a1;
}

.fu-attachment-link[aria-busy=true] {
    cursor: progress;
}

/* The name in its own span so a long one ellipsizes (a bare text node in an
   inline-flex link can't). */
.fu-attachment-name,
.fu-pill-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fu-attachment-icon,
.fu-pill-icon {
    flex-shrink: 0;
    color: inherit;
}

.fu-attachment-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: transparent;
    border: none;
    padding: 0 0 0 3.2px;
    font-family: inherit;
    font-size: 14.4px;
    font-weight: 400;
    line-height: 1;
    color: #999;
    cursor: pointer;
    flex-shrink: 0;
    transform: translateY(-1px);
}

.fu-attachment-clear:hover,
.fu-pill-clear:hover {
    color: #c0392b;
}

.fu-attachment-clear:disabled,
.fu-pill-clear:disabled {
    cursor: progress;
    color: #ccc;
}

/* -- Disabled / loading: React's Locked look (.crf-input:disabled, view-mode
      attachment display) -- */
.fu-locked,
.fu-disabled .fu-attachment-display,
.fu-disabled .fu-multi-box {
    background-color: #f5f5f5;
    color: #555;
    border-color: #d9d9d9;
}

.fu-locked {
    padding: 0 6.4px;
    cursor: not-allowed;
}

.fu-locked .fu-file-picker-name {
    color: #999;
}

/* -- Uploading: name + percent, with a thin secondary-color bar along the bottom -- */
.fu-uploading,
.fu-pill-uploading {
    position: relative;
    overflow: hidden;
    cursor: progress;
}

.fu-uploading {
    padding: 0 6.4px;
}

.fu-progress-text {
    color: #555;
}

.fu-progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: var(--projectrac-secondary-color, #5b9bd5);
    transition: width 0.2s ease-out;
}

/* -- Multi mode: Choose File, then one scrolling row of pills -- */
.fu-multi-box {
    display: flex;
    align-items: center;
    gap: 6.4px;
    height: auto;           /* grows by the thin scrollbar's height when the row overflows */
    min-height: 24px;
    padding: 0 3.2px;
}

.fu-multi-picker {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.fu-picker-busy {
    opacity: 0.5;
    pointer-events: none;
}

.fu-pills {
    display: flex;
    align-items: center;
    gap: 4.8px;
    flex: 1;
    min-width: 0;
    min-height: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.fu-pill {
    display: inline-flex;
    align-items: center;
    gap: 1.6px;
    flex-shrink: 0;
    max-width: 220px;
    height: 17.6px;
    padding: 0 4.8px 0 6.4px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: rgba(234, 232, 229, 0.85);   /* PortalGrid's neutral #eae8e5, mostly opaque */
    box-sizing: border-box;
    font-size: 10px;
    color: #555;
}

.fu-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 3.2px;
    min-width: 0;
    overflow: hidden;
    color: #1565c0;
    text-decoration: underline;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.fu-pill-link:hover {
    color: #0d47a1;
}

.fu-pill-link[aria-busy=true] {
    cursor: progress;
}

.fu-pill-icon {
    width: 12px;
    height: 12px;
}

/* The glyph is ~7px wide, so the button is sized as the hit target (16×15) and
   pulled into the pill's right padding; it was a 10×13 sliver flush against the
   link, and a near miss opened the file instead of removing it. */
.fu-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 15px;
    margin-right: -3.2px;
    background: transparent;
    border: none;
    border-radius: 50%;
    padding: 0 0 1px;       /* the × glyph sits low; lift it to optical center */
    font-family: inherit;
    font-size: 12.8px;
    font-weight: 400;
    line-height: 1;
    color: #999;
    cursor: pointer;
    flex-shrink: 0;
}

.fu-pill-clear:hover {
    background: rgba(192, 57, 43, 0.1);
}

.fu-disabled .fu-pill {
    padding-right: 6.4px;
}

/* -- Error line under the box -- */
.fu-error {
    margin-top: 3.2px;
    font-size: 10px;
    color: #c0392b;
}