/*
 * FreqUI theme - "trading terminal": deep blue-graphite surfaces, teal accent,
 * clear profit / loss colors, tabular numbers.
 *
 * Injected after FreqUI's own stylesheet by docker/frequi-theme/apply.sh (run after
 * `freqtrade install-ui`). FreqUI (Nuxt UI + Tailwind v4) keeps its tokens in CSS
 * layers, so these unlayered declarations win without !important.
 */

/* ---------- Tokens ---------- */
:root {
    --ft-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ft-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Neutral: cool graphite with a blue cast */
    --ui-color-neutral-50: #f4f6fa;
    --ui-color-neutral-100: #e9edf3;
    --ui-color-neutral-200: #d5dbe5;
    --ui-color-neutral-300: #b5bfcd;
    --ui-color-neutral-400: #8893a7;
    --ui-color-neutral-500: #626d82;
    --ui-color-neutral-600: #465063;
    --ui-color-neutral-700: #2c3544;
    --ui-color-neutral-800: #1b222d;
    --ui-color-neutral-900: #11161e;
    --ui-color-neutral-950: #0a0d13;

    /* Primary: teal */
    --ui-color-primary-50: #e7fbf9;
    --ui-color-primary-100: #c4f5f0;
    --ui-color-primary-200: #8febe3;
    --ui-color-primary-300: #52dbd1;
    --ui-color-primary-400: #26c6bc;
    --ui-color-primary-500: #12a89f;
    --ui-color-primary-600: #0c8881;
    --ui-color-primary-700: #0d6d68;
    --ui-color-primary-800: #0f5754;
    --ui-color-primary-900: #104846;
    --ui-color-primary-950: #032a29;

    --color-profit: #12b981;
    --color-loss: #e5484d;
    --ft-profit-tint: rgb(18 185 129 / 0.1);
    --ft-loss-tint: rgb(229 72 77 / 0.1);

    /* Light surfaces */
    --ui-bg: #ffffff;
    --ft-page: #eef1f6;
    --ft-panel: #ffffff;
    --ft-panel-head: #f6f8fb;
    --ft-line: #dde2ea;
    --ft-row-hover: #f2f5f9;
    --ft-header: rgb(255 255 255 / 0.86);
    --ui-radius: 0.375rem;
}

.dark {
    --ui-bg: #0d1118;
    --ui-bg-muted: #141a23;
    --ui-bg-elevated: #19202a;
    --ui-bg-accented: #232b37;
    --ui-border: #222a36;
    --ui-border-muted: #2a3341;
    --ui-border-accented: #354050;
    --ui-text: #d3d9e3;
    --ui-text-muted: #8893a7;
    --ui-text-dimmed: #626d82;

    --color-profit: #1fcf8f;
    --color-loss: #f2555a;
    --ft-profit-tint: rgb(31 207 143 / 0.1);
    --ft-loss-tint: rgb(242 85 90 / 0.11);

    --ft-page: #090c11;
    --ft-panel: #10151d;
    --ft-panel-head: #141a23;
    --ft-line: #212935;
    --ft-row-hover: #161d27;
    --ft-header: rgb(13 17 24 / 0.88);
}

/* ---------- Base ---------- */
html,
body {
    background: var(--ft-page);
}

#app#app,
body {
    font-family: var(--ft-font);
    font-feature-settings: "tnum" 1;
}

::selection {
    background: color-mix(in srgb, var(--ui-color-primary-400) 35%, transparent);
}

:focus-visible {
    outline-color: var(--ui-color-primary-400);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-color-neutral-400) transparent;
}

.dark * {
    scrollbar-color: var(--ui-color-neutral-700) transparent;
}

a {
    text-underline-offset: 0.2em;
}

/* ---------- Top bar ---------- */
header {
    background: var(--ft-header);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--ft-line);
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--ui-color-primary-400) 22%, transparent);
}

header nav a {
    letter-spacing: 0.01em;
}

/* ---------- Panels (dashboard / trade grid) ---------- */
.vue-grid-layout {
    background: transparent;
}

.vue-grid-item > div {
    background: var(--ft-panel);
    border-color: var(--ft-line) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.drag-header {
    background: var(--ft-panel-head) !important;
    border-color: var(--ft-line) !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.drag-header > div {
    justify-content: flex-start;
}

/* ---------- Tables ---------- */
table {
    font-variant-numeric: tabular-nums;
}

thead th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

tbody tr {
    transition: background-color 150ms ease-out;
}

tbody tr:hover {
    background-color: var(--ft-row-hover);
}

/* ---------- Profit / loss pills ---------- */
/* FreqUI sets .profit-pill on losses and .profit-pill-profit on gains */
.profit-pill,
.profit-pill-profit {
    border-width: 1px;
    border-radius: 6px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.profit-pill {
    background: var(--ft-loss-tint);
    color: var(--color-loss);
}

.profit-pill-profit {
    background: var(--ft-profit-tint);
    color: var(--color-profit);
}

/* ---------- Pair list ---------- */
li.cursor-pointer {
    transition: background-color 150ms ease-out;
}

/* ---------- Logs ---------- */
pre,
code,
kbd {
    font-family: var(--ft-mono);
}