/* JS activates the enhanced picker only when this stylesheet is available. */
:root { --managed-file-picker-ready: 1; }

html body .managed-file-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-family: var(--portal-font-family) !important;
}

html body .managed-file-picker__action {
    position: relative;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
}

/* Keep the original input as the only keyboard and pointer target. */
html body .managed-file-picker__action > input[type="file"] {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
}

html body .managed-file-picker__button {
    display: block;
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #bacbd8;
    border-radius: 8px;
    background: #e7eff6;
    color: #183f60;
    font-family: var(--portal-font-family) !important;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal !important;
    text-align: center;
}

html body .managed-file-picker__action > input:hover + .managed-file-picker__button {
    background: #dce9f1;
}
html body .managed-file-picker__action > input:focus + .managed-file-picker__button {
    outline: 2px solid #07527a;
    outline-offset: 3px;
}
html body .managed-file-picker__action > input:disabled {
    cursor: not-allowed;
}
html body .managed-file-picker__action > input:disabled + .managed-file-picker__button {
    background: #edf0f2;
    color: #5b6974;
}

/* File names are technical strings: wrap them without removing characters or
   adding hyphens. This does not change the portal's whole-word text rules. */
html body .managed-file-picker__status,
html body .managed-file-picker__filename {
    display: block;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--portal-font-family) !important;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: 1.5;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-line-clamp: unset !important;
}
html body .managed-file-picker__filename {
    font-family: var(--managed-file-name-font, var(--portal-font-family)) !important;
    white-space: pre-wrap !important;
    unicode-bidi: plaintext;
}

/* A selected file may use a different alphabet from the current page. Keep the
   locale's primary family and include the portal's other script fonts before
   generic system fallbacks, only for the literal file name. */
.managed-file-picker:lang(ru), .managed-file-picker:lang(el) {
    --managed-file-name-font: "Noto Sans", "Portal Native Emoji", "Plus Jakarta Sans", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans JP", Arial, sans-serif;
}
.managed-file-picker:lang(hi) {
    --managed-file-name-font: "Noto Sans Devanagari", "Portal Native Emoji", "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Plus Jakarta Sans", Arial, sans-serif;
}
.managed-file-picker:lang(ja) {
    --managed-file-name-font: "Noto Sans JP", "Portal Native Emoji", "Noto Sans", "Noto Sans Devanagari", "Noto Sans SC", "Plus Jakarta Sans", Arial, sans-serif;
}
.managed-file-picker:lang(zh) {
    --managed-file-name-font: "Noto Sans SC", "Portal Native Emoji", "Noto Sans", "Noto Sans Devanagari", "Noto Sans JP", "Plus Jakarta Sans", Arial, sans-serif;
}

/* Leave enough room for whole translated button labels on very narrow phones,
   using the banner card's spare padding rather than shrinking the text. */
@media (max-width: 279px) {
    .portal-admin-panel > .widget:has(.managed-file-picker) {
        padding-inline: 8px !important;
    }
    html body .portal-admin-panel .managed-file-picker__button {
        padding-inline: 8px;
    }
}