/* -----------------------------
-------------------------------- 
 
BODY 
 
--------------------------------
----------------------------- */

body {
    grid-template-columns: 40rem 1fr;
    grid-template-rows: 1fr;
}

main {
    background-color: #000;
}

.strategy {
    grid-template-columns: 1fr 4rem 3rem 10rem var(--toggle-w) !important;
}

.strategy .name {
    display: flex;
}

.strategy .name span:first-child {
    min-width: 9.5rem;
    max-width: 9.5rem;
}

.strategy .name span:first-child,
.strategy .name span:last-child {
    flex-grow: 1;
}

.strategy .name span:last-child  {
    text-align: right;
}

.strategy .type {
    text-align: center;
    color: var(--ui-3);
}

.strategy .meta {
    text-align: right;
}

#button-new-strategy {
    /* to align with the toggle switches */
    margin-left: 0.5rem; 
}

.strategy-trigger-separator { 
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    border-top: 1px solid var(--ui-3);
    border-bottom: 1px solid var(--ui-3);
    margin: 0.5rem 0;
}

.strategy-trigger-separator input { display: none; }

.strategy-trigger-separator label {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    padding: 0 0 0 0.5rem;
}

.strategy-trigger-separator label span {
    width: 2.5rem;
    font-size: 0.9rem;
    text-align: center;
    float: right;
    color: var(--ui-3);
}

.strategy-trigger-separator:hover {
    background-color: var(--ui-1);
}

.strategy-trigger-separator label b::before { content: '\25BC'; }
.strategy-trigger-separator:has(*:checked) label b::before { content: '\25B6'; }

.strategy-trigger-separator:has(*:checked) label span { 
    color: #FFF; 
    width: auto;
}

.strategy-trigger-separator:has(*:checked) label span::after {
    content: " undisplayed strategies";
}

.strategy-trigger-separator[trigger='mat']:has(*:checked) ~ .strategy[trigger='mat'] { display: none !important; }
.strategy-trigger-separator[trigger='vat']:has(*:checked) ~ .strategy[trigger='vat'] { display: none !important; }

/* -----------------------------
-------------------------------- 
 
EDITOR 
 
--------------------------------
----------------------------- */



section#editor .two       { grid-column: span 2; }
section#editor .three     { grid-column: span 3; }
section#editor .four      { grid-column: span 4; }
section#editor .five      { grid-column: 1/-1; }
section#editor .nomargin  { margin: 0; }

section#hud-panels {
    grid-template-columns: 42rem 1fr;
}

section#editor {
    background-color: #121212 !important;
    background-image: radial-gradient(circle at 1px 1px, var(--ui-2) 1px, transparent 0);
    background-size: 1rem 1rem;
    -webkit-columns: 1 !important;
    -moz-columns: 1 !important;
    columns: 1 !important;
    padding-top: 5rem;
    position: relative;
}

section#editor > div {
    background-color: var(--ui-1);
    border-radius: 1rem;
    padding: 1rem;
}

/* strategy general data box */
section#editor>div {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: 1rem;
}

/* strategy general info / save buttons */
section#editor > div#basics {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

div#basics h2 {
    text-align: left;
}

section#editor>div>b {
    height: 2rem;
}

section#editor>div.action {
    max-width: 35rem;
    display: inline-grid;
    grid-template-columns: 7rem 6rem 6rem 8rem 6rem;
    box-sizing: content-box;
}

section#editor>div.action:not(:last-child) { margin-right: 1rem; }

section#editor hr + h3 { margin-bottom: 0; }
section#editor #editor-floating-strategy-name {
    margin-bottom: 0;  
    text-align: center; 
    font-family: "JetBrains Mono";
}

section#editor>div.action:has(select[field='order-side'] > option[value='SELL'][selected="true"]) {
    border: 1px solid var(--ui-red);
}

section#editor>div.action:has(select[field='order-side'] > option[value='BUY'][selected="true"]) {
    border: 1px solid var(--ui-green);
}

/* warn in mat */
section#editor:has(option[value="mat"]:checked) > div.action input[field='order-symbol']:-moz-placeholder-shown {
    border: 1px solid var(--ui-yellow);
}
section#editor:has(option[value="mat"]:checked) > div.action input[field='order-symbol']:placeholder-shown {
    border: 1px solid var(--ui-yellow);
}

section#editor input[field='order-symbol'] + small,
section#editor select[field='order-side'] + small {
    line-height: 1rem !important;
    display: inline-block;
    text-align: right;
    overflow: hidden;
    width: 100%;
    height: 2rem;
    white-space: pre;
}

section#editor:has(option[value="mat"]:checked) > div.action input[field='order-symbol']:-moz-placeholder-shown + small::before {
    color: var(--ui-yellow);
    content: "mat trigger selected! if left\a blank will use trigger symbol";
}

section#editor:has(option[value="mat"]:checked) > div.action input[field='order-symbol']:placeholder-shown + small::before {
    color: var(--ui-yellow);
    content: "mat trigger selected! if left\a blank will use trigger symbol";
}

/* warn in VAT */
section#editor:has(option[value="vat"]:checked) > div.action input[field='order-symbol']:-moz-placeholder-shown {
    background-color: #292929;
    border: 1px solid var(--ui-purple-light);
}
section#editor:has(option[value="vat"]:checked) > div.action input[field='order-symbol']:placeholder-shown {
    background-color: #292929;
    border: 1px solid var(--ui-purple-light);
}

section#editor:has(option[value="vat"]:checked) > div.action input[field='order-symbol']:-moz-placeholder-shown + small::before {
    color: var(--ui-purple-light);
    content: "vat trigger selected!\a leave blank to use trig symbol!";
}

section#editor:has(option[value="vat"]:checked) > div.action input[field='order-symbol']:placeholder-shown + small::before {
    color: var(--ui-purple-light);
    content: "vat trigger selected!\a leave blank to use trig symbol!";
}

/* no hft in VAT */
section#editor:has(option[value="vat"]:checked) > div.action small.hft,
section#editor:has(option[value="vat"]:checked) > div.action input.hft { display: none; }
section#editor:has(option[value="vat"]:checked) > div.action .hft-heading { color: var(--ui-yellow);}
section#editor:has(option[value="vat"]:checked) > div.action .hft-heading::after { content: " (DSBLD FOR VAT, PRFT TWAP STARTS 1S IN FUTURE)"; }

/* by default hide lookback ms and only show if it's a mat trigger strategy */
input[field='order-lookback-milliseconds'], .label-order-lookback-milliseconds { display: none; }
section#editor:has(option[value="mat"]:checked) > div.action input[field='order-lookback-milliseconds'],
section#editor:has(option[value="mat"]:checked) > div.action .label-order-lookback-milliseconds {
    display: block;
}

section#editor:has(option[value="vat"]:checked) > div.action select[field='order-side'] {
    border: 1px solid var(--ui-yellow);
}

section#editor:has(option[value="vat"]:checked) > div.action select[field='order-side'] + small::before {
    color: var(--ui-yellow);
    content: "VAT TRIG SELECTED! WILL ABORT\a ACTION DEPENDING ON TRIG DRCTION";
}

/* check symbol case */
section#editor > div.action input[field='order-symbol'].check-case + small::before {
    color: var(--ui-yellow);
    content: "check symbol case. symbols\a are usually all uppercase";
}

/* toggle mat / vat */

section#editor:not(:has(option[value="mat"]:checked)) #trigger-mat { display: none !important; }
section#editor:not(:has(option[value="vat"]:checked)) #trigger-vat { display: none !important; }

section#editor #editor-floating-save-bar {
    grid-template-columns: 6rem 1fr 3rem 6rem 6rem 6rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.35);
    background-color: #000 !important;
    border-radius: 0;
    position: fixed;
    left: 40rem;
    right: 0;
    top: 0;
    z-index: 99999;
}

input[field="name"] {
    font-family: "JetBrains Mono";
}

input[type="time"] { background-color: #282828; }
input[type="time"]:focus { background-color: var(--ui-2); }

/* IOC = hide gtc expiry field */
select[field="order-tif"]:has(option[value="ioc"]:checked) ~ .order-gtc-expiry {
    display: none;
}

/* MANUAL = hide all exit fields */
select[field="exit-type"]:has(option[value="manual"]:checked) ~ small,
select[field="exit-type"]:has(option[value="manual"]:checked) ~ input,
select[field="exit-type"]:has(option[value="manual"]:checked) ~ select,
select[field="exit-type"]:has(option[value="manual"]:checked) ~ b {
    display: none;
}

/* AUTO STOP LOSS = only show out of the money*/
select[field="exit-type"]:has(option[value="auto-stop-loss"]:checked)~input[field="exit-milliseconds"],
select[field="exit-type"]:has(option[value="auto-stop-loss"]:checked)~input[field="exit-milliseconds"]+small,
select[field="exit-type"]:has(option[value="auto-stop-loss"]:checked)~input[field="exit-percentage"],
select[field="exit-type"]:has(option[value="auto-stop-loss"]:checked)~input[field="exit-percentage"]+small {
    display: none;
}

.action select:has(option[value="BUY"][selected])  { color: var(--ui-green); }
.action select:has(option[value="SELL"][selected]) { color: var(--ui-red);  }

input[colored][type="number"]:not([value^="-"])    { color: var(--ui-green); }
input[colored][type="number"][value^="-"]          { color: var(--ui-red); }

*[colored]:not([value^="-"])    { color: var(--ui-green); }
*[colored][value^="-"]          { color: var(--ui-red); }

/* ORDER SIZE METHOD = NOTIONAL = HIDE ALL OTHER RELEVANT INPUTS */
select[field="order-size-method"]:has(option[value="NOTIONAL"]:checked) ~ .order-size-pbp,
select[field="order-size-method"]:has(option[value="NOTIONAL"]:checked) ~ .order-size-shares {
    display: none !important;
}

/* ORDER SIZE METHOD = % BUYING POWER = HIDE ALL OTHER RELEVANT INPUTS */
select[field="order-size-method"]:has(option[value="PBP"]:checked)~.order-size-notional,
select[field="order-size-method"]:has(option[value="PBP"]:checked)~.order-size-shares {
    display: none !important;
}

/* ORDER SIZE METHOD = NO SHARES = HIDE ALL OTHER RELEVANT INPUTS */
select[field="order-size-method"]:has(option[value="SHARES"]:checked)~.order-size-notional,
select[field="order-size-method"]:has(option[value="SHARES"]:checked)~.order-size-pbp {
    display: none !important;
}

select[field="order-size-method"]:has(option[value="NOTIONAL"]:checked) ~ .algo-card input[field$='size'] {
    border: 1px solid var(--ui-yellow);
}

select[field="order-size-method"]:has(option[value="NOTIONAL"]:checked) ~ .algo-card .min-order-size::after,
select[field="order-size-method"]:has(option[value="NOTIONAL"]:checked) ~ .algo-card .max-order-size::after {
    content: " ($k) NOTIONAL";
    color: var(--ui-yellow);
}

/* MONITOR TYPE = ref price exit = HIDE ALL OTHER RELEVANT INPUTS */
select[field="exit-monitor-type"]:has(option[value="REF-PRC-EXIT"]:checked) ~ .exit-monitor-type-upnl-exit { display: none !important; }

/* MONITOR TYPE = pnl exit = HIDE ALL OTHER RELEVANT INPUTS */
select[field="exit-monitor-type"]:has(option[value="UPNL-EXIT"]:checked) ~ .exit-monitor-type-ref-prc-exit { display: none !important; }



/* -----------------------------
-------------------------------- 
 
ALGO CARDS 
 
--------------------------------
----------------------------- */

.algo-card {
    grid-column: 1/-1 !important;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #181818;
    
    /* this is to make sure the card's contents appear normal with its border etc */
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
    border: 1px solid var(--ui-3);
}

.algo-card h3 { 
    font-size: 0.75rem;
    margin-bottom: 0;
}

.algo-card input {
    margin-bottom: 0;
}