/* ORB Universe Dashboard Styles */

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #0b0e11;
  color: #e6e6e6;
  line-height: 1.5;
}

header {
  background: #151a21;
  padding: 1rem 2rem;
  border-bottom: 1px solid #2a2f36;
}

header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #9aa0a6;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-controls label {
  color: #9aa0a6;
}

.account-selector {
  background: #1e2329;
  color: #e6e6e6;
  border: 1px solid #2a2f36;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.account-selector:hover {
  background: #252a32;
  border-color: #4a5568;
}

.account-selector:focus {
  outline: none;
  border-color: #4a9eff;
}

.refresh-info {
  font-style: italic;
}

main {
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* Account for header height */
}

section {
  margin-bottom: 1rem;
}

h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: #e6e6e6;
}

.summary-stats {
  font-size: 0.875rem;
  font-weight: 400;
  color: #9aa0a6;
  margin-left: 1rem;
}

/* Table Styles */
.table-section {
  background: #151a21;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #2a2f36;
  flex: 1; /* Take remaining space */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow flex child to shrink */
}

#tableContainer {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
}

table {
  width: max-content; /* Table width based on content */
  min-width: 100%; /* At least full container width */
  border-collapse: collapse;
  font-size: 0.75rem; /* Smaller font for compactness */
}

th, td {
  padding: 0.15rem 0.25rem; /* Reduced padding for compactness */
  text-align: left;
  border-bottom: 1px solid #2a2f36;
  white-space: nowrap; /* Prevent text wrapping */
}

th {
  background: #1e2329;
  font-weight: 600;
  color: #e6e6e6;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}

/* Fix first column (Ticker) on the left */
th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #151a21; /* Match table section background */
  border-right: 2px solid #2a2f36;
}

/* Header cells for first column need header background */
th:first-child {
  background: #1e2329; /* Header background */
  z-index: 11; /* Higher than body cells */
}

/* Body cells for first column */
td:first-child {
  background: #151a21; /* Body background */
}

/* Fix second column (Company) on the left */
th:nth-child(2),
td:nth-child(2) {
  position: sticky;
  left: 40px; /* Approximate width of Ticker column */
  z-index: 10;
  background: #151a21; /* Match table section background */
  border-right: 2px solid #2a2f36;
}

/* Header cells for second column need header background */
th:nth-child(2) {
  background: #1e2329; /* Header background */
  z-index: 11; /* Higher than body cells */
}

/* Body cells for second column */
td:nth-child(2) {
  background: #151a21; /* Body background */
}

th:hover {
  background: #252a32;
}

th.sorted-asc::after {
  content: " ↑";
  color: #4a9eff;
}

th.sorted-desc::after {
  content: " ↓";
  color: #4a9eff;
}

td {
  color: #b8bcc8;
}

/* Company column - constrained width with truncation */
th:nth-child(2),
td:nth-child(2) {
  width: 100px; /* Fixed width for sticky positioning */
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ticker column - fixed width for sticky positioning */
th:first-child,
td:first-child {
  width: 40px;
  min-width: 40px;
}

/* Symbol ticker links */
.symbol-link {
  color: #4a9eff;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.symbol-link:hover {
  text-decoration: underline;
  color: #6bb6ff;
}

/* Color coding for Trade */
.trade-nutral {
  color: #9aa0a6;
  font-weight: 500;
}

.trade-long {
  color: #4ade80;
  font-weight: 500;
}

.trade-short {
  color: #f87171;
  font-weight: 500;
}

/* Color coding for Market Price */
.trade-conditions-positive {
  color: #4ade80;
  font-weight: 500;
}

.trade-conditions-negative {
  color: #f87171;
  font-weight: 500;
}

/* Color coding for Status */
.status-pre-entry {
  color: #9aa0a6; /* gray */
  font-weight: 500;
}

.status-pending {
  color: #a855f7; /* purple */
  font-weight: 500;
}

.status-filled {
  color: #fb923c; /* orange */
  font-weight: 500;
}

.status-exited-sl {
  color: #f87171; /* red */
  font-weight: 500;
}

.status-exited-eod {
  color: #4ade80; /* green */
  font-weight: 500;
}

/* Status section headers */
.status-section-header {
  background: #1e2329;
}

/* First cell of status header - sticky on the left */
.status-section-header td:first-child {
  position: sticky;
  left: 0;
  z-index: 12; /* Higher than regular fixed columns to stay on top */
  background: #1e2329 !important; /* Ensure background is set for sticky positioning */
  font-weight: 600;
  font-size: 0.875rem;
  color: #e6e6e6;
  padding: 0.1rem 0.1rem;
  border-right: 2px solid #2a2f36; /* Match the border style of fixed columns */
  border-top: 2px solid #2a2f36;
  border-bottom: 2px solid #2a2f36;
  width: 200px; /* Fixed width for sticky positioning */
  min-width: 200px;
}

/* Second cell spans the rest - no sticky needed */
.status-header-cell-fill {
  background: #1e2329;
  border-top: 2px solid #2a2f36;
  border-bottom: 2px solid #2a2f36;
}

.status-header-cell {
  /* Keep for backward compatibility if needed */
}

/* Number formatting */
.number {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  text-align: right;
}

/* Chart Section */
.chart-section {
  background: #151a21;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #2a2f36;
  flex-shrink: 0; /* Don't shrink */
}

#chartContainer {
  height: 250px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

/* Loading states */
.loading {
  text-align: center;
  padding: 2rem;
  color: #9aa0a6;
}

.loading::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #2a2f36;
  border-radius: 50%;
  border-top-color: #4a9eff;
  animation: spin 1s ease-in-out infinite;
  margin-left: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error states */
.error {
  color: #f87171;
  background: #1f2937;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #f87171;
}

/* Responsive design */
@media (max-width: 768px) {
  main {
    padding: 0.5rem;
    height: calc(100vh - 100px);
  }
  
  header {
    padding: 0.75rem;
  }
  
  table {
    font-size: 0.7rem;
  }
  
  th, td {
    padding: 0.15rem 0.15rem;
  }
  
  #chartContainer {
    height: 200px;
  }
  
  .table-section {
    padding: 0.75rem;
  }
  
  .chart-section {
    padding: 0.75rem;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1e2329;
}

::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #718096;
}