/* ==========================================================================
   GMM <GO> Global Macro Movers window (added to the Bloomberg terminal
   variant). Namespaced under .gmm. Also defines the .desk cascade that holds
   the DLIB vol window + this GMM window in variant A.
   ========================================================================== */

/* ---- desk: cascade container for the two windows in variant A ---- */
.desk { position: relative; margin: 18px 0 0 0; min-height: 566px; max-width: 1140px; }  /* cap so the two windows always overlap */
.desk-win { position: absolute; }
#dw-vol { right: 0;  top: 0;    z-index: 2; }   /* focus: right-aligned, in front */
#dw-gmm { left: 0;   top: 48px; z-index: 1; }   /* peeks out on the left */
.desk-win.is-front { z-index: 20; }
.desk-win.is-dragging { z-index: 30; }

/* ---- GMM window ---- */
.gmm {
  --g-up1:   #1c6b39;
  --g-up2:   #0b3a1c;
  --g-dn1:   #7c1a1a;
  --g-dn2:   #3d0c0c;
  --g-amber: #ff9d1c;
  --g-field: #f2a41c;
  --g-red:   #a51212;
  --g-menu1: #bf1b1b;
  --g-menu2: #8c0d0d;
  width: 640px;
  max-width: 100%;
  background: #000;
  border: 1px solid #555;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px #000;
  overflow: hidden;
  color: #e6e6e6;
  font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}
.gmm * { box-sizing: border-box; }
.gmm i { font-style: normal; }

.gmm-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#2c2c2c, #1b1b1b);
  border-bottom: 1px solid #000;
  padding: 3px 6px; font-size: 11px; color: #bdbdbd;
  cursor: grab; touch-action: none;
}
.desk-win.is-dragging .gmm-titlebar { cursor: grabbing; }
.gmm-panelno { background: var(--g-amber); color: #000; font-weight: bold; padding: 0 5px; font-size: 10px; }
.gmm-title { flex: 1; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmm-winbtns i { display: inline-block; width: 16px; text-align: center; color: #999; }

/* red LLP bar */
.gmm-topbar {
  display: flex; align-items: center; gap: 8px;
  background: #050505; border-bottom: 1px solid #1a1a1a; padding: 2px 8px;
  font-size: 12px;
}
.gmm-llp { color: #cfd3da; }
.gmm-sp { flex: 1; }
.gmm-page { color: #f3d6d6; font-size: 11px; }
.gmm-ico { color: #f3d6d6; font-size: 12px; margin: 0 2px; }
.gmm-fn { color: #fff; font-size: 12px; white-space: nowrap; }
.gmm-fn b { font-weight: 700; }

/* button rows */
.gmm-bar2, .gmm-bar3 { display: flex; align-items: center; gap: 4px; padding: 3px 8px; background: #0a0a0a; border-bottom: 1px solid #161616; }
.gmm .b { font-size: 11px; color: #d0d0d0; background: #262626; border: 1px solid #3a3a3a; padding: 1px 8px; }
.gmm .b.on { background: #2f6fd0; color: #fff; border-color: #2f6fd0; }
.gmm .b-view { background: #1d4f9e; color: #fff; border-color: #1d4f9e; }
.gmm .b-red { background: var(--g-red); color: #fff; border-color: var(--g-red); }
.gmm .b-amber { background: var(--g-amber); color: #000; border-color: var(--g-amber); }
.gmm-bar2 { background: linear-gradient(var(--g-menu1), var(--g-menu2)); }
.gmm-bar2 .b { background: #262626; }

/* grid: 5 columns */
.gmm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: #000; padding: 2px; }
.gmm-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gmm-colhdr { background: #2b2b2b; color: #e0e0e0; font-size: 11px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gcell {
  position: relative;
  padding: 3px 6px 4px;
  min-height: 54px;
  border: 1px solid transparent;
  overflow: hidden;
}
/* five states: unchanged (grey), up, up-box (bright), down, down-box (bright) */
.gcell.unch   { background: linear-gradient(180deg, #3b3b3b, #242424); }
.gcell.up     { background: linear-gradient(180deg, var(--g-up1), var(--g-up2)); }
.gcell.up-box { background: linear-gradient(180deg, #25a44d, #15803a); border-color: #62f295; }
.gcell.dn     { background: linear-gradient(180deg, var(--g-dn1), var(--g-dn2)); }
.gcell.dn-box { background: linear-gradient(180deg, #d81e1e, #8d1010); border-color: #ff6060; }
.gc-name { font-size: 11px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcell.unch .gc-name { color: #c4c4c4; }
.gcell.up .gc-name, .gcell.up-box .gc-name { color: #b8e6c4; }
.gcell.dn .gc-name, .gcell.dn-box .gc-name { color: #f0b8b8; }
.gc-mid { display: flex; align-items: baseline; justify-content: space-between; margin: 1px 0; }
.gc-pct { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.05; }
.gc-spark { width: 44px; height: 16px; flex: 0 0 auto; }
.gc-bot { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcell.unch .gc-bot { color: #d8d8d8; }
.gcell.up .gc-bot, .gcell.up-box .gc-bot { color: #d6f3de; }
.gcell.dn .gc-bot, .gcell.dn-box .gc-bot { color: #f7d6d6; }
.gc-arrow { margin-right: 2px; }
.gcell.unch .gc-arrow { color: #9a9a9a; }
.gcell.up .gc-arrow, .gcell.up-box .gc-arrow { color: #4fe084; }
.gcell.dn .gc-arrow, .gcell.dn-box .gc-arrow { color: #ff7a7a; }
.gc-chg { margin-left: 6px; }
.gcell.unch .gc-chg { color: #bdbdbd; }
.gcell.up .gc-chg, .gcell.up-box .gc-chg { color: #86e6a6; }
.gcell.dn .gc-chg, .gcell.dn-box .gc-chg { color: #ffa0a0; }

/* tick flash */
.gcell.flash-up { border-color: #4fe084; }
.gcell.flash-dn { border-color: #ff7a7a; }

/* crashing cell: deepest red on the board, faint pulse */
.gcell.gcell-crash { background: linear-gradient(180deg, #e01818, #4a0505) !important; animation: gcell-crash 1.1s ease-in-out infinite; }
.gcell.gcell-crash .gc-name { color: #ffd0d0; }
.gcell.gcell-crash .gc-bot { color: #ffdede; }
@keyframes gcell-crash { 50% { filter: brightness(1.25); } }

.gmm-status {
  display: flex; justify-content: space-between; gap: 10px;
  background: #101010; border-top: 1px solid #262626; padding: 2px 8px;
  font-size: 11px; color: #9aa0a8;
}
#gmm-clock::after { content: "\2588"; margin-left: 3px; color: #ff9d1c; animation: gmm-blink 1s steps(1) infinite; }
@keyframes gmm-blink { 50% { opacity: 0; } }

/* ---- responsive: stack the desk on narrow screens ---- */
@media (max-width: 1199px) {
  .desk { min-height: 0; }
  .desk-win { position: static !important; z-index: auto !important; margin: 0 0 18px 0; }
  .gmm-titlebar { cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  #gmm-clock::after { animation: none; }
}