/* FluxEx design system. One token sheet; every FluxEx surface (public site,
   trader platform) consumes these variables. The .fx scope also restyles the
   Bootstrap components the existing views already use, so pages inherit the
   dark look without each view being rewritten first. */

:root {
    --fx-bg: #0b0e13;
    --fx-panel: #12161f;
    --fx-panel-2: #161b25;
    --fx-hover: #1a212d;
    --fx-border: #1f2531;
    --fx-border-2: #232a36;
    --fx-text: #e8eaf0;
    --fx-muted: #7d8597;
    --fx-dim: #565e6f;
    --fx-green: #2ebd85;
    --fx-green-bg: rgba(46, 189, 133, .12);
    --fx-red: #f6465d;
    --fx-red-bg: rgba(246, 70, 93, .12);
    --fx-accent: #f0b90b;
    --fx-accent-hover: #d9a70a;
    --fx-on-accent: #0b0e13;
    --fx-radius: 6px;
    --fx-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --fx-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

body.fx {
    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: var(--fx-font);
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.fx main { flex: 1; }

/* --- Navigation ---------------------------------------------------------- */

.fx-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--fx-border);
    background: var(--fx-bg);
}

.fx-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    margin-right: 20px;
    letter-spacing: .2px;
}

.fx-logo .fx-logo-mark {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: var(--fx-accent);
    color: var(--fx-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

.fx-logo em { color: var(--fx-accent); font-style: normal; }

.fx-navlink {
    color: var(--fx-muted);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
}

.fx-navlink:hover { color: var(--fx-text); }
.fx-navlink.active { color: var(--fx-text); border-bottom-color: var(--fx-accent); }

.fx-nav-spacer { flex: 1; }

.fx-userchip {
    color: var(--fx-muted);
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--fx-border-2);
    border-radius: var(--fx-radius);
}

/* --- Panels & cards ------------------------------------------------------ */

.fx-panel {
    background: var(--fx-panel);
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    padding: 16px;
}

.fx-panel-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}

/* --- Buttons ------------------------------------------------------------- */

.fx-btn {
    display: inline-block;
    border: 1px solid var(--fx-border-2);
    border-radius: var(--fx-radius);
    background: transparent;
    color: var(--fx-text);
    font-size: 14px;
    font-family: var(--fx-font);
    padding: 8px 18px;
    text-decoration: none;
    cursor: pointer;
}

.fx-btn:hover { background: var(--fx-hover); color: var(--fx-text); }

.fx-btn.primary {
    background: var(--fx-accent);
    border-color: var(--fx-accent);
    color: var(--fx-on-accent);
    font-weight: 600;
}

.fx-btn.primary:hover { background: var(--fx-accent-hover); color: var(--fx-on-accent); }

.fx-btn.buy { background: var(--fx-green); border-color: var(--fx-green); color: #0b0e13; font-weight: 600; }
.fx-btn.sell { background: var(--fx-red); border-color: var(--fx-red); color: #fff; font-weight: 600; }
.fx-btn.sm { padding: 4px 10px; font-size: 12px; }

/* --- Forms --------------------------------------------------------------- */

.fx .form-label { color: var(--fx-muted); font-size: 13px; }

.fx .form-control, .fx .form-select, .fx textarea.form-control {
    background: var(--fx-bg);
    border: 1px solid var(--fx-border-2);
    color: var(--fx-text);
    border-radius: var(--fx-radius);
    font-size: 14px;
}

.fx .form-control:focus, .fx .form-select:focus {
    background: var(--fx-bg);
    border-color: var(--fx-accent);
    color: var(--fx-text);
    box-shadow: 0 0 0 2px rgba(240, 185, 11, .15);
}

.fx .form-control::placeholder { color: var(--fx-dim); }
.fx .form-check-input { background-color: var(--fx-bg); border-color: var(--fx-border-2); }
.fx .form-check-input:checked { background-color: var(--fx-accent); border-color: var(--fx-accent); }
.fx .form-check-label { color: var(--fx-muted); }
.fx .form-text { color: var(--fx-dim); }

/* --- Bootstrap component restyle (existing views inherit the look) ------- */

.fx .card { background: var(--fx-panel); border: 1px solid var(--fx-border); border-radius: 8px; color: var(--fx-text); }
.fx .card-header { background: var(--fx-panel-2); border-bottom: 1px solid var(--fx-border); color: var(--fx-text); font-weight: 600; font-size: 14px; }
.fx .card-body { color: var(--fx-text); }

.fx .table { color: var(--fx-text); border-color: var(--fx-border); font-size: 13px; }
.fx .table th { color: var(--fx-dim); font-weight: 400; border-color: var(--fx-border); }
.fx .table td { border-color: var(--fx-border); }
.fx .table > tbody > tr:hover > td { background: var(--fx-hover); }

.fx .btn-primary, .fx .btn-outline-primary {
    background: var(--fx-accent); border-color: var(--fx-accent); color: var(--fx-on-accent); font-weight: 600;
}
.fx .btn-primary:hover, .fx .btn-outline-primary:hover { background: var(--fx-accent-hover); border-color: var(--fx-accent-hover); color: var(--fx-on-accent); }
.fx .btn-outline-success { background: transparent; border-color: var(--fx-green); color: var(--fx-green); }
.fx .btn-outline-success:hover { background: var(--fx-green); color: #0b0e13; }
.fx .btn-outline-danger { background: transparent; border-color: var(--fx-red); color: var(--fx-red); }
.fx .btn-outline-danger:hover { background: var(--fx-red); color: #fff; }

.fx .alert-danger { background: var(--fx-red-bg); border: 1px solid var(--fx-red); color: #ff8fa0; }
.fx .alert-success { background: var(--fx-green-bg); border: 1px solid var(--fx-green); color: #6fe0b8; }

.fx .text-muted, .fx .text-secondary { color: var(--fx-muted) !important; }
.fx .text-danger { color: var(--fx-red) !important; }
.fx a { color: var(--fx-accent); }
.fx a:hover { color: var(--fx-accent-hover); }
.fx code { color: var(--fx-text); background: var(--fx-panel-2); padding: 2px 6px; border-radius: 4px; font-family: var(--fx-mono); font-size: 12px; }
.fx hr { border-color: var(--fx-border); }

/* --- Semantic text ------------------------------------------------------- */

.fx-green { color: var(--fx-green); }
.fx-red { color: var(--fx-red); }
.fx-muted { color: var(--fx-muted); }
.fx-dim { color: var(--fx-dim); }
.fx-accent { color: var(--fx-accent); }
.fx-mono { font-family: var(--fx-mono); }

.fx-badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--fx-panel-2);
    color: var(--fx-muted);
}

.fx-badge.green { background: var(--fx-green-bg); color: var(--fx-green); }
.fx-badge.red { background: var(--fx-red-bg); color: var(--fx-red); }
.fx-badge.amber { background: rgba(240, 185, 11, .12); color: var(--fx-accent); }

/* --- Landing page -------------------------------------------------------- */

.fx-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; padding: 56px 0 40px; }
.fx-hero h1 { font-size: 38px; font-weight: 600; line-height: 1.2; margin: 0 0 14px; }
.fx-hero p { color: var(--fx-muted); font-size: 16px; line-height: 1.6; margin: 0 0 22px; }

.fx-tickerlist { background: var(--fx-panel); border: 1px solid var(--fx-border); border-radius: 8px; padding: 6px 14px; }
.fx-tickerrow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--fx-border); font-size: 14px; }
.fx-tickerrow:last-child { border-bottom: none; }
.fx-tickerrow .pair { font-weight: 600; }

.fx-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 8px 0 48px; }
.fx-feature { background: var(--fx-panel); border: 1px solid var(--fx-border); border-radius: 8px; padding: 20px; }
.fx-feature h3 { font-size: 15px; font-weight: 600; margin: 10px 0 6px; }
.fx-feature p { color: var(--fx-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.fx-feature .ico { color: var(--fx-accent); font-size: 22px; }

.fx-footer {
    border-top: 1px solid var(--fx-border);
    padding: 14px 24px;
    display: flex;
    gap: 18px;
    color: var(--fx-dim);
    font-size: 12px;
}

.fx-footer a { color: var(--fx-dim); text-decoration: none; }
.fx-footer a:hover { color: var(--fx-muted); }

/* --- Auth ---------------------------------------------------------------- */

.fx-auth { display: flex; justify-content: center; padding: 48px 16px; }
.fx-auth-card { width: 100%; max-width: 420px; background: var(--fx-panel); border: 1px solid var(--fx-border); border-radius: 10px; padding: 28px; }
.fx-auth-card h1 { font-size: 20px; font-weight: 600; margin: 0 0 18px; }

/* --- Dashboard ----------------------------------------------------------- */

.fx-statrow { display: flex; align-items: center; gap: 32px; padding: 20px 0; }
.fx-stat .lbl { color: var(--fx-muted); font-size: 13px; margin-bottom: 2px; }
.fx-stat .val { font-size: 22px; font-weight: 600; }
.fx-stat .sub { color: var(--fx-dim); font-size: 12px; }

.fx-activity { list-style: none; margin: 0; padding: 0; }
.fx-activity li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--fx-border); font-size: 13px; }
.fx-activity li:last-child { border-bottom: none; }
.fx-activity .when { margin-left: auto; color: var(--fx-dim); font-size: 12px; white-space: nowrap; }

/* --- CRM sidebar shell ---------------------------------------------------- */

.fx-side {
    width: 230px;
    flex-shrink: 0;
    background: var(--fx-panel);
    border-right: 1px solid var(--fx-border);
    display: flex;
    flex-direction: column;
}

.fx-side-group {
    color: var(--fx-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 16px 16px 6px;
}

.fx-sidelink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--fx-muted);
    text-decoration: none;
    font-size: 13.5px;
    padding: 8px 16px;
    border-left: 2px solid transparent;
}

.fx-sidelink:hover { color: var(--fx-text); background: var(--fx-hover); }
.fx-sidelink.active { color: var(--fx-text); background: var(--fx-hover); border-left-color: var(--fx-accent); }

/* Hidden above the mobile breakpoint -- the bottom bar is a phone pattern. */
.fx-bottomnav { display: none; }

/* --- Assets overview ------------------------------------------------------ */

.fx-assets-head { padding: 14px 0 12px; }

.fx-quickactions { display: flex; gap: 22px; padding: 4px 0 16px; }
.fx-quickactions a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--fx-muted);
    text-decoration: none;
    font-size: 12px;
}
.fx-quickactions a:hover { color: var(--fx-text); }
.fx-quickactions .circ {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--fx-panel-2);
    border: 1px solid var(--fx-border-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--fx-text);
}
.fx-quickactions a:hover .circ { border-color: var(--fx-accent); color: var(--fx-accent); }

.fx-actrow { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--fx-border); font-size: 13px; }
.fx-actrow:last-child { border-bottom: none; }

.fx-assetrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--fx-border);
}
.fx-assetrow:last-child { border-bottom: none; }

.fx-coinicon {
    width: 34px; height: 34px;
    border-radius: 50%;
    color: #0b0e13;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- CRM landing cards ---------------------------------------------------- */

.fx-crm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.fx-crm-card {
    background: var(--fx-panel);
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    padding: 18px;
    text-decoration: none;
    color: var(--fx-text);
}
.fx-crm-card:hover { border-color: var(--fx-accent); color: var(--fx-text); }
.fx-crm-card .n { font-size: 30px; font-weight: 600; color: var(--fx-muted); }
.fx-crm-card .n.hot { color: var(--fx-accent); }
.fx-crm-card .l { font-size: 13px; color: var(--fx-muted); margin-top: 4px; }

/* --- Trading terminal ---------------------------------------------------- */

.fx-terminal { font-size: 12px; }

.fx-term-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 10px 14px;
    background: var(--fx-panel);
    border: 1px solid var(--fx-border);
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}

.fx-term-head .price { font-size: 19px; font-weight: 600; }
.fx-term-head .stat .lbl { color: var(--fx-dim); font-size: 11px; }
.fx-term-head .stat .v { font-size: 12px; }

.fx-term-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px 260px;
    gap: 1px;
    background: var(--fx-border);
    border: 1px solid var(--fx-border);
    border-top: none;
}

.fx-term-cell { background: var(--fx-panel); padding: 10px; min-width: 0; }

.fx-seg { display: flex; border: 1px solid var(--fx-border-2); border-radius: var(--fx-radius); overflow: hidden; }
.fx-seg button {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--fx-muted);
    font-size: 12px;
    font-family: var(--fx-font);
    padding: 7px 4px;
    cursor: pointer;
}
.fx-seg button.on-buy { background: var(--fx-green); color: #0b0e13; font-weight: 600; }
.fx-seg button.on-sell { background: var(--fx-red); color: #fff; font-weight: 600; }

.fx-typetabs { display: flex; gap: 12px; font-size: 12px; margin: 10px 0 8px; }
.fx-typetabs button { background: none; border: none; padding: 0; color: var(--fx-dim); font-size: 12px; cursor: pointer; font-family: var(--fx-font); }
.fx-typetabs button.active { color: var(--fx-accent); }

.fx-pct { display: flex; gap: 6px; margin: 6px 0 8px; }
.fx-pct button {
    flex: 1;
    background: var(--fx-bg);
    border: 1px solid var(--fx-border-2);
    border-radius: 4px;
    color: var(--fx-muted);
    font-size: 11px;
    padding: 3px 0;
    cursor: pointer;
    font-family: var(--fx-font);
}
.fx-pct button:hover { color: var(--fx-text); border-color: var(--fx-accent); }

.fx-book { font-size: 11.5px; }
.fx-book .hdr { display: flex; justify-content: space-between; color: var(--fx-dim); padding: 2px 4px; }
.fx-bookrow { display: flex; justify-content: space-between; position: relative; padding: 1.5px 4px; cursor: pointer; }
.fx-bookrow:hover { background: var(--fx-hover); }
.fx-bookrow .depth { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; }
.fx-bookrow span { z-index: 1; font-family: var(--fx-mono); font-size: 11px; }
.fx-book .mid { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; font-weight: 600; border-top: 1px solid var(--fx-border); border-bottom: 1px solid var(--fx-border); margin: 3px 0; }

.fx-tape { font-size: 11px; }
.fx-tape .fx-bookrow { cursor: default; }

.fx-chartwrap { position: relative; min-height: 320px; }
#fx-chart { width: 100%; height: 340px; }
.fx-intervals { display: flex; gap: 10px; font-size: 11px; margin-bottom: 6px; }
.fx-intervals button { background: none; border: none; padding: 0; color: var(--fx-dim); font-size: 11px; cursor: pointer; font-family: var(--fx-font); }
.fx-intervals button.active { color: var(--fx-accent); }

.fx-bottabs { display: flex; gap: 16px; padding: 8px 12px 0; }
.fx-bottabs button { background: none; border: none; color: var(--fx-dim); font-size: 12.5px; padding: 0 0 6px; cursor: pointer; font-family: var(--fx-font); border-bottom: 2px solid transparent; }
.fx-bottabs button.active { color: var(--fx-text); border-bottom-color: var(--fx-accent); }

.fx-inputrow { position: relative; margin-bottom: 8px; }
.fx-inputrow .unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--fx-dim); font-size: 11px; pointer-events: none; }

@media (max-width: 1100px) {
    .fx-term-grid { grid-template-columns: 1fr 1fr; }
    .fx-term-grid > .cell-chart { grid-column: 1 / -1; }
}

/* --- Layout helpers ------------------------------------------------------ */

.fx-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
.fx-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

@media (max-width: 900px) {
    .fx-hero, .fx-grid-2 { grid-template-columns: 1fr; }
    .fx-features { grid-template-columns: 1fr; }
    .fx-statrow { flex-wrap: wrap; gap: 16px; }
}

/* --- Mobile (phones) ------------------------------------------------------ */

@media (max-width: 768px) {
    /* Platform navigation moves to the fixed bottom tab bar (the standard
       trading-app pattern, per the owner's reference); the top bar keeps
       only the logo and the logout button. */
    .fx-nav { padding: 8px 12px; gap: 2px; }
    .fx-nav .fx-nav-links { display: none; }
    .fx-logo { margin-right: 8px; font-size: 15px; }
    .fx-userchip { display: none; } /* the email chip is the first thing to go on a phone */

    .fx-container { padding: 0 12px; }

    /* Landing */
    .fx-hero { padding: 28px 0 20px; gap: 20px; }
    .fx-hero h1 { font-size: 26px; }
    .fx-hero p { font-size: 14px; }

    /* Dashboard */
    .fx-statrow { gap: 14px; padding: 12px 0; }
    .fx-stat .val { font-size: 18px; }

    /* Auth */
    .fx-auth { padding: 20px 12px; }
    .fx-auth-card { padding: 20px 16px; }

    /* Every data table becomes its own horizontal scroller instead of
       blowing out the page width. */
    .fx .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

    /* Trading terminal: one column -- chart, then book + tape, then the
       order panel, then the tabs. */
    .fx-term-grid { grid-template-columns: 1fr; }
    .fx-term-grid > .cell-chart { grid-column: auto; }
    #fx-chart { height: 240px; }
    .fx-term-head { padding: 8px 10px; gap: 12px; }
    .fx-term-head .price { font-size: 16px; }
    .fx-bottabs { overflow-x: auto; scrollbar-width: none; }
    .fx-bottabs button { white-space: nowrap; }

    /* Bottom tab bar (visible on phones only) */
    .fx-bottomnav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 100;
        background: var(--fx-panel-2);
        border-top: 1px solid var(--fx-border-2);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .fx-bottomnav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 0 7px;
        color: var(--fx-dim);
        text-decoration: none;
        font-size: 11px;
    }
    .fx-bottomnav a.active { color: var(--fx-accent); }
    .fx-bottomnav svg { display: block; }

    /* Content must never hide behind the fixed bar. */
    body.fx-has-bottomnav main { padding-bottom: 88px !important; }

    /* CRM: the sidebar becomes a horizontally scrollable strip under the
       logo -- the content gets the full width back. */
    .fx-crm-wrap { flex-direction: column; }
    .fx-side {
        width: 100%;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-right: none;
        border-bottom: 1px solid var(--fx-border);
    }
    .fx-side::-webkit-scrollbar { display: none; }
    .fx-side .fx-logo { padding: 10px 12px !important; flex-shrink: 0; }
    .fx-side-group { display: none; }
    .fx-sidelink {
        white-space: nowrap;
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 12px 10px;
        flex-shrink: 0;
    }
    .fx-sidelink.active { border-bottom-color: var(--fx-accent); background: transparent; }
    .fx-side-spacer { display: none; }
    .fx-side-footer { border-top: none !important; padding: 8px 12px !important; flex-shrink: 0; }
    .fx-side-footer .fx-dim { display: none; }
    .fx-crm-main { padding: 14px 12px 32px !important; }
}