/* Project-specific styles beyond Tailwind utilities.
   Linked after tailwind.css in base.html and not processed by the Tailwind build, so the
   colour values here are literal — keep them in step with the `ink` / `brass` scales in
   tailwind.config.js. */

/* Tells the browser to render native chrome — form controls, scrollbars, the canvas behind
   the page — in its dark variant. Without this, <select> menus, date pickers and checkboxes
   keep their light styling and sit on the page as bright rectangles. */
:root {
    color-scheme: dark;
    --ink-950: #100E0A;
    --ink-900: #17150F;
    --ink-850: #1E1B15;
    --ink-800: #26221A;
    --ink-700: #393327;
    --ink-600: #514A3C;
    --ink-400: #918872;
    --ink-200: #D5CEBE;
    --ink-50:  #F7F4ED;
    --brass-400: #E0B04A;
    --brass-500: #C8952A;
}

.trade-card {
    transition: transform 0.2s ease-in-out;
}

.trade-card:hover {
    transform: translateY(-2px);
}

/* P/L. The 500-weight shades, not the 600s the light theme used: on a near-black ground
   emerald-600 falls to 3.4:1 while emerald-500 clears 7:1. These must track the
   `text-emerald-400` / `text-red-400` utilities used in the templates. */
.profit {
    color: #34D399;
}

.loss {
    color: #F87171;
}

/* Native form controls. `color-scheme` above gets the widget chrome right; these give the
   fields the same surface and border as the rest of the UI. Border is ink-600 rather than
   the ink-700 used for decorative dividers, so an input's edge clears the 3:1 that WCAG
   asks of a control boundary. */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background-color: var(--ink-900);
    border-color: var(--ink-600);
    color: var(--ink-50);
}

input::placeholder,
textarea::placeholder {
    color: var(--ink-400);
}

/* The focus ring is the brass accent rather than the browser default blue. */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--brass-400);
    outline-color: var(--brass-400);
}

/* Firefox paints scrollbars from these two; WebKit uses color-scheme above. */
* {
    scrollbar-color: var(--ink-600) var(--ink-950);
}

/* Chart styles */
#candlestick-container {
    position: relative;
}

#candlestick-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#chart-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ink-850);
}