/* FIXSIM brand layer on top of Bootstrap 5. Structural styling comes from BS5 +
   dataTables.bootstrap5; this file owns the orange, the status light, and the
   FIX-specific rendering (badges, mono fields, detail rows). */
:root {
  --fixsim-orange: #e8890c;
  --in: #0b6e3f;          /* inbound = user -> FIXSIM */
  --in-bg: #e7f4ed;
  --out: #14508f;         /* outbound = FIXSIM -> user */
  --out-bg: #e8f0fa;
  --mono: Consolas, "Cascadia Mono", Menlo, monospace;
}

.wordmark { font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.wordmark span { color: var(--fixsim-orange); }

/* Fluid canvas: the feed spreads with the browser (multi-monitor devs), while the
   hero copy stays at a readable measure and the connection card hugs the right. */
#hero { max-width: 780px; }
.conn-rail .card { max-width: 480px; margin-left: auto; }
@media (max-width: 991px) { .conn-rail .card { margin-left: 0; } }

.btn-fixsim {
  background: var(--fixsim-orange);
  border-color: var(--fixsim-orange);
  color: #fff;
  font-weight: 600;
}
.btn-fixsim:hover, .btn-fixsim:focus { background: #d47c08; border-color: #d47c08; color: #fff; }
.link-fixsim { color: var(--fixsim-orange); }
.link-fixsim:hover { color: #d47c08; }

.resume-chip {
  padding: 4px 14px;
  border: 1px solid var(--fixsim-orange);
  border-radius: 999px;
  background: #fff;
  color: var(--fixsim-orange);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.resume-chip:hover { background: var(--fixsim-orange); color: #fff; }

/* ---- connection status light ---- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  border: 1px solid var(--bs-border-color);
  background: #fff;
}
.status-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }

.status.waiting { color: #d97706; }
.status.waiting .status-dot { background: #d97706; animation: blink 1.6s ease-in-out infinite; }

.status.connected { color: #16a34a; border-color: #bbe7c9; background: #f0fbf4; }
.status.connected .status-dot {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5);
  animation: pulse 1.8s ease-out infinite;
}

.status.down { color: #dc2626; border-color: #f3c1c1; background: #fdf2f2; }
.status.down .status-dot { background: #dc2626; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- connection card ---- */
.conn-card th { color: var(--bs-secondary-color); font-weight: 500; font-size: 13px; width: 44%; }
.conn-card td { font-family: var(--mono); font-size: 14px; }
.fixtag { color: var(--bs-secondary-color); font-weight: 400; font-size: 11px; }

/* ---- message grid (Portal blotter look) ---- */

/* panel-inverse header, as on portal.fixsim.com */
.panel-fixsim { overflow: hidden; }
.panel-heading-dark {
  background: #242a30;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 16px;
  letter-spacing: .2px;
}

/* Details button, teal like the Portal's */
.detailsButton {
  background-color: #18a689;
  border: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
  box-shadow: none;
}
.detailsButton:hover { background-color: #139178; color: #fff; }

/* Message-type colors — lifted from the Portal's FIXMessages.css */
.Heartbeat   { color: #db7093; font-style: italic; }
.Reject      { color: red; font-style: italic; font-weight: bold; }
.TestRequest { color: #2fb4d8; font-style: italic; }
.Logon       { color: darkgreen; font-style: italic; }
.Logout      { color: #6c757d; font-style: italic; }
.NewOrderSingle  { color: green; }
td:has(> .mt-name.NewOrderSingle) { background-color: #d3fbcf; }
.ExecutionReport { color: firebrick; }
td:has(> .mt-name.ExecutionReport) { background-color: #e8e6e6; }

#msg-grid { font-size: 13px; }
#msg-grid thead th { color: var(--bs-secondary-color); font-size: 12.5px; white-space: nowrap; }
#msg-grid tbody tr { cursor: pointer; }
#msg-grid .fai { font-size: 13px; }

td.time { font-family: var(--mono); color: var(--bs-secondary-color); white-space: nowrap; }
.dir-badge {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.dir-badge.in { color: var(--in); background: var(--in-bg); }
.dir-badge.out { color: var(--out); background: var(--out-bg); }
td.mtype { font-weight: 600; white-space: nowrap; }
td.mtype .code { color: var(--bs-secondary-color); font-family: var(--mono); font-weight: 400; font-size: 11px; }
td.summary { font-family: var(--mono); color: #3a4356; }
td.summary b { font-weight: 600; color: var(--bs-body-color); }

td.detail-cell { background: #fbfcfe; padding: 10px 14px 12px; cursor: default; }
.detail-fields { display: flex; flex-wrap: wrap; gap: 5px 16px; font-family: var(--mono); font-size: 12px; margin-bottom: 8px; }
.detail-fields b { font-weight: 600; }
.detail-raw { font-family: var(--mono); font-size: 11px; color: var(--bs-secondary-color); word-break: break-all; }

/* ---- mini-blotter ---- */
.order-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
}
.order-card.terminal { opacity: .6; background: #fafbfd; }
.oc-id { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.oc-status { font-size: 12px; color: var(--bs-secondary-color); font-style: italic; }
.oc-line { font-size: 13.5px; margin-top: 3px; }
.oc-side { font-weight: 700; }
.oc-side.buy { color: var(--in); }
.oc-side.sell { color: firebrick; }
.oc-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.oc-actions .btn { font-size: 12px; padding: 2px 12px; font-weight: 600; }

/* DataTables control layout inside the card */
.dt-top { padding-bottom: 8px; }
.dt-top .dataTables_filter input { width: 240px; display: inline-block; margin-left: 6px; }
.dt-top .dataTables_length select { display: inline-block; width: auto; margin: 0 6px; }
.dt-bottom { padding-top: 6px; }
.dataTables_info { padding-top: 0 !important; color: var(--bs-secondary-color); font-size: 13px; }
.page-item.active .page-link { background: var(--fixsim-orange); border-color: var(--fixsim-orange); }
.page-link { color: var(--fixsim-orange); }