/* =========================================================
   MY TRADING JOURNAL — MASTER BUTTON SYSTEM
   Trader: Gold | Investor: Emerald
   ========================================================= */

.ta-btn {
    display: inline-flex;
    box-sizing: border-box;
    appearance: none;

    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 34px;
    padding: 7px 10px;

    border: 1px solid;
    border-radius: 8px;

    color: inherit;
    background: transparent;

    font-family: inherit;
    font-size: 8px !important;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;

    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;

    transition:
        color .14s ease,
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease,
        transform .14s ease,
        opacity .14s ease;
}

.ta-btn:hover {
    transform: translateY(-1px);
}

.ta-btn:active {
    transform: translateY(1px);
}

/* Compact actions used inside cards, tables and modal footers. */
.ta-btn.ta-btn--compact {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 11px;
}

/* Icon-only controls such as modal close buttons. */
.ta-btn.ta-btn--icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    gap: 0;
}

/* Non-clickable labels that intentionally share button geometry. */
.ta-btn.ta-btn--static {
    cursor: default;
}

.ta-btn.ta-btn--static:hover,
.ta-btn.ta-btn--static:active {
    transform: none;
}

.ta-btn[disabled],
.ta-btn.is-disabled {
    opacity: .42 !important;
    pointer-events: none;
}

/* =========================================================
   THEME TOKENS
   ========================================================= */

/* TRADER — GOLD */
body.ta-app-v2:not(.ta-investor-shell) {
    --ta-button-accent: #e8c065;
    --ta-button-accent-hover: #ffd978;
    --ta-button-border: rgba(232, 192, 101, .82);
    --ta-button-hover-bg: rgba(232, 192, 101, .075);
    --ta-button-focus: rgba(232, 192, 101, .72);
    --ta-button-glow: rgba(232, 192, 101, .09);
}

/* INVESTOR — EMERALD */
body.ta-app-v2.ta-investor-shell {
    --ta-button-accent: #55d6a5;
    --ta-button-accent-hover: #79e8bd;
    --ta-button-border: rgba(85, 214, 165, .72);
    --ta-button-hover-bg: rgba(85, 214, 165, .075);
    --ta-button-focus: rgba(85, 214, 165, .68);
    --ta-button-glow: rgba(85, 214, 165, .09);
}


/* =========================================================
   PRIMARY
   Trader: Gold | Investor: Emerald
   ========================================================= */

body.ta-app-v2 .ta-btn.ta-btn--primary {
    color: var(--ta-button-accent) !important;
    background: transparent !important;
    border-color: var(--ta-button-border) !important;
    opacity: 1 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 0 0 1px rgba(255, 255, 255, .015),
        0 4px 12px rgba(0, 0, 0, .24) !important;
}

body.ta-app-v2 .ta-btn.ta-btn--primary:hover {
    color: var(--ta-button-accent-hover) !important;
    background: var(--ta-button-hover-bg) !important;
    border-color: var(--ta-button-accent) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 0 0 1px var(--ta-button-glow),
        0 5px 14px rgba(0, 0, 0, .28) !important;
}

/* Trader primary: the warm inner glow used by the approved Add Note button. */
body.ta-app-v2:not(.ta-investor-shell) .ta-btn.ta-btn--primary {
    background: linear-gradient(
        180deg,
        rgba(232, 192, 101, .075) 0%,
        rgba(232, 192, 101, .025) 100%
    ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 0 12px rgba(232, 192, 101, .035),
        0 4px 12px rgba(0, 0, 0, .24) !important;
}

body.ta-app-v2:not(.ta-investor-shell) .ta-btn.ta-btn--primary:hover {
    background: linear-gradient(
        180deg,
        rgba(232, 192, 101, .12) 0%,
        rgba(232, 192, 101, .045) 100%
    ) !important;
}


/* =========================================================
   SECONDARY
   Muted Gold for Trader / Muted Emerald for Investor
   ========================================================= */

body.ta-app-v2 .ta-btn.ta-btn--secondary {
    color: var(--ta-button-accent) !important;
    background: transparent !important;
    border-color: var(--ta-button-border) !important;
    opacity: .46 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 3px 8px rgba(0, 0, 0, .18) !important;
}

body.ta-app-v2 .ta-btn.ta-btn--secondary:hover {
    color: var(--ta-button-accent-hover) !important;
    background: var(--ta-button-hover-bg) !important;
    border-color: var(--ta-button-accent) !important;
    opacity: .82 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 4px 12px rgba(0, 0, 0, .24) !important;
}

/* =========================================================
   DANGER
   Close / Delete
   ========================================================= */

body.ta-app-v2 .ta-btn.ta-btn--danger {
    color: #ff6b72 !important;
    background: transparent !important;
    border-color: rgba(255, 89, 98, .72) !important;
    opacity: 1 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 4px 12px rgba(0, 0, 0, .24) !important;
}

body.ta-app-v2 .ta-btn.ta-btn--danger:hover {
    color: #ff8b91 !important;
    background: rgba(255, 89, 98, .08) !important;
    border-color: #ff656d !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 0 0 1px rgba(255, 89, 98, .08),
        0 5px 14px rgba(0, 0, 0, .28) !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

body.ta-app-v2 .ta-btn:focus-visible {
    outline: 2px solid var(--ta-button-focus);
    outline-offset: 2px;
}


/* =========================================================
   DISABLED — MUST REMAIN LAST
   ========================================================= */

body.ta-app-v2 .ta-btn[disabled],
body.ta-app-v2 .ta-btn.is-disabled {
    opacity: .42 !important;
    pointer-events: none;
    cursor: not-allowed;
    transform: none;
}

/* Active pagination page — primary outline, never solid */
body.ta-app-v2 .bt-pagination a,
body.ta-app-v2 .bt-pagination span,
body.ta-app-v2 .ta-trades-pagination a,
body.ta-app-v2 .ta-trades-pagination span,
body.ta-app-v2 .ta-daily-pages .ta-page-btn {
    border-radius: 7px !important;
}

body.ta-app-v2:not(.ta-investor-shell) .bt-pagination a:not(.active):not(.disabled),
body.ta-app-v2:not(.ta-investor-shell) .bt-pagination span:not(.active):not(.disabled),
body.ta-app-v2:not(.ta-investor-shell) .ta-trades-pagination a:not(.active):not(.disabled),
body.ta-app-v2:not(.ta-investor-shell) .ta-trades-pagination span:not(.active):not(.disabled) {
    color: #f2cf75 !important;
    background: rgba(232, 192, 101, .035) !important;
    border-color: rgba(232, 192, 101, .28) !important;
}

body.ta-app-v2:not(.ta-investor-shell) .bt-pagination span.active,
body.ta-app-v2:not(.ta-investor-shell) .bt-pagination a.active,
body.ta-app-v2:not(.ta-investor-shell) .ta-trades-pagination span.active,
body.ta-app-v2:not(.ta-investor-shell) .ta-trades-pagination a.active,
body.ta-app-v2:not(.ta-investor-shell) .ta-daily-pages .ta-page-btn.active {
    color: #ffd978 !important;
    background: linear-gradient(
        180deg,
        rgba(232, 192, 101, .075) 0%,
        rgba(232, 192, 101, .025) 100%
    ) !important;
    border-color: rgba(232, 192, 101, .82) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 0 12px rgba(232, 192, 101, .035),
        0 4px 12px rgba(0, 0, 0, .24) !important;
}

body.ta-app-v2 .bt-pagination .disabled,
body.ta-app-v2 .ta-trades-pagination .disabled {
    opacity: .42 !important;
    pointer-events: none;
    cursor: not-allowed;
}
/* Backtests legacy .bt-btn compatibility */
body.ta-app-v2:not(.ta-investor-shell) .bt-btn.ta-btn.ta-btn--primary {
    color: #ffd978 !important;
    background: linear-gradient(
        180deg,
        rgba(232, 192, 101, .075) 0%,
        rgba(232, 192, 101, .025) 100%
    ) !important;
    border-color: rgba(232, 192, 101, .82) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 0 12px rgba(232, 192, 101, .035),
        0 4px 12px rgba(0, 0, 0, .24) !important;
}

body.ta-app-v2:not(.ta-investor-shell) .bt-btn.ta-btn.ta-btn--secondary {
    color: #f2cf75 !important;
    background: rgba(232, 192, 101, .035) !important;
    border-color: rgba(232, 192, 101, .28) !important;
    opacity: 1 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 3px 8px rgba(0, 0, 0, .18) !important;
}

/* Daily Report pagination follows the same outline hierarchy. */
body.ta-app-v2:not(.ta-investor-shell) .ta-daily-pages .ta-page-btn:not(.active):not(.disabled) {
    color: #f2cf75 !important;
    background: rgba(232, 192, 101, .035) !important;
    border-color: rgba(232, 192, 101, .28) !important;
    border-radius: 7px !important;
}

body.ta-app-v2 .ta-daily-pages .ta-page-btn.disabled {
    opacity: .42 !important;
    pointer-events: none;
}

/* Trader reference secondary: bright label, quiet outline, no disabled look. */
body.ta-app-v2:not(.ta-investor-shell) .ta-btn.ta-btn--secondary {
    color: #f2cf75 !important;
    background: rgba(232, 192, 101, .035) !important;
    border-color: rgba(232, 192, 101, .28) !important;
    opacity: 1 !important;
}

body.ta-app-v2:not(.ta-investor-shell) .ta-btn.ta-btn--secondary:hover {
    opacity: 1 !important;
}

/* Disabled state must win over every variant and compatibility override. */
body.ta-app-v2 .ta-btn[disabled],
body.ta-app-v2 .ta-btn.is-disabled {
    opacity: .42 !important;
    pointer-events: none;
    cursor: not-allowed;
    transform: none;
}