/* ============================================================
   DSE Market Data Plugin — Stylesheet
   Brand: CNS Blue #2767B2 | CNS Yellow #FDCB12
   ============================================================ */

:root {
  --dse-blue:        #2767B2;
  --dse-blue-dark:   #1a4d8f;
  --dse-yellow:      #FDCB12;
  --dse-up:          #16a34a;
  --dse-down:        #dc2626;
  --dse-neutral:     #64748b;
  --dse-bg:          #ffffff;
  --dse-bg-alt:      #f8fafc;
  --dse-border:      #e2e8f0;
  --dse-text:        #0f172a;
  --dse-text-muted:  #64748b;
  --dse-radius:      10px;
  --dse-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dse-font-mono:   'SF Mono', 'Fira Code', 'Courier New', monospace;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.dse-market-wrapper {
  font-family:      var(--dse-font);
  background:       var(--dse-bg);
  border:           1px solid var(--dse-border);
  border-top:       3px solid var(--dse-blue);
  border-radius:    var(--dse-radius);
  overflow:         hidden;
  max-width:        720px;
  box-shadow:       0 1px 8px rgba(0,0,0,0.06);
}

/* Dark theme */
.dse-theme-dark {
  --dse-bg:          #0f172a;
  --dse-bg-alt:      #1e293b;
  --dse-border:      #334155;
  --dse-text:        #f1f5f9;
  --dse-text-muted:  #94a3b8;
}

/* ── Header ──────────────────────────────────────────────── */
.dse-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          12px 16px;
  background:       var(--dse-blue);
  color:            #fff;
  gap:              12px;
}

.dse-header-left {
  display:          flex;
  align-items:      center;
  gap:              10px;
}

.dse-logo {
  display:          flex;
  align-items:      center;
}

.dse-title {
  font-size:        0.95rem;
  font-weight:      600;
  letter-spacing:   0.02em;
  color:            #fff;
}

.dse-header-right {
  display:          flex;
  align-items:      center;
  gap:              12px;
}

/* Index badge */
.dse-index-badge {
  font-size:        0.78rem;
  background:       rgba(255,255,255,0.15);
  border-radius:    20px;
  padding:          3px 10px;
  white-space:      nowrap;
  color:            #fff;
}

.dse-index-badge strong {
  color: var(--dse-yellow);
  margin: 0 3px;
}

/* Status indicator */
.dse-status {
  display:          flex;
  align-items:      center;
  gap:              6px;
  font-size:        0.75rem;
  color:            rgba(255,255,255,0.75);
}

.dse-status-dot {
  width:            7px;
  height:           7px;
  border-radius:    50%;
  background:       rgba(255,255,255,0.3);
  transition:       background 0.3s;
}

.dse-status-dot--active {
  background:       #4ade80;
  box-shadow:       0 0 0 2px rgba(74,222,128,0.3);
}

/* ── Summary Bar ─────────────────────────────────────────── */
.dse-summary-bar {
  display:          flex;
  gap:              0;
  border-bottom:    1px solid var(--dse-border);
  background:       var(--dse-bg-alt);
  overflow-x:       auto;
}

.dse-summary-item {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          8px 16px;
  border-right:     1px solid var(--dse-border);
  min-width:        90px;
  flex:             1;
}

.dse-summary-item:last-child {
  border-right:     none;
}

.dse-summary-label {
  font-size:        0.68rem;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  color:            var(--dse-text-muted);
  white-space:      nowrap;
}

.dse-summary-value {
  font-size:        0.88rem;
  font-weight:      600;
  color:            var(--dse-text);
  margin-top:       2px;
}

/* ── Table Container ─────────────────────────────────────── */
.dse-table-container {
  max-height:       480px;
  overflow-y:       auto;
}

.dse-table-container::-webkit-scrollbar {
  width:            5px;
}

.dse-table-container::-webkit-scrollbar-track {
  background: var(--dse-bg-alt);
}

.dse-table-container::-webkit-scrollbar-thumb {
  background: var(--dse-border);
  border-radius: 99px;
}

/* ── Table ───────────────────────────────────────────────── */
.dse-table {
  width:            100%;
  border-collapse:  collapse;
  font-size:        0.875rem;
  color:            var(--dse-text);
}

.dse-table thead th {
  position:         sticky;
  top:              0;
  background:       var(--dse-bg-alt);
  padding:          9px 16px;
  text-align:       left;
  font-size:        0.7rem;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  color:            var(--dse-text-muted);
  border-bottom:    1px solid var(--dse-border);
  font-weight:      600;
  z-index:          1;
}

.dse-table thead th:nth-child(2),
.dse-table thead th:nth-child(3) {
  text-align:       right;
}

.dse-table tbody tr {
  border-bottom:    1px solid var(--dse-border);
  transition:       background 0.15s;
}

.dse-table tbody tr:last-child {
  border-bottom:    none;
}

.dse-table tbody tr:hover {
  background:       rgba(39, 103, 178, 0.05);
}

.dse-table td {
  padding:          9px 16px;
  vertical-align:   middle;
}

.dse-col-ticker {
  font-family:      var(--dse-font-mono);
  font-size:        0.82rem;
  letter-spacing:   0.04em;
  color:            var(--dse-blue);
  width:            28%;
}

.dse-col-ticker strong {
  font-weight:      700;
}

.dse-col-price {
  text-align:       right;
  font-family:      var(--dse-font-mono);
  font-weight:      600;
  font-size:        0.875rem;
  white-space:      nowrap;
}

.dse-col-change {
  text-align:       right;
  white-space:      nowrap;
  font-size:        0.82rem;
  font-weight:      600;
}

.dse-col-change .dse-arrow {
  margin-right:     3px;
  font-size:        0.7rem;
}

/* ── Colour States ───────────────────────────────────────── */
.dse-up,   td.dse-up   { color: var(--dse-up);      }
.dse-down, td.dse-down { color: var(--dse-down);    }
.dse-neutral           { color: var(--dse-neutral); }

/* ── Loading ─────────────────────────────────────────────── */
.dse-loading {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          40px 20px;
  gap:              12px;
  color:            var(--dse-text-muted);
  font-size:        0.875rem;
}

.dse-spinner {
  width:            28px;
  height:           28px;
  border:           3px solid var(--dse-border);
  border-top-color: var(--dse-blue);
  border-radius:    50%;
  animation:        dse-spin 0.75s linear infinite;
}

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

/* ── Error ───────────────────────────────────────────────── */
.dse-error {
  padding:          32px 20px;
  text-align:       center;
  font-size:        0.875rem;
  color:            var(--dse-text-muted);
}

.dse-error a {
  color:            var(--dse-blue);
  text-decoration:  underline;
}

/* ── Footer ──────────────────────────────────────────────── */
.dse-footer {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          8px 16px;
  background:       var(--dse-bg-alt);
  border-top:       1px solid var(--dse-border);
  font-size:        0.72rem;
  color:            var(--dse-text-muted);
  gap:              8px;
  flex-wrap:        wrap;
}

.dse-source a {
  color:            var(--dse-blue);
  text-decoration:  none;
}

.dse-source a:hover {
  text-decoration:  underline;
}

.dse-refresh-btn {
  display:          flex;
  align-items:      center;
  gap:              5px;
  background:       none;
  border:           1px solid var(--dse-border);
  border-radius:    6px;
  padding:          4px 10px;
  font-size:        0.72rem;
  cursor:           pointer;
  color:            var(--dse-text-muted);
  transition:       all 0.15s;
  font-family:      var(--dse-font);
}

.dse-refresh-btn:hover {
  background:       var(--dse-blue);
  color:            #fff;
  border-color:     var(--dse-blue);
}

.dse-refresh-btn:disabled {
  opacity:          0.5;
  cursor:           not-allowed;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .dse-summary-bar {
    gap:            0;
  }

  .dse-summary-item {
    min-width:      70px;
    padding:        7px 10px;
  }

  .dse-table td,
  .dse-table thead th {
    padding:        8px 10px;
  }

  .dse-header {
    padding:        10px 12px;
    flex-wrap:      wrap;
  }

  .dse-index-badge {
    display:        none;
  }
}