/* Shared UI primitives injected by the central View renderer. */
/* A formatted scalar owns its reading order, not the surrounding language. */
.tms-scalar { direction: ltr; unicode-bidi: isolate; }

.journal-pagination {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin: 1rem 0;
}

.journal-pagination span {
    color: #91a099;
    font-size: .88rem;
}

.deleted-trade-grid .engine-trade-card {
    border-color: rgba(148, 163, 184, .45);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #d6af58;
    outline-offset: 3px;
}

[aria-invalid="true"] {
    border-color: #d64f63 !important;
    box-shadow: 0 0 0 .2rem rgba(214, 79, 99, .18) !important;
}

/* -------------------------------------------------------------------------
   TMS design system: shared colors, geometry and state primitives.
   ------------------------------------------------------------------------- */
:root {
    --tms-bg: #06110d;
    --tms-surface: rgba(12, 37, 28, .86);
    --tms-surface-strong: #0d2a20;
    --tms-border: rgba(189, 158, 86, .28);
    --tms-gold: #d6af58;
    --tms-gold-strong: #f0c96f;
    --tms-green: #43c98b;
    --tms-red: #c7445d;
    /* Financial/severity semantics never follow the selected theme accent. */
    --tms-success: #31d297;
    --tms-danger: #ff6b72;
    --tms-warning: #e0ae43;
    --tms-muted: #91a099;
    --tms-radius-sm: .75rem;
    --tms-radius: 1.05rem;
    --tms-radius-lg: 1.4rem;
    --tms-shadow: 0 18px 50px rgba(0, 0, 0, .24);
    --tms-motion: 180ms ease;
}

/* Reusable field and card geometry for current and future modules. */
.tms-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.tms-field{display:grid;min-width:0;gap:.42rem}
.tms-field>span,.tms-field>label{color:var(--tms-muted);font-size:.76rem;font-weight:750;letter-spacing:.025em}
.tms-surface-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.tms-surface-card{min-width:0;padding:1rem;border:1px solid var(--tms-border);border-radius:var(--tms-radius);background:color-mix(in srgb,var(--tms-surface-strong) 76%,transparent)}
/* A list toolbar belongs to the collection, never to one record's grid cell. */
.tms-unified-list-controls{grid-column:1/-1;min-width:0;max-width:100%}
@media(max-width:767.98px){.tms-form-grid,.tms-surface-grid{grid-template-columns:1fr}}

body.tms-no-motion *,
body.tms-no-motion *::before,
body.tms-no-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
}

/* The loader is displayed only when navigation lasts longer than 200ms. */
.tms-navigation-loader {
    align-items: center;
    background: rgba(3, 12, 9, .92);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 1.25rem;
    position: fixed;
    transition: opacity var(--tms-motion);
    z-index: 20000;
}

.tms-navigation-loader.is-visible { opacity: 1; }

.tms-loader-shell {
    align-items: center;
    display: grid;
    gap: 1rem;
    max-width: 34rem;
    width: min(88vw, 34rem);
}

.tms-loader-brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .72rem;
    justify-content: center;
    text-align: center;
}

.tms-loader-logo {
    align-items: center;
    background: #0b6b53;
    border: 2px solid var(--tms-gold-strong);
    border-radius: 1.05rem;
    box-shadow: 0 0 0 1px rgba(240, 201, 111, .12), 0 14px 36px rgba(0, 0, 0, .42);
    color: var(--tms-gold-strong);
    display: inline-flex;
    font-size: 1.12rem;
    font-weight: 850;
    height: 4.1rem;
    justify-content: center;
    letter-spacing: .14em;
    padding-left: .14em;
    width: 4.1rem;
}

.tms-loader-brand strong {
    color: var(--tms-gold-strong);
    font-size: clamp(.82rem, 2vw, 1rem);
    font-weight: 700;
    letter-spacing: .075em;
}
.tms-loader-brand small{color:var(--tms-gold,#d6af58);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

.tms-loader-skeleton { display: grid; gap: .7rem; }
.tms-loader-skeleton i {
    animation: tms-shimmer 1.15s linear infinite;
    background: linear-gradient(100deg, rgba(255,255,255,.035) 20%, rgba(214,175,88,.16) 42%, rgba(255,255,255,.035) 64%);
    background-size: 220% 100%;
    border: 1px solid rgba(214,175,88,.12);
    border-radius: var(--tms-radius);
    display: block;
    height: 4.4rem;
}
.tms-loader-skeleton i:nth-child(2) { height: 7rem; }
@keyframes tms-shimmer { to { background-position-x: -220%; } }

.tms-content-exit main,
.tms-content-exit .account-workspace {
    opacity: .72;
    transition: opacity var(--tms-motion), transform var(--tms-motion);
    transform: translateY(2px);
}

/* Unified confirmation dialog. */
.tms-confirm-backdrop {
    align-items: center;
    background: rgba(0, 0, 0, .7);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 21000;
}
.tms-confirm-dialog {
    background: linear-gradient(150deg, rgba(14, 43, 33, .98), rgba(6, 21, 16, .99));
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    box-shadow: var(--tms-shadow);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: 1.25rem;
    width: min(100%, 28rem);
}
.tms-confirm-dialog > i {
    align-items: center;
    background: rgba(214, 175, 88, .12);
    border-radius: 50%;
    color: var(--tms-gold);
    display: flex;
    font-size: 1.3rem;
    height: 2.8rem;
    justify-content: center;
    width: 2.8rem;
}
.tms-confirm-dialog h2 { color: #f5f2e9; font-size: 1.12rem; margin: .9rem 0 .35rem; }
.tms-confirm-dialog p { color: #b7c3bd; line-height: 1.65; margin: 0; }
.tms-confirm-actions { display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1.2rem; }
.tms-confirm-actions button { min-height: 2.75rem; min-width: 6.5rem; }

/* Non-blocking operation feedback. */
.tms-toast-region {
    display: grid;
    gap: .65rem;
    inset: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) auto auto;
    max-width: min(24rem, calc(100vw - 2rem));
    position: fixed;
    z-index: 22000;
}
.tms-toast {
    align-items: center;
    animation: tms-toast-in .2s ease both;
    background: rgba(10, 31, 24, .97);
    border: 1px solid var(--tms-border);
    border-left: 4px solid var(--tms-gold);
    border-radius: var(--tms-radius-sm);
    box-shadow: var(--tms-shadow);
    color: #e8eee9;
    display: flex;
    gap: .7rem;
    padding: .8rem .95rem;
}
.tms-toast.is-success { border-left-color: var(--tms-green); }
.tms-toast.is-danger { border-left-color: var(--tms-red); }
.tms-toast.is-warning { border-left-color: var(--tms-warning); }
.tms-toast.is-leaving { opacity: 0; transform: translateY(-5px); transition: var(--tms-motion); }
@keyframes tms-toast-in { from { opacity: 0; transform: translateY(-5px); } }

button[aria-busy="true"], .btn[aria-busy="true"] { cursor: wait; opacity: .72; pointer-events: none; }
button[aria-busy="true"]::after, .btn[aria-busy="true"]::after {
    animation: tms-spin .7s linear infinite;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: .9rem;
    margin-inline-start: .5rem;
    vertical-align: -.12rem;
    width: .9rem;
}
@keyframes tms-spin { to { transform: rotate(360deg); } }

/* Reusable Loading / Empty / Error / Offline / Ready states. */
.tms-state {
    align-items: center;
    background: rgba(7, 25, 18, .68);
    border: 1px dashed rgba(145,160,153,.34);
    border-radius: var(--tms-radius);
    color: var(--tms-muted);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    justify-content: center;
    min-height: 8rem;
    padding: 1.25rem;
    text-align: center;
}
.tms-state i { color: var(--tms-gold); font-size: 1.45rem; }
.tms-state-error { border-color: rgba(199,68,93,.5); }
.tms-state-error i { color: var(--tms-red); }
.tms-offline-banner {
    background: #3a2c14;
    border-bottom: 1px solid var(--tms-warning);
    color: #f4d68b;
    font-size: .82rem;
    inset: 0 0 auto;
    padding: .45rem 1rem;
    position: fixed;
    text-align: center;
    z-index: 20500;
}

[data-live-refresh].is-refreshing { opacity: .68; position: relative; }
[data-live-refresh].is-refreshing::after {
    animation: tms-shimmer 1.15s linear infinite;
    background: linear-gradient(100deg, transparent 20%, rgba(214,175,88,.1) 42%, transparent 64%);
    background-size: 220% 100%;
    border-radius: inherit;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.tms-refresh-status { color: var(--tms-muted); font-size: .72rem; margin: .5rem 0; text-align: center; }

.tms-help-trigger {
    align-items: center;
    background: rgba(214,175,88,.1);
    border: 1px solid rgba(214,175,88,.24);
    border-radius: 50%;
    color: var(--tms-gold);
    display: inline-flex;
    font-size: .72rem;
    height: 1.35rem;
    justify-content: center;
    margin-inline-start: .35rem;
    padding: 0;
    vertical-align: middle;
    width: 1.35rem;
}
.tms-help-disabled .context-help,.tms-help-disabled .tms-help-trigger { display: none !important; }
.tms-help-popover {
    background: #102d23;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-sm);
    box-shadow: var(--tms-shadow);
    color: #dbe4df;
    font-size: .78rem;
    line-height: 1.55;
    max-width: 18rem;
    padding: .65rem .75rem;
    position: fixed;
    z-index: 21500;
}

.tms-draft-banner {
    align-items: center;
    background: rgba(214,175,88,.1);
    border: 1px solid rgba(214,175,88,.28);
    border-radius: var(--tms-radius-sm);
    color: #ead59f;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    margin-bottom: .8rem;
    padding: .65rem .8rem;
}
.tms-draft-banner div { display: flex; gap: .45rem; }
.tms-draft-banner button { font-size: .76rem; min-height: 2rem; }
.tms-draft-status{display:block;margin:.55rem 0 0;color:var(--tms-muted);font-size:.66rem;text-align:end}.tms-draft-status::before{content:'•';margin-inline-end:.35rem;color:var(--tms-green)}
.tms-undo-toast button{margin-inline-start:auto;min-height:30px;padding:.25rem .65rem;font-size:.68rem}
.avatar-crop-backdrop{position:fixed;inset:0;z-index:24000;display:grid;padding:1rem;place-items:center;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.avatar-crop-backdrop[hidden]{display:none}.avatar-crop-dialog{display:grid;width:min(100%,390px);max-height:calc(100dvh - 2rem);overflow:auto;gap:.75rem;padding:1rem;border:1px solid var(--tms-border);border-radius:22px;background:var(--tms-surface-strong);box-shadow:var(--tms-shadow)}.avatar-crop-dialog header{display:flex;align-items:center;justify-content:space-between}.avatar-crop-dialog h2{margin:0;color:#edf3ef;font-size:1rem}.avatar-crop-dialog header button{display:grid;width:34px;height:34px;padding:0;place-items:center;border:0;background:transparent;color:#a5b2ac}.avatar-crop-dialog>p{margin:0;color:var(--tms-muted,#aab6b0);font-size:.72rem;line-height:1.6}.avatar-crop-stage{overflow:hidden;width:min(100%,320px);margin:auto;border:2px solid var(--tms-gold);border-radius:50%;background:#020706;touch-action:none}.avatar-crop-stage canvas{display:block;width:100%;height:auto}.avatar-crop-stage:focus-within{outline:2px solid var(--tms-gold);outline-offset:3px}.avatar-crop-dialog>label{display:grid;gap:.4rem;color:#aab6b0;font-size:.72rem}.avatar-crop-dialog input[type=range]{accent-color:var(--tms-gold)}.avatar-crop-actions{display:flex;justify-content:flex-end;gap:.55rem}

/* Mobile table-to-card adapter. Tables may opt out with data-mobile-table=scroll. */
@media (max-width: 767.98px) {
    table.tms-mobile-cards thead { display: none; }
    table.tms-mobile-cards,
    table.tms-mobile-cards tbody { display: block; width: 100%; }
    table.tms-mobile-cards tr {
        background: rgba(10, 32, 24, .74);
        border: 1px solid var(--tms-border);
        border-radius: var(--tms-radius);
        display: grid;
        gap: 0;
        margin-bottom: .75rem;
        overflow: hidden;
        padding: .35rem .75rem;
    }
    table.tms-mobile-cards td {
        align-items: center;
        border: 0 !important;
        display: grid;
        font-size: .84rem;
        gap: .75rem;
        grid-template-columns: minmax(6.5rem, 42%) 1fr;
        min-height: 2.4rem;
        padding: .42rem 0 !important;
        text-align: end !important;
    }
    table.tms-mobile-cards td::before {
        color: var(--tms-muted);
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 650;
        text-align: start;
    }
    table.tms-mobile-cards td:empty { display: none; }
    table.tms-mobile-cards td:last-child { border-top: 1px solid rgba(255,255,255,.07) !important; grid-template-columns: 1fr; justify-items: end; }
    table.tms-mobile-cards td:last-child::before:empty { display: none; }
    .tms-confirm-actions { flex-direction: column-reverse; }
    .tms-confirm-actions button { width: 100%; }
    .tms-toast-region { inset-inline: 1rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .tms-loader-skeleton i, button[aria-busy="true"]::after, .btn[aria-busy="true"]::after { animation-duration: 1.5s; }
}

.profile-session-actions { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.profile-session-list { display: grid; gap: .7rem; }
.profile-session-item {
    align-items: center;
    background: rgba(6, 22, 16, .62);
    border: 1px solid rgba(145,160,153,.2);
    border-radius: var(--tms-radius);
    display: grid;
    gap: .8rem;
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: .8rem .9rem;
}
.profile-session-item.current { border-color: rgba(67,201,139,.42); }
.profile-session-item > i { color: var(--tms-gold); font-size: 1.35rem; }
.profile-session-item div { display: grid; gap: .15rem; }
.profile-session-item small { color: var(--tms-muted); font-size: .75rem; overflow-wrap: anywhere; }
@media(max-width:575.98px){.profile-session-item{grid-template-columns:auto 1fr}.profile-session-item form,.profile-session-item>.badge{grid-column:1/-1;justify-self:end}}

.mt5-import-dropzone {
    align-items: center;
    background: rgba(6,22,16,.52);
    border: 1px dashed rgba(214,175,88,.34);
    border-radius: var(--tms-radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: 1rem;
}
.mt5-import-dropzone > i { color: var(--tms-gold); font-size: 1.65rem; }
.mt5-import-dropzone > div { display: grid; gap: .2rem; }
.mt5-import-dropzone small,.mt5-selected-file { color: var(--tms-muted); font-size: .78rem; }
.mt5-import-dropzone input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.mt5-selected-file { margin: .65rem 0 0; overflow-wrap: anywhere; }
@media(max-width:575.98px){.mt5-import-dropzone{grid-template-columns:auto 1fr}.mt5-import-dropzone label{grid-column:1/-1;width:100%}}
/* Shared table-sort.js owns this presentation contract, not Engine app.css. */
.table-sort-button{display:inline-flex;align-items:center;gap:.38rem;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.table-sort-button i{font-size:.72rem;opacity:.55}
.table-sort-button:hover,.table-sort-button:focus-visible{color:var(--gold,#d6af58);outline:0}
.table-sort-button:focus-visible{box-shadow:0 2px 0 var(--gold,#d6af58)}
th[aria-sort="ascending"] .table-sort-button i::before{content:"\f145"}
th[aria-sort="descending"] .table-sort-button i::before{content:"\f124"}