/* static/dash/fx_macro.css — namespaced (fxmacro-*) */
/* look: more black, sharp edges, seams, NO rounding */

.shell-main .fxmacro-root{
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0 18px 0;
  padding: 14px;
  background: #000;
  color: #fff;
  min-width: 0;
}

/* header */
.shell-main .fxmacro-root-head{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.shell-main .fxmacro-root-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell-main .fxmacro-root-subrow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0.85;
  font-size: 12px;
}

.shell-main .fxmacro-root-pill{
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

/* 1-2 boxes */
.shell-main .fxmacro-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}
@media (max-width: 1180px){
  .shell-main .fxmacro-row{ grid-template-columns: 1fr; }
}

/* file box */
.shell-main .fxmacro-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.shell-main .fxmacro-box--error{ border-color: rgba(255,120,120,0.35); }

/* top line */
.shell-main .fxmacro-header{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.shell-main .fxmacro-head-left{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.shell-main .fxmacro-title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
}

.shell-main .fxmacro-country{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.shell-main .fxmacro-file{
  font-size: 11px;
  opacity: 0.55;
  margin-bottom: 6px;
}

.shell-main .fxmacro-head-right{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shell-main .fxmacro-score-box{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  min-width: 120px;
}

.shell-main .fxmacro-score-label{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.shell-main .fxmacro-score{
  font-size: 18px;
  font-weight: 900;
}

/* score colors */
.shell-main .fxmacro-score-pos{ color: #7CFFB2; }
.shell-main .fxmacro-score-neg{ color: #FF7C7C; }
.shell-main .fxmacro-score-neutral{ color: rgba(255,255,255,0.85); }

/* meta row */
.shell-main .fxmacro-meta-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  opacity: 0.85;
}

.shell-main .fxmacro-meta{
  display: inline-flex;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  font-size: 12px;
}

.shell-main .fxmacro-meta-k{ opacity: 0.7; }
.shell-main .fxmacro-meta-v{ opacity: 0.95; }

/* section */
.shell-main .fxmacro-section{ margin-top: 10px; }

.shell-main .fxmacro-section-title{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 10px 0 8px 0;
}

/* table */
.shell-main .fxmacro-table{
  display: grid;
  gap: 10px;
}

/* --- HEADER ROW FIX: make it a real 3-col grid like the data rows --- */
.shell-main .fxmacro-tr-head{
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

.shell-main .fxmacro-th{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

.shell-main .fxmacro-th-pts{
  text-align: center;
}

/* ROWPAIR = one indicator box */
.shell-main .fxmacro-rowpair{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

/* TOP: columns */
.shell-main .fxmacro-tr-main{
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) 110px 110px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Make points columns feel column-like */
.shell-main .fxmacro-tr-main .fxmacro-td.fxmacro-pts{
  text-align: center;
}

/* BOTTOM: horizontal reason | explain */
.shell-main .fxmacro-tr-bottom{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px; /* reason | explain */
  gap: 10px;
  align-items: start;
  padding: 10px;
}

/* better wrapping + no clipping */
.shell-main .fxmacro-bottom-reason{
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.95;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.shell-main .fxmacro-bottom-explain{
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* cells */
.shell-main .fxmacro-td{
  font-size: 13px;
  line-height: 1.25;
  min-width: 0;
}

.shell-main .fxmacro-ind-name{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
}

.shell-main .fxmacro-ind-sub{
  margin-top: 4px;
  opacity: 0.9;
  font-size: 12px;
}

/* keep subline on one line if possible; wraps nicely otherwise */
.shell-main .fxmacro-ind-sub{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* details buttons: sharper + more compact */
.shell-main .fxmacro-details{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.55);
  padding: 6px 8px;
}

.shell-main .fxmacro-details-sum{
  cursor: pointer;
  font-size: 12px;
  opacity: 0.85;
  user-select: none;
}

.shell-main .fxmacro-details-body{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.92;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.65);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* score color classes used also for points */
.shell-main .fxmacro-score-pos{ color: #7CFFB2; }
.shell-main .fxmacro-score-neg{ color: #FF7C7C; }
.shell-main .fxmacro-score-neutral{ color: rgba(255,255,255,0.85); }

/* responsive */
@media (max-width: 980px){
  .shell-main .fxmacro-tr-head,
  .shell-main .fxmacro-tr-main{
    grid-template-columns: 1fr 110px 110px;
  }
  .shell-main .fxmacro-tr-bottom{
    grid-template-columns: 1fr;
  }
  .shell-main .fxmacro-th-pts{ text-align: right; }
  .shell-main .fxmacro-tr-main .fxmacro-td.fxmacro-pts{ text-align: right; }
}

/* misc */
.shell-main .fxmacro-empty{ opacity: 0.75; }
.shell-main .fxmacro-error{ opacity: 0.9; color: #ff9c9c; }