html { overscroll-behavior-x: none; } /* disable swipe to go to previous page browser navigation to improve sideways scrolling behavior */ 
body { overscroll-behavior-x: none; } /* disable swipe to go to previous page browser navigation to improve sideways scrolling behavior */

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

main .strategy { cursor: auto; }

main .strategy time,
main .strategy .name { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none;
    color: #FFF !important;
}

main .strategy[countrycode="US"]   .country { color: var(--ui-blue-xlight); }

main .strategy[countrycode="TEST"] .country { color: var(--ui-yellow); }
main .strategy[countrycode="TEST"] time     { color: var(--ui-yellow); }

/* NEW EVENTS */
main .strategy[newInUI="new"] { 
    max-height: 0;
    border: 0px solid transparent;
}

/* PAST EVENTS */
main .strategy[past="past"] time,
main .strategy[past="past"] .name {
    text-decoration: line-through;
    opacity: 0.5;
}

main .strategy[past="past"] input {
    pointer-events: none !important;
    opacity: 0.30 !important;
}

main .strategy[past="past"]:has(input:checked) time {
    color: var(--ui-green);
}

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

section#editor {
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    -webkit-column-rule: 2px solid var(--ui-2);
    -moz-column-rule: 2px solid var(--ui-2);
    column-rule: 2px solid var(--ui-2);
    padding: 0 !important;
}

section#editor > div { padding: 1rem; }
section#editor > div:not(:nth-child(1)) { padding: 0; }

section#editor input {
    margin-bottom: 0;
}

section#editor > div:first-child {
    grid-template-columns: 8rem 1fr 8rem;
}

section#editor h2 {
    text-align: center;
}

/* -----------------------------
-------------------------------- 
 
data points (formerly data-series) score chart 
 
--------------------------------
----------------------------- */


#data-points-score-chart {
    display: block !important;
}

#data-points-score-chart .labels small:not(:first-child) {
    padding-left: 0.75rem;
}

#data-points-score-chart div {
    display: grid !important;
    grid-template-columns: 3fr repeat(6, 8rem) !important;
    -webkit-column-gap: 0.5rem;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    padding: 0.25rem 1rem;
}

#data-points-score-chart div:nth-child(odd) {
    background-color: #121212;
}

#data-points-score-chart input[disabled] {
    background-color: transparent;
}

#data-points-score-chart .total-score {
    background-color: var(--ui-1) !important;
}

#data-points-score-chart [field="weight"],
#data-points-score-chart [field="forecast"]{
    color: var(--ui-yellow);
}


/* -----------------------------
-------------------------------- 
 
trigger ranges chart 
 
--------------------------------
----------------------------- */

#trigger-ranges-chart {
    display: block !important;
}

#trigger-ranges-chart div {
    display: grid;
    grid-template-columns: 4rem 4.5rem 4rem 1fr 6.5rem;
    -webkit-column-gap: 0.5rem;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    padding: 0.25rem 1rem;
}

#trigger-ranges-chart small {
    text-align: center;
}

.trigger-range input, 
.trigger-range select, 
.trigger-range button {
    height: 4rem !important;
    line-height: 3rem !important;
    text-align: center;
    padding: 0.25rem;
}

.trigger-range small {
    height: 4rem !important;
    line-height: 4rem !important;
}

.trigger-range select { 
    overflow-x: auto;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none;
    padding: 0.25rem 0.25rem;
    background-color: var(--ui-1);
    line-height: 3.5rem !important;
}

.trigger-range select option {
    height: 1.5rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    margin-right: 0.25rem;
}

#add-trigger-range-button {
    grid-column: span 3;
}


/* -----------------------------
-------------------------------- 
 
actions container 
 
--------------------------------
----------------------------- */

#actions::-webkit-scrollbar {
    display: none;
}

#actions {
    grid-template-columns: auto !important;
    grid-auto-flow: column !important;
    overflow-x: scroll;
    padding: 0 1rem 1rem 1rem !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
    row-gap: 1rem !important;
}

#actions .action {
    max-width: 35rem;
    padding: 1rem;
    background-color: var(--ui-1);
    box-sizing: content-box;
    border-radius: var(--block-radius);
}

#actions .action > div {
    display: grid;
    grid-template-columns: 7rem 6rem 6rem 8rem 6rem;
    -webkit-column-gap: 0.5rem;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#actions .action .double{
    grid-column: span 2;
}

#actions .action input[field="name"] {
    grid-column: span 2;
    pointer-events: none;
    background-color: transparent;
}

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

#actions input[colored][type="number"]:not([value^="-"])    { color: var(--ui-green); }
#actions input[colored][type="number"][value^="-"]          { color: var(--ui-red); }
/* #actions input[type="number"][value="0"]        { color: var(--ui-yellow); } */



/* FOR MARKET ORDERS, DISABLE UNNECESSARY FIELDS */
#actions .action div:has(option[value="MARKET"][selected]) ~ .action_cancel_entry_order_timer_ms input { 
    opacity: 0.3 !important;
    pointer-events: none !important;
}

#actions .action select:has(option[value="MARKET"][selected]) {
    color: var(--ui-yellow);
}

#actions .action div:has(option[value="MARKET"][selected]) ~ .action_order_price_percentage small:last-child::after,
#actions .action div:has(option[value="MARKET"][selected]) ~ .action_cancel_entry_order_timer_ms small:last-child::after {
    content: " (ignored — mrkt entry order)";
    color: var(--ui-yellow);
    opacity: 0.5 !important;
}

.actions-dropdown option[title^='B'] { color: var(--ui-green); }
.actions-dropdown option[title^='S'] { color: var(--ui-red);   }

.actions-dropdown option[title^='B'][selected]  { background-color: var(--ui-green) !important; color: #FFF !important; }
.actions-dropdown option[title^='S'][selected]  { background-color: var(--ui-red) !important;   color: #FFF !important; }

.actions-dropdown:focus option[title^='B']:checked {
  background: var(--ui-green) linear-gradient(0deg, var(--ui-green) 0%, var(--ui-green) 100%);
  color: #FFF !important;
}

.actions-dropdown:focus option[title^='S']:checked {
  background: var(--ui-red) linear-gradient(0deg, var(--ui-red) 0%, var(--ui-red) 100%);
  color: #FFF !important;
}