/* LIVE page of CCPI (live/live.R, www/js/live.js): the boards of the REALTIME app, limited to #lv-root so that they never
   change the other pages. Price board colours of the Vietnamese boards: purple ceiling, cyan floor, yellow reference,
   green up, red down. */
#lv-root {
  --navy: #0B1A3A; --royal: #0A4DB8; --sky: #2E9BFF; --gold: #D4A440; --gold2: #F0D890;
  --ink: #13203A; --muted: #5B6B84; --line: #E1E7F0; --cardbg: #fff; --head: #EEF2F8; --row: #F8FAFD;
  --up: #0A9F4B; --dn: #E0262F; --rf: #B88A00; --ce: #B620C9; --fl: #0098B3;
  --flash-up: rgba(10,159,75,.28); --flash-dn: rgba(224,38,47,.25); --flash: rgba(46,155,255,.28);
  color: var(--ink); font-size: 14px;
}
html:not([data-mode="light"]) #lv-root {
  --ink: #DCE4F2; --muted: #9DB0CC; --line: #1A2A4C; --cardbg: #0A1633; --head: #0E1C3D; --row: #0D1D42;
  --up: #1FD86A; --dn: #FF4D57; --rf: #F4CB2E; --ce: #F45CFF; --fl: #39DCEB;
  --flash-up: rgba(31,216,106,.32); --flash-dn: rgba(255,77,87,.32); --flash: rgba(46,155,255,.35);
}

/* tabs (in the page head, as the Markets chips) with the filter box and the CSV button */
.mk-quick a.lv-tab.portfolio { --c: #D4A440; --c2: #F0D890; }
.lv-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.lv-tools input { width: 230px; padding: 8px 12px; border-radius: 10px; border: 1px solid #22355C; background: rgba(4,9,20,.5); color: #DCE4F2;
  font-family: inherit; font-size: 13px; }
.lv-tools .lv-csv { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(212,164,64,.5);
  color: #F0D890 !important; text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
.lv-tools .lv-csv:hover { background: rgba(212,164,64,.12); }
html[data-mode="light"] .lv-tools input { background: #fff; border-color: #C9D4E6; color: #13203A; }
html[data-mode="light"] .lv-tools .lv-csv { color: #8A6418 !important; }

/* status of a tab: date of the prices, session, last update and the countdown bar */
#lv-root .lv-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: relative; padding-bottom: 8px; margin: 0 0 16px; }
#lv-root .mk-upd { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 10px; background: rgba(46,155,255,.12);
  border: 1px solid rgba(46,155,255,.35); color: #9CCBFF; font-size: 11.5px; letter-spacing: .14em; }
#lv-root .mk-upd b { color: #fff; letter-spacing: .04em; font-size: 14px; }
#lv-root .mk-upd b.c-up { color: var(--up); }
#lv-root .mk-upd .nx { color: var(--muted); letter-spacing: .04em; } #lv-root .mk-upd em { font-style: normal; color: var(--gold2); }
html[data-mode="light"] #lv-root .mk-upd { background: #EAF3FF; color: var(--royal); border-color: #B9D6FA; }
html[data-mode="light"] #lv-root .mk-upd b { color: var(--navy); } html[data-mode="light"] #lv-root .mk-upd em { color: var(--royal); }
#lv-root .lv-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
#lv-root .lv-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2)); transition: width 1s linear; }

/* index cards */
#lv-root .ix-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
#lv-root .ix-card { background: var(--cardbg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
#lv-root .ix-name { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; }
#lv-root .ix-val { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
#lv-root .ix-val b { font-size: 21px; white-space: nowrap; } #lv-root .ix-val span { font-size: 13px; font-weight: 600; }
#lv-root .ix-sub { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } #lv-root .ix-sub .sep { margin: 0 6px; }

/* card */
#lv-root .mk-card { background: var(--cardbg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); }
#lv-root .mk-ctop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
#lv-root .mk-card h3 { font-size: 17px; font-weight: 700; letter-spacing: .08em; margin: 0 0 4px; color: #fff; }
html[data-mode="light"] #lv-root .mk-card h3 { color: var(--navy); }
#lv-root .mk-sub { margin: 0; color: var(--muted); font-size: 12.5px; }
#lv-root .sm-row { display: flex; gap: 8px; flex-wrap: wrap; }
#lv-root .sm { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 10px; font-variant-numeric: tabular-nums; }
#lv-root .sm b { font-size: 16px; } #lv-root .sm span { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
#lv-root .st-err:empty { display: none; }
#lv-root .st-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--dn); color: var(--dn); font-size: 13px; }

/* board */
#lv-root .rt-scroll { overflow-x: auto; }
#lv-root .rt-board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
#lv-root .rt-board th { background: var(--head); color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .08em; padding: 6px 6px;
  border: 1px solid var(--line); text-align: center; cursor: pointer; user-select: none; position: sticky; top: 0; }
#lv-root .rt-board th:hover { color: var(--gold2); }
html[data-mode="light"] #lv-root .rt-board th:hover { color: var(--royal); }
#lv-root .rt-board th.s-asc::after { content: " \25B2"; color: var(--gold); } #lv-root .rt-board th.s-desc::after { content: " \25BC"; color: var(--gold); }
#lv-root .rt-board thead tr:first-child th.g { color: var(--gold); letter-spacing: .2em; cursor: default; }
#lv-root .rt-board td { padding: 5px 7px; border: 1px solid var(--line); text-align: right; font-weight: 500; color: var(--ink);
  transition: background-color .25s ease; }
#lv-root .rt-board tbody tr:nth-child(even) td { background-color: var(--row); }
#lv-root .rt-board tbody tr:hover td { background-color: rgba(46,155,255,.10); }
#lv-root .rt-board td.code { text-align: left; font-weight: 700; letter-spacing: .04em; }
#lv-root .rt-board td[data-col="LAST"], #lv-root .rt-board td[data-col="CHANGE"], #lv-root .rt-board td[data-col="PCT"], #lv-root .rt-board td[data-col="LAST_VOL"] {
  background-color: rgba(212,164,64,.07); font-weight: 700; }
#lv-root .rt-board td[data-col="CEIL"], #lv-root .rt-board td[data-col="FLOOR"], #lv-root .rt-board td[data-col="REF"] { background-color: rgba(127,127,127,.06); }
#lv-root .rt-board td.text { text-align: left; font-weight: 400; color: var(--muted); }
#lv-root .rt-board tfoot td { background: var(--head); font-weight: 700; border: 1px solid var(--line); padding: 6px 7px; text-align: right; }
#lv-root .rt-board tfoot td.code { text-align: left; color: var(--gold); letter-spacing: .1em; }

#lv-root .c-up { color: var(--up) !important; } #lv-root .c-dn { color: var(--dn) !important; } #lv-root .c-rf { color: var(--rf) !important; }
#lv-root .c-ce { color: var(--ce) !important; } #lv-root .c-fl { color: var(--fl) !important; } #lv-root .c-nn { color: var(--ink); }

/* flash of a changed cell */
@keyframes lvUp { from { background-color: var(--flash-up); } to { background-color: transparent; } }
@keyframes lvDn { from { background-color: var(--flash-dn); } to { background-color: transparent; } }
@keyframes lvFl { from { background-color: var(--flash); } to { background-color: transparent; } }
#lv-root .fl-up { animation: lvUp 1.6s ease-out; } #lv-root .fl-dn { animation: lvDn 1.6s ease-out; } #lv-root .fl { animation: lvFl 1.6s ease-out; }

/* notice */
#lv-root .mk-notice { border: 1px solid rgba(212,164,64,.35); border-left: 4px solid var(--gold); background: rgba(212,164,64,.07); border-radius: 10px;
  padding: 14px 18px; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
#lv-root .mk-notice > b { display: block; color: var(--gold); letter-spacing: .2em; font-size: 11.5px; margin-bottom: 6px; }
#lv-root .mk-notice p { margin: 0 0 6px; } #lv-root .mk-notice ul { margin: 0; padding-left: 18px; } #lv-root .mk-notice li b { color: var(--ink); }

/* COMMODITY sectors, VIETNAM subtabs */
#lv-root .cm-secs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
#lv-root .cm-sec { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted) !important; text-decoration: none;
  font-size: 11.5px; letter-spacing: .14em; font-weight: 600; }
#lv-root .cm-sec em { font-style: normal; margin-left: 6px; color: var(--gold); }
#lv-root .vn-subs { margin: 0 0 14px; }
#lv-root .vn-sub { padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted) !important; text-decoration: none;
  font-weight: 700; letter-spacing: .12em; font-size: 13px; }
#lv-root .vn-sub.active, #lv-root .vn-sub:hover { border-color: var(--gold); color: var(--ink) !important; background: var(--cardbg); }
#lv-root .cm-sec.active, #lv-root .cm-sec:hover { border-color: var(--gold); color: var(--ink) !important; }
#lv-root .cm-board td[data-col="NAME"] { color: var(--ink); font-weight: 500; }
#lv-root .cm-board td[data-col="LAST"], #lv-root .cm-board td[data-col="CHANGE"], #lv-root .cm-board td[data-col="PCT"] { background-color: rgba(212,164,64,.07); font-weight: 700; }

/* PORTFOLIO and CRYPTO */
#lv-root .ca-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#lv-root .ca-kpi .ix-val b + span + b { margin-left: 8px; }
#lv-root .ca-board td[data-col="CONTRIB_PTS"], #lv-root .ca-board td[data-col="CONTRIB_PCT"] { background-color: rgba(212,164,64,.07); font-weight: 700; }
#lv-root .ca-capb b { font-size: 16px; color: var(--gold2) !important; white-space: nowrap; }
html[data-mode="light"] #lv-root .ca-capb b { color: var(--royal) !important; }

@media (max-width: 1100px) { #lv-root .ix-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #lv-root .ix-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-tools { margin-left: 0; width: 100%; } .lv-tools input { flex: 1; width: auto; min-width: 0; }
}

/* silent refresh on the Live page: no LOADING popup, busy bar, spinner or greyed output while the boards are read */
html.lv-on #ccpi_loader, html.lv-on #shiny-notification-panel, html.lv-on .shiny-busy-indicator { display: none !important; }
html.lv-on.shiny-busy::after, html.lv-on.shiny-busy::before, html.lv-on .shiny-busy::after { display: none !important; animation: none !important; }
#lv-root .recalculating { opacity: 1 !important; } #lv-root .recalculating::after, #lv-root .recalculating::before { display: none !important; }

/* WORLD tab (and FOREX): country with its ISO code badge, market TRADING / CLOSED */
#lv-root td.ctry { white-space: nowrap; }
#lv-root td.ctry .iso { display: inline-block; min-width: 24px; margin-right: 7px; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--line);
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-align: center; color: var(--muted); }
#lv-root td.mkt { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
#lv-root td.mkt.c-nn { color: var(--muted); }