/* ==========================================================================
   Signals — Enhanced with Status & Pips Emphasis
   ========================================================================== */

/* ----------  Global wrapper  ---------- */
.sigplug-container{
  max-width:1280px;
  margin-inline:auto;
  padding-inline:12px;
}

/* ----------  Toolbar (search + toggle)  ---------- */
.sigplug-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-block:.5rem 1.2rem;
}
.sigplug-toolbar input[type="search"]{padding:.35rem .6rem;}

.sigplug-view-toggle{
  display:inline-flex;
  gap:6px;
  padding:4px;
  background:#f5f5f7;
  border:1px solid #ddd;
  border-radius:999px;
}
.sigplug-view-toggle button{
  background:none;
  border:0;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  color:#555;
}
.sigplug-view-toggle button.active{
  background:#fff;
  border:1px solid #ddd;
  color:#111;
}

/* ----------  Cards grid  ---------- */
.sigplug-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-block: .25rem 1.5rem;
  grid-auto-rows: minmax(auto, max-content);
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* ----------  Enhanced Card Design with Status Emphasis  ---------- */
.sigcard{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  position: relative;
  z-index: auto;
  transition: all 0.3s ease;
}

.sigcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

/* ----------  Enhanced Header with Better Status Display  ---------- */
.sigcard header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-shrink: 0;
  min-height: 40px;
}

.sigcard .pair{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .3px;
  color: #1a202c;
  overflow-wrap: break-word;
}

/* ----------  Enhanced Buy/Sell Badges  ---------- */
.sigcard .badge{
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid transparent;
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sigcard .badge.buy {
  color: #065f46;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.sigcard .badge.sell{
  color: #991b1b;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #ef4444;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

/* ----------  Status & Pips Emphasis Section  ---------- */
.sigcard .status-section {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
}

.status-item {
  text-align: center;
}

.status-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 4px;
}

.status-value {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid transparent;
}

/* Status Value Styles */
.status-value.pending {
  color: #d97706;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
}

.status-value.filled {
  color: #059669;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border-color: #10b981;
}

.status-value.cancelled {
  color: #dc2626;
  background: linear-gradient(135deg, #fee2e2, #fca5a5);
  border-color: #ef4444;
}

.status-value.closed {
  color: #4f46e5;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  border-color: #6366f1;
}

/* Pips Value Styles */
.pips-value {
  font-size: 18px !important;
  font-weight: 900 !important;
  position: relative;
}

.pips-value.positive {
  color: #047857;
  background: linear-gradient(135deg, #d1fae5, #6ee7b7);
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.pips-value.negative {
  color: #b91c1c;
  background: linear-gradient(135deg, #fee2e2, #f87171);
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.pips-value.neutral {
  color: #374151;
  background: linear-gradient(135deg, #f3f4f6, #d1d5db);
  border-color: #9ca3af;
}

/* Add + or - prefix to pips */
.pips-value.positive::before {
  content: '+';
  margin-right: 2px;
}

.pips-value.negative::before {
  content: '';
  margin-right: 2px;
}

/* ----------  Regular Facts List (simplified)  ---------- */
.sigcard ul.facts{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  flex: 1 1 auto;
  overflow: visible;
}

.sigcard ul.facts li{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed #e5e7eb;
  padding: 8px 0;
  align-items: center;
  min-height: 28px;
}

.sigcard ul.facts li:first-child{
  border-top: 0;
}

.sigcard ul.facts li span {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.sigcard ul.facts li span:first-child {
  font-weight: 600;
  color: #64748b;
}

/* ----------  Chart Section  ---------- */
.chart{
  aspect-ratio: 16/9;
  background: #0b0f14;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  width: 100%;
  cursor: zoom-in;
  flex-shrink: 0;
  margin-top: auto;
  max-height: 180px;
  min-height: 140px;
  overflow: hidden;
}

.chart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------  Responsive Design  ---------- */
@media (max-width:1200px){
  .sigplug-cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .sigcard {
    min-height: 450px;
  }
}

@media (max-width:720px){
  .sigplug-cards{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .sigcard {
    min-height: 420px;
  }
  
  .sigcard .status-section {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .status-value, .pips-value {
    font-size: 15px !important;
  }
}

/* ----------  Table View  ---------- */
.sigplug-table-wrap{overflow-x:auto;}
.sigplug-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.sigplug-table th,
.sigplug-table td{
  border:1px solid #ddd;
  padding:.5rem .6rem;
  white-space:nowrap;
}
.sigplug-table thead th{
  background:#f6f6f6;
  position:sticky;top:0;z-index:1;
}
.sigplug-table tr:nth-child(even){background:#fafafa;}

/* Enhanced table status and pips columns */
.sigplug-table .status-cell {
  font-weight: 700;
  padding: 4px 8px !important;
  border-radius: 6px;
  text-align: center;
}

.sigplug-table .status-cell.pending {
  color: #d97706;
  background: #fef3c7;
}

.sigplug-table .status-cell.filled {
  color: #059669;
  background: #d1fae5;
}

.sigplug-table .status-cell.cancelled {
  color: #dc2626;
  background: #fee2e2;
}

.sigplug-table .status-cell.closed {
  color: #4f46e5;
  background: #e0e7ff;
}

.sigplug-table .pips-cell {
  font-weight: 800;
  text-align: center;
}

.sigplug-table .pips-cell.positive {
  color: #047857;
}

.sigplug-table .pips-cell.positive::before {
  content: '+';
}

.sigplug-table .pips-cell.negative {
  color: #b91c1c;
}

/* ----------  View Toggle  ---------- */
.sigplug-container.view-cards .sigplug-table-wrap{display:none;}
.sigplug-container.view-table .sigplug-cards{display:none;}

/* ----------  Zoom Overlay  ---------- */
.sigplug-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sigplug-zoom-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sigplug-zoom-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  object-fit: contain;
}

.sigplug-zoom-close {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.sigplug-zoom-close:hover {
  background: rgba(255, 255, 255, 1);
}