/* =============================================================================
   Free AI Translation — the uploader on /translation.

   Ported from AppCore/freeTranslation/Views/Home/Index.cshtml, where it ships as an inline <style> block
   because that app has no stylesheet of its own. That app's copy is still live at /translate-files, so
   changes here usually belong there too.

   Every rule is scoped under .ft on purpose. Unscoped, this collides with the main site in two ways that
   are easy to miss:

     * site.css:236  a:link, a:visited, a:active, a:hover { color: #615d60; font-weight: 600 }
       has specificity (0,1,1) and beats a bare .ft-download (0,1,0), which would render the finished
       card's primary "Open translation" link as ordinary grey body text — identical to its own quieter
       .secondary sibling, so the action hierarchy silently disappears. The .ft prefix wins it back.

     * site.css:10   *:focus { outline: none }
       removes the focus ring from every control in here. The standalone app never noticed because it
       loads no stylesheet at all. The :focus-visible rules below put it back — no visual diff catches
       this one, only keyboard navigation does.

   Two other deliberate departures from the source:
     * No background or min-height on .ft. It filled a standalone page there; here the section wrapper
       (.bkg-light) supplies the same #f5f5f5 and the height comes from the content.
     * font-weight 500 is 600 instead. _Layout.cshtml loads Open Sans 300/400/600/700 — no 500 — so 500
       would be synthesised. (Inversely, the 700s here were faux-bold in the standalone app, which loads
       400/500/600 and no 700. They render properly now.)
   ============================================================================= */

.ft {
    /* Palette matched to scholaro.com/jobs/employer (Scholaro jobs --jb-* brand tokens). */
    --navy: #0f1729;        /* jb-ink */
    --ink: #0f1729;         /* jb-ink */
    --blue: #60688b;        /* jb-primary (muted slate-blue) */
    --blue-hover: #434c75;  /* jb-primary-dark */
    --blue-soft: #eef2f6;   /* jb-border-light */
    --blue-border: #d3d8e6; /* light primary tint */
    --border: #e2e8f0;      /* jb-border */
    --panel: #f4f6f9;       /* jb-cream */
    --muted: #475569;       /* jb-ink2 */
    --success: #059669;     /* jb-money */
    --radius: 12px;         /* jb-radius-lg */
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--navy);
}

.ft .ft-wrap { max-width: 920px; margin: 0 auto; padding: 2rem 1.25rem 2.5rem; }

/* Top row: the allowance banner. (The source also had an active "tab" chip here; the page's own sticky
   Free/Premium nav does that job now, so it isn't ported.) */
.ft .ft-toprow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ft .ft-allow { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--muted); }
.ft .ft-allow.is-out { color: #9a5b12; }
/* Reserves the banner's line before the allowance fetch resolves, so revealing it doesn't shift the
   card below. Needed here and not in the standalone app because there the count is server-rendered. */
.ft .ft-allow { min-height: 1.35rem; }

/* Language bar (source auto-detected, target defaulted to English) */
.ft .ft-langbar {
    display: flex; align-items: center; justify-content: center; gap: 1.25rem;
    padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,41,.08);
}
/* Equal-width tracks either side of the arrow, so the arrow sits on the card's centre line instead of
   the centre of the three items as a group — "Detect language" is much wider than "English", which
   pushed it right. Applied to wrappers, not .ft-lang-select, whose width the dropdown menus are
   positioned against. */
.ft .ft-langbar .ft-lang-side { flex: 1 1 0; min-width: 0; display: flex; }
.ft .ft-langbar .ft-lang-side-start { justify-content: flex-end; }
.ft .ft-langbar .ft-lang-side-end { justify-content: flex-start; }

.ft .ft-langbar .lang { font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.ft .ft-langbar .lang.to { color: var(--blue); }
.ft .ft-langbar .arrow { color: var(--muted); font-size: 1.05rem; }

/* Custom (non-Kendo) language dropdowns — keeps the plain "Detect language" look, on the ft palette */
.ft .ft-lang-select { position: relative; display: inline-flex; align-items: center; }
.ft .ft-lang-toggle {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .25rem;
    font-weight: 600; font-size: 1.05rem; color: var(--blue);
    border: 0; background: transparent; cursor: pointer;
}
.ft .ft-lang-toggle .fa-chevron-down { font-size: .78rem; color: #98a2b3; }
.ft .ft-lang-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; width: 260px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,41,.12); padding: .5rem; text-align: left;
}
.ft .ft-lang-menu-end { left: auto; right: 0; }
.ft .ft-lang-select.open .ft-lang-menu { display: block; }
.ft .ft-lang-search {
    width: 100%; border: 1px solid var(--blue-border); border-radius: 8px;
    padding: .45rem .65rem; font-size: .95rem; margin-bottom: .4rem;
}
.ft .ft-lang-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.ft .ft-lang-option { padding: .5rem .65rem; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--muted); }
.ft .ft-lang-option:hover { background: var(--blue-soft); }
.ft .ft-lang-option.selected { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.ft .ft-lang-option.hidden { display: none; }

/* Body card: shared shell for the upload / staged / result views (also the drop target) */
.ft .ft-body {
    margin-top: 1.25rem; background: #fff; border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,41,.08); padding: 2.5rem 1.5rem;
    text-align: center; outline: 2px dashed transparent; outline-offset: -10px;
    transition: box-shadow .15s ease, outline-color .15s ease;
}
.ft .ft-body.is-drag { outline-color: var(--blue); box-shadow: 0 4px 18px rgba(96,104,139,.18); }
.ft .ft-body[data-state="staged"], .ft .ft-body[data-state="result"] { padding: 1.5rem; }

.ft .ft-msg { min-height: 1.2rem; margin-bottom: .5rem; color: #b3402f; font-weight: 600; }

/* Upload (idle) view */
.ft .ft-icons { display: flex; justify-content: center; gap: .15rem; font-size: 2.4rem; margin-bottom: 1.1rem; }
.ft .ft-icons .fa-file-pdf { color: #d23f31; }
.ft .ft-icons .fa-file-word { color: #2a6ac1; }
.ft .ft-icons .fa-file-image { color: #3aa07a; }
.ft .ft-heading { font-size: 1.5rem; font-weight: 600; color: var(--navy); margin-bottom: 1.25rem; }
.ft .ft-select-btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem;
    font-weight: 700; font-size: 1rem; color: #fff; background: var(--blue);
    border: 0; border-radius: 10px; cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.ft .ft-select-btn:hover { background: var(--blue-hover); transform: translateY(-1px); }
.ft .ft-support { margin-top: 2rem; color: var(--muted); line-height: 1.7; }
.ft .ft-support strong { color: var(--navy); }

/* Staged view (chosen file awaiting translation) */
.ft .ft-staged-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.1rem 1.3rem; text-align: left;
}
.ft .ft-staged-file { display: flex; align-items: center; gap: .6rem; }
.ft .ft-staged-file i { font-size: 1.3rem; color: var(--muted); }
.ft .ft-staged-name { font-weight: 700; font-size: 1.05rem; color: var(--navy); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft .ft-staged-langs { margin-top: .35rem; padding-left: 1.95rem; color: var(--muted); }
.ft .ft-staged-langs .fa-arrow-right { margin: 0 .35rem; font-size: .85rem; }
.ft .ft-staged-remove { border: 0; background: transparent; color: var(--muted); font-size: 1.15rem; cursor: pointer; padding: .3rem .45rem; border-radius: 6px; }
.ft .ft-staged-remove:hover { background: #e8eaed; color: var(--navy); }
.ft .ft-staged-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.ft .ft-formats { display: flex; align-items: center; gap: .5rem; font-size: 1.4rem; }
.ft .ft-formats .fa-file-pdf { color: #d23f31; }
.ft .ft-formats .fa-file-word { color: #2a6ac1; }
.ft .ft-formats .fa-file-image { color: #3aa07a; }
.ft .ft-formats .info { color: #98a2b3; font-size: 1.2rem; }
.ft .ft-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.4rem; font-size: 1rem; font-weight: 700; color: #fff;
    background: var(--blue); border: 0; border-radius: 10px; cursor: pointer;
    transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.ft .ft-btn:hover:not(:disabled) { background: var(--blue-hover); transform: translateY(-1px); }
.ft .ft-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Working state: the button is disabled while the file uploads and the job is queued, but it must
   read as "busy", not "unavailable" — so it keeps its full strength and spins. CSS-only. */
.ft .ft-btn-spinner { display: none; }
.ft .ft-btn.is-busy { position: relative; opacity: 1; cursor: progress; }
/* The spinner replaces the wording, but the button keeps its size: the label goes transparent rather
   than being removed, so the button doesn't shrink under the cursor mid-click and keeps its accessible
   name (opacity, unlike visibility/display, leaves it in the accessibility tree). */
.ft .ft-btn.is-busy .label { opacity: 0; }
.ft .ft-btn.is-busy .ft-btn-spinner {
    display: block; position: absolute; inset: 0; margin: auto;
    width: 1.15em; height: 1.15em;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
    animation: ft-spin .7s linear infinite;
}
@keyframes ft-spin { to { transform: rotate(360deg); } }
/* Respect a reduced-motion preference: keep the ring, drop the rotation. */
@media (prefers-reduced-motion: reduce) {
    .ft .ft-btn.is-busy .ft-btn-spinner { animation: none; }
}

/* Result view: one card that moves through Detecting -> Translating -> Completed */
.ft .ft-result-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.5rem;
}
/* Green on success, so a finished translation reads as good news from across the page. The card only
   ever gets "completed" when the translation actually landed — a failure leaves the card on its last
   phase and reveals #resultError instead — so this needs no second class the way premium does. */
.ft .ft-result-card.completed { background: #ecfdf5; border-color: #a7f3d0; }
.ft .ft-result-file { display: flex; align-items: center; gap: .65rem; }
.ft .ft-result-file .icon { font-size: 1.4rem; color: var(--muted); }
.ft .ft-result-name { font-weight: 700; font-size: 1.05rem; color: var(--navy); word-break: break-all; }
/* Smaller than the file name above it so "source -> target" stays on one line: this column is only
   ~232px wide once the finished card's status and links have taken their share, and the line needs
   242px at the inherited 1rem. .85rem gives it 206px — room to spare for the common pairs. The
   longest names ("Chinese (Simplified) (detected) -> Spanish (Latin America)") still wrap; that
   needs width, not type size. */
.ft .ft-result-langs { margin-top: .4rem; padding-left: 2.05rem; color: var(--muted); font-size: .85rem; }
/* em, not rem: the arrow tracks the line's size rather than dwarfing it. */
.ft .ft-result-langs .fa-arrow-right { margin: 0 .35rem; font-size: .85em; }
/* Holds the status plus, once finished, both links — all on one line. This side never shrinks; the
   file name on the left gives up the width instead (it breaks anywhere, see .ft-result-name). */
.ft .ft-result-right { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; flex: 0 0 auto; }
.ft .ft-result-left { min-width: 0; }
.ft .ft-status { color: var(--muted); font-weight: 600; }
.ft .ft-status.processing { color: var(--navy); }
.ft .ft-status.done { color: var(--success); }
.ft .ft-status i, .ft .ft-download i { margin-right: .4rem; }
.ft .ft-progress { display: inline-block; width: 130px; height: 6px; margin-left: .6rem; background: var(--border); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.ft .ft-progress-bar { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--blue); animation: ft-indeterminate 1.2s ease-in-out infinite; }
@keyframes ft-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* The .ft prefix is load-bearing on these two — see the header note about site.css:236. */
.ft .ft-download { color: var(--blue); font-weight: 700; text-decoration: none; }
.ft .ft-download:hover { color: var(--blue-hover); text-decoration: underline; }
/* "Download" beside the primary "Open translation": same treatment, quieter, so the pair reads as
   one action and its alternative. */
.ft .ft-download.secondary { color: var(--muted); font-weight: 600; }
/* The links travel together: on a narrow card they wrap as one group, under the status. */
.ft .ft-result-actions { display: flex; align-items: center; gap: 1rem; }
/* Footer under the result card, holding the "translate another" action. */
.ft .ft-result-footer { display: flex; justify-content: center; margin-top: 1.25rem; }

/* Hard-failure notice (upload or translation error) */
.ft .ft-limit { margin-top: 1.1rem; padding: 1rem 1.15rem; border-radius: 12px; background: #fff6e9; border: 1px solid #f0d6a8; color: #7a4e12; font-weight: 600; }

/* Limit-reached notice — a calm blue info banner (icon + bold lead + countdown) */
.ft .ft-notice {
    display: flex; align-items: flex-start; gap: .7rem;
    margin-top: 1.1rem; padding: 1rem 1.25rem; border-radius: 12px;
    background: #eaf1fb; border: 1px solid #cddef4; color: var(--navy);
    font-size: .98rem; line-height: 1.55;
}
.ft .ft-notice .ft-notice-icon { flex-shrink: 0; margin-top: .15rem; font-size: 1.15rem; color: var(--blue); }
.ft .ft-notice strong { font-weight: 700; }

/* Focus rings, restored. site.css:10 `*:focus { outline: none }` strips them site-wide, which would
   leave every control in here unreachable by keyboard in any visible sense. :focus-visible so a mouse
   click doesn't leave a ring behind. */
.ft .ft-select-btn:focus-visible,
.ft .ft-btn:focus-visible,
.ft .ft-lang-toggle:focus-visible,
.ft .ft-staged-remove:focus-visible,
.ft .ft-download:focus-visible,
.ft .ft-lang-search:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
/* The options are list items driven by click/keyboard in translate.js, so they need the same treatment
   but read better with the ring inset. */
.ft .ft-lang-option:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 575px) {
    .ft .ft-result-card, .ft .ft-staged-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
}