/* ==========================================================================
   TransferTed Secure Upload Portal. Portal-specific styles

   Loaded AFTER transferted-theme.css and uses its custom properties
   (--mv-blue #00D639, --mv-ink #1A1A1A, --mv-* neutrals, --bs-* overrides).
   Anything general enough to belong to the brand belongs in the theme, not here.
   ========================================================================== */

/* ── App shell (authenticated pages) ─────────────────────────────────────── */

.tt-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--mv-snow, #F9FAFB);
}

.tt-topbar {
    background: var(--mv-ink, #1A1A1A);
    color: #fff;
    padding: 0.75rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.tt-topbar__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.tt-topbar__welcome {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.925rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-topbar__welcome strong { color: #fff; font-weight: 600; }

/* Top-bar navigation links and the sign-out button share one look, so a
   <form><button> logout is visually indistinguishable from an anchor. */
.tt-navlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: var(--bs-border-radius, 0.5rem);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.tt-navlink:hover,
.tt-navlink:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tt-navlink.is-active {
    background: rgba(0, 214, 57, 0.16);
    color: var(--mv-blue, #00D639);
}

.tt-main {
    flex: 1 0 auto;
    padding: 2rem 0 3rem;
}

.tt-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--mv-silver, #E5E7EB);
    background: #fff;
    padding: 1.25rem 0;
    text-align: center;
}

.tt-footer__assurance {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mv-graphite, #374151);
}

.tt-footer__assurance .bi { color: var(--mv-blue, #00D639); }

.tt-footer__fine {
    font-size: 0.8rem;
    color: var(--mv-iron, #6B7280);
}

/* ── Auth pages (anonymous shell) ────────────────────────────────────────── */

.tt-auth {
    margin: 0;
    min-height: 100vh;
    background: var(--mv-ink, #1A1A1A);
}

.tt-auth__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0F1A12 0%, #1A1A1A 55%, #0F2E18 100%);
    color: #fff;
}

/* Soft green glow, top-right. Purely decorative. */
.tt-auth__hero::after {
    content: '';
    position: absolute;
    right: -20%;
    top: -30%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 214, 57, 0.14) 0%, rgba(0, 214, 57, 0) 65%);
    pointer-events: none;
}

.tt-auth__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    text-align: center;
}

.tt-auth__logo { margin-bottom: 1.75rem; }

.tt-auth__card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bs-border-radius-xl, 1rem);
    padding: 2rem 2rem 1.75rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: left;
}

.tt-auth__assurance {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.tt-auth__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #fff;
}

.tt-auth__subtitle {
    font-size: 0.925rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.tt-auth__help {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* Form controls on the dark card ----------------------------------------- */

.tt-auth__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.4rem;
}

.tt-auth__input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-radius: var(--bs-border-radius, 0.5rem) !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.95rem !important;
}

.tt-auth__input::placeholder { color: rgba(255, 255, 255, 0.35) !important; }

.tt-auth__input:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--mv-blue, #00D639) !important;
    box-shadow: 0 0 0 3px rgba(0, 214, 57, 0.2) !important;
    color: #fff !important;
}

/* Browsers repaint autofilled fields white, which is unreadable on the dark
   card. The huge transition delay is the standard trick to defeat it. */
.tt-auth__input:-webkit-autofill,
.tt-auth__input:-webkit-autofill:hover,
.tt-auth__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(26, 26, 26, 0.95) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.tt-auth__btn {
    width: 100%;
    padding: 0.7rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600;
    margin-top: 0.25rem;
}

.tt-auth__error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--bs-border-radius, 0.5rem);
    color: #FCA5A5;
    padding: 0.7rem 0.9rem;
    font-size: 0.88rem;
    margin-bottom: 1.15rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.tt-auth__note {
    background: rgba(0, 214, 57, 0.1);
    border: 1px solid rgba(0, 214, 57, 0.3);
    border-radius: var(--bs-border-radius, 0.5rem);
    color: #A3F0B8;
    padding: 0.7rem 0.9rem;
    font-size: 0.88rem;
    margin-bottom: 1.15rem;
}

.tt-auth__link {
    color: var(--mv-blue, #00D639);
    text-decoration: none;
    font-weight: 500;
}

.tt-auth__link:hover { text-decoration: underline; }

/* One-time codes: wide tracking makes 6 digits easy to read back off a phone. */
.tt-code-input {
    text-align: center;
    font-size: 1.6rem !important;
    letter-spacing: 0.5em;
    text-indent: 0.5em; /* re-centres text that letter-spacing pushes left */
    font-variant-numeric: tabular-nums;
    padding: 0.7rem 0.5rem !important;
}

.tt-recovery-input {
    text-align: center;
    font-family: var(--mv-font-mono, Consolas, monospace) !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.1em;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */

.tt-card {
    background: #fff;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 1.5rem;
}

/* Visible only to screen readers until focused. Used for skip links. */
.tt-visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ── Password requirement checklist ──────────────────────────────────────── */

.tt-pwcheck {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
}

.tt-pwcheck li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.12rem 0;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.15s;
}

.tt-pwcheck li.is-met { color: var(--mv-blue, #00D639); }
.tt-pwcheck li .bi { font-size: 0.9rem; }

.tt-pwmatch { color: rgba(255, 255, 255, 0.45); }
.tt-pwmatch.is-met { color: var(--mv-blue, #00D639); }
.tt-pwmatch.is-unmet { color: #FCA5A5; }

/* ── Numbered setup steps (authenticator enrolment) ──────────────────────── */

.tt-steps { list-style: none; margin: 0; padding: 0; }

.tt-steps__item {
    display: flex;
    gap: 0.9rem;
    padding-bottom: 1.5rem;
}

.tt-steps__item:last-child { padding-bottom: 0; }

.tt-steps__num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 214, 57, 0.15);
    border: 1px solid rgba(0, 214, 57, 0.4);
    color: var(--mv-blue, #00D639);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tt-steps__body { flex: 1 1 auto; min-width: 0; }

.tt-steps__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 0.15rem 0 0.3rem;
}

.tt-steps__text {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.6rem;
}

/* White plate behind the QR: scanners need light background, dark modules. */
.tt-qr {
    display: inline-block;
    background: #fff;
    padding: 0.6rem;
    border-radius: var(--bs-border-radius, 0.5rem);
    line-height: 0;
}

.tt-qr img { display: block; }

.tt-manualkey { margin-top: 0.85rem; }

.tt-manualkey summary {
    font-size: 0.85rem;
    color: var(--mv-blue, #00D639);
    cursor: pointer;
}

.tt-manualkey__value {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--bs-border-radius, 0.5rem);
    padding: 0.4rem 0.7rem;
    color: #fff;
    font-family: var(--mv-font-mono, Consolas, monospace);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}

/* ── Recovery codes ──────────────────────────────────────────────────────── */

.tt-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--bs-border-radius, 0.5rem);
    padding: 0.9rem;
}

.tt-codes__item {
    color: #fff;
    font-family: var(--mv-font-mono, Consolas, monospace);
    font-size: 0.92rem;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 0.2rem 0;
}

.tt-auth__check .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.tt-auth__check .form-check-input:checked {
    background-color: var(--mv-blue, #00D639);
    border-color: var(--mv-blue, #00D639);
}

.tt-auth__check .form-check-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.88rem;
}

/* Printing recovery codes should produce a plain, readable sheet. Not a
   screenshot of a dark web page. */
@media print {
    .tt-auth,
    .tt-auth__hero { background: #fff !important; min-height: auto; }
    .tt-auth__hero::after { display: none; }
    .tt-auth__card {
        background: #fff !important;
        border: 1px solid #ccc;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tt-auth__title,
    .tt-auth__subtitle,
    .tt-codes__item { color: #000 !important; }
    .tt-codes { background: #fff; border: 1px solid #ccc; }
    .tt-auth__error,
    .tt-auth__help,
    form,
    .btn { display: none !important; }
}

/* ── Admin area ──────────────────────────────────────────────────────────── */

.tt-crumbs {
    font-size: 0.82rem;
    color: var(--mv-iron, #6B7280);
    margin-bottom: 1rem;
}

.tt-crumbs a { color: var(--mv-iron, #6B7280); text-decoration: none; }
.tt-crumbs a:hover { color: var(--mv-blue, #00D639); text-decoration: underline; }
.tt-crumbs span[aria-hidden] { margin: 0 0.35rem; opacity: 0.5; }

.tt-stat {
    background: #fff;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 1rem 1.15rem;
    height: 100%;
}

.tt-stat--warn { border-color: #F59E0B; background: #FFFBEB; }

.tt-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mv-ink, #1A1A1A);
}

.tt-stat__label {
    font-size: 0.8rem;
    color: var(--mv-iron, #6B7280);
    margin-top: 0.15rem;
}

.tt-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 1.15rem;
    background: #fff;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tt-tile:hover {
    border-color: var(--mv-blue, #00D639);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    color: inherit;
}

.tt-tile .bi { font-size: 1.35rem; color: var(--mv-blue, #00D639); margin-bottom: 0.35rem; }
.tt-tile__title { font-weight: 600; }
.tt-tile__sub { font-size: 0.82rem; color: var(--mv-iron, #6B7280); }

.tt-empty {
    background: #fff;
    border: 1px dashed var(--mv-slate, #D1D5DB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.tt-empty .bi { font-size: 2rem; color: var(--mv-mist, #9CA3AF); display: block; margin-bottom: 0.6rem; }

.tt-mono { font-family: var(--mv-font-mono, Consolas, monospace); font-size: 0.85em; }

.tt-truncate {
    /* clamp: never wider than the design wants, never wider than a phone has */
    max-width: clamp(9rem, 28vw, 22rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.9rem; }
.tt-dl dt { font-weight: 500; color: var(--mv-iron, #6B7280); }
.tt-dl dd { margin: 0; }

/* One-time credential reveal. Styled loudly on purpose: this is the only moment
   the password exists on screen, and it must not be mistaken for ordinary chrome. */
.tt-reveal {
    background: #FFFBEB;
    border: 2px solid #F59E0B;
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    overflow: hidden;
}

.tt-reveal__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #F59E0B;
    color: #1A1A1A;
    padding: 0.75rem 1.15rem;
}

.tt-reveal__head .bi { font-size: 1.25rem; }
.tt-reveal__body { padding: 1.15rem; }

.tt-reveal__value {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--mv-slate, #D1D5DB);
    border-radius: var(--bs-border-radius, 0.5rem);
    padding: 0.5rem 0.8rem;
    font-family: var(--mv-font-mono, Consolas, monospace);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--mv-ink, #1A1A1A);
    user-select: all;
}

.tt-reveal__value--sm { font-size: 0.85rem; letter-spacing: 0; word-break: break-all; }

/* ── Upload page ─────────────────────────────────────────────────────────── */

.tt-upload { max-width: 44rem; margin: 0 auto; }
.tt-upload__head { margin-bottom: 1.5rem; }
.tt-upload__form { margin-bottom: 1rem; }

/* The drop zone is a <label> wrapping a hidden file input, so it is clickable
   and keyboard-operable with no JavaScript at all. */
.tt-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 13rem;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 2px dashed var(--mv-slate, #D1D5DB);
    border-radius: var(--bs-border-radius-xl, 1rem);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}

.tt-drop:hover,
.tt-drop:focus-within {
    border-color: var(--mv-blue, #00D639);
    background: var(--mv-blue-lt, #E6FFF0);
}

.tt-drop.is-dragover {
    border-color: var(--mv-blue, #00D639);
    background: var(--mv-blue-lt, #E6FFF0);
    transform: scale(1.01);
}

.tt-drop__icon { font-size: 2.75rem; color: var(--mv-blue, #00D639); line-height: 1; }
.tt-drop__title { font-size: 1.05rem; font-weight: 600; color: var(--mv-ink, #1A1A1A); }
.tt-drop__hint { font-size: 0.85rem; color: var(--mv-iron, #6B7280); }

.tt-file {
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.tt-file__icon { font-size: 1.75rem; color: var(--mv-blue, #00D639); }
.tt-file__meta { flex: 1 1 auto; min-width: 0; }
.tt-file__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-file__size { font-size: 0.85rem; color: var(--mv-iron, #6B7280); }

/* The queue. Every selector here is prefixed, because site.css and this file load
   AFTER the theme: a bare .badge or .progress rule would repaint the whole
   application. Status pills and buttons are the house components, unstyled here. */
.tt-list {
    background: #fff;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    margin-bottom: 1rem;
    overflow: hidden;
}

.tt-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1.15rem;
    border-bottom: 1px solid var(--mv-silver, #E5E7EB);
    background: var(--mv-snow, #F9FAFB);
}

.tt-list__count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-graphite, #374151);
    font-variant-numeric: tabular-nums;
}

.tt-list__head-actions { display: flex; align-items: center; gap: 0.4rem; }

.tt-list__items { list-style: none; margin: 0; padding: 0; }

.tt-row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--mv-fog, #F3F4F6);
}

.tt-row:first-child { border-top: 0; }

.tt-row__icon { font-size: 1.4rem; color: var(--mv-blue, #00D639); line-height: 1.3; }

.tt-row__meta { flex: 1 1 auto; min-width: 0; }

.tt-row__name {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-row__sub { font-size: 0.8rem; color: var(--mv-iron, #6B7280); }
.tt-row__rate { font-variant-numeric: tabular-nums; }

/* Not clamped. This is where a failure explains itself, and a half-shown reason is
   worse than an uneven row. */
.tt-row__err { color: var(--mv-danger, #EF4444); }

.tt-row__bar { height: 0.9rem; margin-top: 0.4rem; border-radius: var(--bs-border-radius-sm, 0.25rem); }
.tt-row__bar .progress-bar {
    background-color: var(--mv-blue, #00D639);
    font-size: 0.65rem;
    font-weight: 600;
    transition: width 0.25s ease;
}

/* Actions bottom-align so an arriving progress bar cannot shift the status pill. */
.tt-row__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding-top: 0.1rem;
}

.tt-row__remove { line-height: 1; text-decoration: none; }

.tt-list__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--mv-silver, #E5E7EB);
    background: var(--mv-snow, #F9FAFB);
}

.tt-list__warn {
    font-size: 0.8rem;
    color: #B45309;
    flex: 1 1 14rem;
}

.tt-progress {
    background: #fff;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 1.15rem;
    margin-bottom: 1rem;
}

.tt-progress__bar { height: 1.5rem; border-radius: var(--bs-border-radius, 0.5rem); }
.tt-progress__bar .progress-bar {
    background-color: var(--mv-blue, #00D639);
    font-weight: 600;
    transition: width 0.25s ease;
}

.tt-progress__rate { font-size: 0.85rem; color: var(--mv-iron, #6B7280); font-variant-numeric: tabular-nums; }

.tt-progress__warn {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: #B45309;
}

.tt-done {
    background: var(--mv-blue-lt, #E6FFF0);
    border: 1px solid var(--mv-blue-mid, #A3F0B8);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.tt-done__icon { font-size: 2.5rem; color: var(--mv-blue, #00D639); display: block; margin-bottom: 0.5rem; }

.tt-assure {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--mv-snow, #F9FAFB);
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    font-size: 0.85rem;
    color: var(--mv-graphite, #374151);
}

.tt-assure .bi { color: var(--mv-blue, #00D639); font-size: 1.1rem; margin-top: 0.05rem; }

/* ── History ─────────────────────────────────────────────────────────────── */

.tt-history { max-width: 52rem; margin: 0 auto; }

@media (max-width: 575.98px) {
    .tt-row { flex-wrap: wrap; }
    .tt-row__actions { width: 100%; justify-content: flex-end; }
    .tt-list__foot .btn { width: 100%; }
    .tt-file { flex-wrap: wrap; }
    .tt-file .btn { flex: 1 1 auto; }
}

/* ── Auth-card alerts and warnings ───────────────────────────────────────── */

/* TempData alerts (from _Alerts) restyled for the dark glass card. Bootstrap's
   light alert palette is unreadable there. */
.tt-auth .alert {
    border-radius: var(--bs-border-radius, 0.5rem);
    font-size: 0.88rem;
    padding: 0.7rem 0.9rem;
}

.tt-auth .alert-success {
    background: rgba(0, 214, 57, 0.1);
    border-color: rgba(0, 214, 57, 0.3);
    color: #A3F0B8;
}

.tt-auth .alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #FCA5A5;
}

.tt-auth .alert-warning,
.tt-auth__warn {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #FCD34D;
}

.tt-auth .alert-info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #BFDBFE;
}

.tt-auth .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.tt-auth__warn {
    border-radius: var(--bs-border-radius, 0.5rem);
    padding: 0.7rem 0.9rem;
    font-size: 0.88rem;
    margin-bottom: 1.15rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* ── Support line ────────────────────────────────────────────────────────── */

.tt-supportline .bi { margin-right: 0.2rem; }

/* LIGHT grounds. This was color: inherit, which took whatever the surrounding
   paragraph was set to, so on the dashboard banner the support address rendered in
   --mv-iron body colour and did not read as a link at all. --mv-cyan is the theme's
   deep-green secondary: 5.48:1 on white, 5.25:1 on snow, with the signature green
   carried underneath as a RULE. Green as a letterform on a light ground is forbidden
   by the brand and would measure 2.80:1, so it is never the colour here. */
.tt-supportline__mail {
    color: var(--mv-cyan, #047857);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--mv-blue, #00D639);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.tt-supportline__mail:hover,
.tt-supportline__mail:focus-visible { color: var(--mv-cyan-hover, #065F46); }   /* 7.68:1 on white */

/* DARK ground (the sign-in screens). Higher specificity, so it still wins here, and
   green IS correct on this ground: #00D639 measures 8.85:1 on --mv-ink. */
.tt-auth .tt-supportline__mail { color: var(--mv-blue, #00D639); text-decoration: none; }
.tt-auth .tt-supportline__mail:hover { text-decoration: underline; }

/* ── Disabled drop zone (storage not configured) ─────────────────────────── */

.tt-drop--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.tt-drop--disabled:hover,
.tt-drop--disabled:focus-within {
    border-color: var(--mv-slate, #D1D5DB);
    background: #fff;
}

/* ── Light variant of the numbered steps (admin reveal, light cards) ─────── */

.tt-steps--light .tt-steps__title { color: var(--mv-ink, #1A1A1A); }
.tt-steps--light .tt-steps__text { color: var(--mv-graphite, #374151); }
.tt-steps--light .tt-steps__num {
    background: rgba(0, 214, 57, 0.12);
    border-color: rgba(0, 179, 47, 0.5);
    color: #00802A;
}

/* ── Setup checklist (admin first-run) ───────────────────────────────────── */

.tt-checklist-card { border-left: 4px solid var(--mv-blue, #00D639); }

.tt-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt-checklist__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 0.5rem;
    border-radius: var(--bs-border-radius, 0.5rem);
}

.tt-checklist__item.is-current {
    background: var(--mv-blue-lt, #E6FFF0);
    border: 1px solid var(--mv-blue-mid, #A3F0B8);
}

.tt-checklist__mark {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--mv-mist, #9CA3AF);
}

.tt-checklist__item.is-done .tt-checklist__mark { color: var(--mv-blue, #00D639); }
.tt-checklist__item.is-current .tt-checklist__mark { color: #00802A; }

.tt-checklist__body { min-width: 0; }

.tt-checklist__title {
    display: block;
    font-weight: 600;
    color: var(--mv-ink, #1A1A1A);
}

.tt-checklist__item.is-done .tt-checklist__title {
    color: var(--mv-iron, #6B7280);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--mv-slate, #D1D5DB);
}

.tt-checklist__detail {
    display: block;
    font-size: 0.85rem;
    color: var(--mv-graphite, #374151);
}

.tt-checklist__item.is-done .tt-checklist__detail { color: var(--mv-mist, #9CA3AF); }

/* ── "How this works" reference ──────────────────────────────────────────── */

.tt-howworks {
    background: var(--mv-snow, #F9FAFB);
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius, 0.5rem);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.tt-howworks ol { padding-left: 1.2rem; }
.tt-howworks li { margin-bottom: 0.5rem; }
.tt-howworks li:last-child { margin-bottom: 0; }

/* ── Section labels + linked stat cards ──────────────────────────────────── */

.tt-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mv-iron, #6B7280);
    margin-bottom: 0.75rem;
}

.tt-stat--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tt-stat--link:hover,
.tt-stat--link:focus-visible {
    border-color: var(--mv-blue, #00D639);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    color: inherit;
}

.tt-stat--link:focus-visible,
.tt-tile:focus-visible {
    outline: 3px solid rgba(0, 214, 57, 0.4);
    outline-offset: 2px;
}

.tt-stat__value { display: block; }
.tt-stat__label { display: block; }

/* ── Onboarding progress (Step N of 3, dark auth shell) ──────────────────── */

.tt-obsteps { margin-bottom: 1.25rem; }

.tt-obsteps__count {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.tt-obsteps__list {
    list-style: none;
    display: flex;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.tt-obsteps__item {
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.45);
}

.tt-obsteps__item.is-done {
    border-color: rgba(0, 214, 57, 0.4);
    color: var(--mv-blue-mid, #A3F0B8);
}

.tt-obsteps__item.is-current {
    background: rgba(0, 214, 57, 0.15);
    border-color: var(--mv-blue, #00D639);
    color: #fff;
    font-weight: 600;
}

/* Password checklist on the LIGHT shell (voluntary password change). The default
   styling assumes the dark card. */
.tt-app .tt-pwcheck li { color: var(--mv-iron, #6B7280); }
.tt-app .tt-pwcheck li.is-met { color: #00802A; }
.tt-app .tt-pwmatch { color: var(--mv-iron, #6B7280); }
.tt-app .tt-pwmatch.is-met { color: #00802A; }
.tt-app .tt-pwmatch.is-unmet { color: #B91C1C; }


/* ── Mobile: page-header action buttons go full width ────────────────────── */

@media (max-width: 575.98px) {
    .tt-page-actions > div:last-child,
    .tt-page-actions > a.btn {
        width: 100%;
    }
    .tt-page-actions > div:last-child .btn,
    .tt-page-actions > a.btn {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ── "Needs your attention" panel ────────────────────────────────────────── */

.tt-attention { border-left: 4px solid var(--mv-iron, #6B7280); }
.tt-attention:has(.is-danger) { border-left-color: #EF4444; }
.tt-attention:has(.tt-attention__clear) { border-left-color: var(--mv-blue, #00D639); }

.tt-attention__list { list-style: none; margin: 0; padding: 0; }

.tt-attention__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius, 0.5rem);
    margin-bottom: 0.5rem;
}

.tt-attention__item:last-child { margin-bottom: 0; }

.tt-attention__item.is-danger { background: #FEF2F2; border-color: #FCA5A5; }
.tt-attention__item.is-warning { background: #FFFBEB; border-color: #FCD34D; }
.tt-attention__item.is-info { background: var(--mv-snow, #F9FAFB); }

.tt-attention__icon { font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }
.tt-attention__item.is-danger .tt-attention__icon { color: #B91C1C; }
.tt-attention__item.is-warning .tt-attention__icon { color: #B45309; }
.tt-attention__item.is-info .tt-attention__icon { color: var(--mv-iron, #6B7280); }

.tt-attention__body { flex: 1 1 auto; min-width: 0; }

.tt-attention__text {
    display: block;
    font-weight: 600;
    color: var(--mv-ink, #1A1A1A);
}

.tt-attention__detail {
    display: block;
    font-size: 0.85rem;
    color: var(--mv-graphite, #374151);
}

.tt-attention__clear {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem;
    background: var(--mv-blue-lt, #E6FFF0);
    border: 1px solid var(--mv-blue-mid, #A3F0B8);
    border-radius: var(--bs-border-radius, 0.5rem);
}

.tt-attention__clear .bi { color: var(--mv-blue, #00D639); font-size: 1.15rem; }

@media (max-width: 575.98px) {
    .tt-attention__item { flex-wrap: wrap; }
    .tt-attention__item .btn { width: 100%; }
}

/* ── Per client progress (dashboard) ─────────────────────────────────────── */

.tt-progress-card { border-left: 4px solid var(--mv-blue, #00D639); }

.tt-progress-list { list-style: none; margin: 0; padding: 0; }

.tt-progress-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mv-silver, #E5E7EB);
    border-radius: var(--bs-border-radius, 0.5rem);
    margin-bottom: 0.5rem;
}

.tt-progress-row:last-child { margin-bottom: 0; }
.tt-progress-row.is-complete { background: var(--mv-snow, #F9FAFB); }
.tt-progress-row.is-blocked { background: #FEF2F2; border-color: #FCA5A5; }

.tt-progress-row__main { flex: 1 1 auto; min-width: 0; }

.tt-progress-row__client {
    display: block;
    font-weight: 600;
    color: var(--mv-ink, #1A1A1A);
    text-decoration: none;
}

.tt-progress-row__client:hover { color: var(--mv-blue-hover, #00B32F); text-decoration: underline; }

.tt-progress-row__status {
    display: block;
    font-size: 0.85rem;
    color: var(--mv-graphite, #374151);
}

.tt-progress-row.is-blocked .tt-progress-row__status { color: #B91C1C; font-weight: 500; }
.tt-progress-row.is-complete .tt-progress-row__status { color: var(--mv-iron, #6B7280); }

.tt-progress-row__stages {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
}

.tt-stagedot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--mv-slate, #D1D5DB);
}

.tt-stagedot.is-done { background: var(--mv-blue, #00D639); }
.tt-progress-row.is-blocked .tt-stagedot.is-done { background: #EF4444; }

.tt-progress-row__count {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    color: var(--mv-iron, #6B7280);
    font-variant-numeric: tabular-nums;
}

.tt-progress-row__action { flex-shrink: 0; }

@media (max-width: 767.98px) {
    .tt-progress-row { flex-wrap: wrap; gap: 0.5rem; }
    .tt-progress-row__main { flex: 1 1 100%; }
    .tt-progress-row__action { flex: 1 1 auto; }
    .tt-progress-row__action .btn { width: 100%; }
}

/* ── Auth shell additions for the TransferTed build ──────────────────────
   The portal carried these two as inline style attributes. Moved into the
   stylesheet so the auth screens stay free of inline presentation and the
   colours come from the theme rather than being repeated per page. */
.tt-auth__hint {
    color: rgba(255, 255, 255, .45);
}

.tt-auth__statusicon {
    font-size: 2.25rem;
    color: #F59E0B;
}

/* The progress bar starts empty; upload.js sets the width as blocks commit. Kept in the
   stylesheet rather than as an inline style attribute on the element. */
.tt-progress__fill {
    width: 0;
}

/* ── Stream tick-boxes grouped by engine (workspace Create and Detail) ────────── */
.tt-stream-group { margin-bottom: 0.6rem; }
.tt-stream-group:last-child { margin-bottom: 0; }
.tt-stream-group__title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mv-iron, #6B7280);
    margin-bottom: 0.2rem;
}

/* ── Token row actions: reason box plus Reset / Revoke in one small form ────── */
.tt-token-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.tt-token-actions input[type="text"] { max-width: 11rem; }