/* BLACK TIDE POCKET — component vocabulary.
   Mirrors the desktop's Qt widget vocabulary: _stat_card (app.py:1144-1178),
   _badge (app.py:1180-1198), glass panels (app.py:364-706),
   _battlefield_turn_widget (app.py:990-1048), styled tables (app.py:1247-1280). */

/* ---------- Layout shell ---------- */

.bt-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.bt-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(2, 9, 19, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bt-panel-border);
}

.bt-brand {
  font-family: var(--bt-font-hero);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bt-bright-text);
}

.bt-brand small {
  display: block;
  font-family: var(--bt-font-base);
  font-size: var(--bt-size-page-title);
  letter-spacing: var(--bt-tracking-page-title);
  text-transform: uppercase;
  color: #7f9ab7;
  font-weight: 600;
}

.bt-page {
  flex: 1;
  padding: 14px 14px 24px;
  display: none;
  flex-direction: column;
  gap: 14px;
}

.bt-page.bt-page--active { display: flex; }

.bt-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  background: rgba(3, 11, 22, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bt-panel-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.bt-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 2px 8px;
  background: none;
  border: none;
  color: var(--bt-soft-text);
  font-family: var(--bt-font-base);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

.bt-tab__glyph { font-size: 18px; line-height: 1; color: var(--bt-soft-text); }

.bt-tab.bt-tab--active { color: var(--bt-primary); }
.bt-tab.bt-tab--active .bt-tab__glyph { color: var(--bt-primary); text-shadow: 0 0 10px rgba(24,185,255,0.6); }

/* ---------- Heartbeat strip ---------- */

.bt-heartbeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--bt-radius-card);
  background: var(--bt-card-bg);
  border: 1px solid var(--bt-card-border);
  font-size: 11px;
  color: var(--bt-soft-text);
}

/* ---------- Panels ---------- */

.bt-panel {
  border-radius: var(--bt-radius-panel);
  background: var(--bt-panel-bg-alt);
  border: 1px solid var(--bt-panel-border);
  box-shadow: var(--bt-glow-primary);
  padding: 14px 14px 16px;
}

.bt-panel--focus {
  border-radius: var(--bt-radius-focus-panel);
  background: var(--bt-focus-panel-bg);
  border: 1px solid var(--bt-focus-panel-border);
  box-shadow: var(--bt-glow-focus);
  padding: 16px 16px 18px;
}

.bt-panel-title {
  font-size: var(--bt-size-panel-title);
  font-weight: 700;
  color: var(--bt-color-panel-title);
  margin: 0 0 2px;
}

.bt-panel--focus .bt-panel-title { font-size: 19px; }

.bt-panel-subtitle {
  font-size: 11px;
  color: var(--bt-soft-text);
  margin: 0 0 10px;
}

.bt-panel-body { margin-top: 8px; }

.bt-empty-state {
  color: var(--bt-soft-text);
  font-size: 12px;
  text-align: center;
  padding: 18px 8px;
}

/* ---------- Stat cards — the primary metric unit ---------- */

.bt-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.bt-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--bt-radius-card);
  background: var(--bt-card-bg);
  border: 1px solid var(--bt-card-border);
  box-shadow: var(--bt-glow-primary);
  min-width: 0;
}

.bt-stat-card--healthy { box-shadow: var(--bt-glow-healthy); border-color: rgba(78, 224, 124, 0.24); }
.bt-stat-card--warning { box-shadow: var(--bt-glow-warning); border-color: rgba(255, 209, 92, 0.26); }
.bt-stat-card--danger  { box-shadow: var(--bt-glow-danger);  border-color: rgba(255, 93, 103, 0.28); }

.bt-stat-icon {
  font-size: 18px;
  color: var(--bt-primary);
  flex: none;
  width: 22px;
  text-align: center;
}

.bt-stat-text { min-width: 0; }

.bt-stat-label {
  display: block;
  font-size: var(--bt-size-stat-label);
  letter-spacing: var(--bt-tracking-stat-label);
  text-transform: uppercase;
  color: var(--bt-soft-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-stat-value {
  display: block;
  font-size: var(--bt-size-stat-value);
  font-weight: 700;
  color: var(--bt-bright-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Badges ---------- */

.bt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--bt-radius-pill);
  font-size: var(--bt-size-badge);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bt-badge--primary { background: var(--bt-badge-primary-bg); border: 1px solid var(--bt-badge-primary-border); color: var(--bt-badge-primary-fg); box-shadow: var(--bt-glow-primary); }
.bt-badge--healthy { background: var(--bt-badge-healthy-bg); border: 1px solid var(--bt-badge-healthy-border); color: var(--bt-badge-healthy-fg); box-shadow: var(--bt-glow-healthy); }
.bt-badge--warning { background: var(--bt-badge-warning-bg); border: 1px solid var(--bt-badge-warning-border); color: var(--bt-badge-warning-fg); box-shadow: var(--bt-glow-warning); }
.bt-badge--danger  { background: var(--bt-badge-danger-bg);  border: 1px solid var(--bt-badge-danger-border);  color: var(--bt-badge-danger-fg);  box-shadow: var(--bt-glow-danger); }

.bt-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Turn tape (Ocean/Tide states) ---------- */

.bt-turn-block { margin-top: 10px; }

.bt-turn-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: var(--bt-tracking-stat-label);
  text-transform: uppercase;
  color: var(--bt-soft-text);
  font-weight: 700;
  margin-bottom: 4px;
}

.bt-turn-tape {
  display: flex;
  gap: 3px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 4px;
}

.bt-turn-mark--bull { color: var(--bt-tape-bull); }
.bt-turn-mark--bear { color: var(--bt-tape-bear); }
.bt-turn-mark--neutral { color: var(--bt-tape-neutral); }

.bt-turn-phase {
  font-size: 11px;
  font-weight: 700;
}

.bt-turn-phase--ROLLING_TO_SHORT { color: var(--bt-turn-rolling-short); }
.bt-turn-phase--ROLLED_TO_SHORT { color: var(--bt-turn-rolled-short); }
.bt-turn-phase--CURLING_TO_LONG { color: var(--bt-turn-curling-long); }
.bt-turn-phase--CURLED_TO_LONG { color: var(--bt-turn-curled-long); }
.bt-turn-phase--BULL_PRESSURE_FADING,
.bt-turn-phase--BEAR_PRESSURE_FADING { color: var(--bt-turn-fading); }
.bt-turn-phase--DRIFTING,
.bt-turn-phase--UNKNOWN { color: var(--bt-turn-drifting); }

.bt-turn-detail {
  font-size: 11px;
  color: var(--bt-soft-text);
  margin-top: 2px;
}

/* ---------- Tables ---------- */

.bt-table-wrap { overflow-x: auto; border-radius: var(--bt-radius-card); }

.bt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.bt-table th {
  text-align: left;
  padding: 8px 10px;
  background: rgba(8, 29, 48, 0.5);
  color: var(--bt-soft-text);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.bt-table td {
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}

.bt-table tr:nth-child(even) td { background: rgba(7, 22, 39, 0.28); }

.bt-cell--success { color: var(--bt-success); font-weight: 600; }
.bt-cell--warning { color: var(--bt-warning); font-weight: 600; }
.bt-cell--danger  { color: var(--bt-danger);  font-weight: 600; }
.bt-cell--muted   { color: var(--bt-soft-text); }

/* ---------- Prose blocks (Big Dog / Top Opportunities narrative) ---------- */

.bt-prose {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bt-bright-text);
  white-space: pre-wrap;
}

.bt-review-item {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--bt-soft-text);
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.bt-review-item:first-child { border-top: none; }
.bt-review-item strong { color: var(--bt-bright-text); }