/* ---------------------------------------------------------------------
   style.css - dark theme for the coinbase-trader dashboard
--------------------------------------------------------------------- */
:root {
  --bg: #0d1117;
  --card: #161b22;
  --border: #30363d;
  --accent: #58a6ff;
  --green: #3fb950;
  --red: #f85149;
  --yellow: #d29922;
  --text: #e6edf3;
  --text-dim: #8b949e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a {
  color: var(--accent);
}

/* ---------- Layout ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

.sidebar h1 {
  font-size: 16px;
  padding: 0 20px 16px 20px;
  margin: 0 0 8px 0;
  border-bottom: 1px solid var(--border);
}

.nav-item {
  padding: 12px 20px;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: #1c2229;
  color: var(--text);
}

.nav-item.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: #1c2229;
}

.badge {
  background: var(--red);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  min-width: 16px;
  text-align: center;
}

.main {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

h2 {
  margin-top: 0;
}

/* ---------- Banner ---------- */
.paper-banner {
  background: var(--yellow);
  color: #1a1300;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-weight: 600;
  display: none;
}

.paper-banner.show {
  display: block;
}

/* ---------- Cards / grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
}

.card .label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.card .value {
  font-size: 28px;
  font-weight: 700;
}

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.pill.running {
  background: rgba(63, 185, 80, 0.15);
  color: var(--green);
}

.pill.stopped {
  background: rgba(248, 81, 73, 0.15);
  color: var(--red);
}

.pill.buy {
  background: rgba(63, 185, 80, 0.15);
  color: var(--green);
}

.pill.sell {
  background: rgba(248, 81, 73, 0.15);
  color: var(--red);
}

.pill.hold {
  background: rgba(139, 148, 158, 0.15);
  color: var(--text-dim);
}

/* ---------- Buttons ---------- */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

button:hover {
  opacity: 0.85;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #04101f;
}

.btn-green {
  background: var(--green);
  color: #04150a;
}

.btn-red {
  background: var(--red);
  color: #200302;
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

th {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: #1c2229;
}

tr:last-child td {
  border-bottom: none;
}

.positive {
  color: var(--green);
  font-weight: 600;
}

.negative {
  color: var(--red);
  font-weight: 600;
}

.empty-row td {
  text-align: center;
  color: var(--text-dim);
  padding: 24px;
}

/* ---------- Settings form ---------- */
.settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 900px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  color: var(--text-dim);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
}

.form-group.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* ---------- Login modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  width: 320px;
}

.modal h2 {
  margin-top: 0;
}

.modal input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  color: var(--text);
  margin-bottom: 12px;
  font-size: 14px;
}

.modal .error {
  color: var(--red);
  font-size: 13px;
  margin-bottom: 10px;
  display: none;
}

/* ---------- Toasts ---------- */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}

.toast {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: slide-in 0.2s ease;
}

.toast.success {
  border-left-color: var(--green);
}

.toast.error {
  border-left-color: var(--red);
}

@keyframes slide-in {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.hidden {
  display: none !important;
}
/* ============================================================
   MOBILE ADDITIONS
   ============================================================ */
.mobile-header{display:none;position:sticky;top:0;z-index:200;background:#1a1f2e;border-bottom:1px solid #2a2f42;padding:0 16px;height:52px;align-items:center;justify-content:space-between}
.mobile-header-title{font-size:16px;font-weight:700;color:#4d9eff}
.mobile-logout-btn{background:transparent;border:1px solid #2a2f42;color:#8892a4;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer}
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:#1a1f2e;border-top:1px solid #2a2f42;height:60px;padding-bottom:env(safe-area-inset-bottom,0)}
.bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2px;border:none;background:transparent;color:#8892a4;cursor:pointer;padding:6px 4px;min-height:44px;font-size:10px;border-radius:0;margin:0;position:relative}
.bottom-nav .nav-item .nav-icon{font-size:18px;line-height:1}
.bottom-nav .nav-item .nav-label{font-size:10px;line-height:1}
.bottom-nav .nav-item.active{color:#4d9eff}
.bottom-nav .nav-item .badge{position:absolute;top:6px;right:calc(50% - 18px);min-width:16px;height:16px;font-size:9px;padding:0 4px;line-height:16px}
@media(max-width:768px){
  .mobile-header{display:flex}
  .bottom-nav{display:flex}
  .sidebar{display:none!important}
  .app-shell{display:block}
  .main{padding-bottom:calc(60px + env(safe-area-inset-bottom,0));padding-top:0}
  .paper-banner{font-size:11px;padding:8px 12px}
  .main h2{font-size:16px;margin-bottom:12px}
  .grid{grid-template-columns:1fr!important;gap:10px}
  .card{padding:14px}
  .card .value{font-size:22px}
  .card .label{font-size:11px}
  table{font-size:12px}
  th,td{padding:8px 10px;white-space:nowrap}
  .main .tab-panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #btn-start-bot,#btn-stop-bot{padding:8px 14px;font-size:13px}
  .settings-form{grid-template-columns:1fr!important}
  #toast-container{bottom:70px!important}
  #btn-logout-sidebar{display:none}
}
@media(min-width:769px){.mobile-header{display:none}.bottom-nav{display:none}}

/* ---------- AI Watchlist ---------- */
.ai-watchlist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ai-watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.ai-wl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.ai-wl-card.conv-green { border-color: rgba(63, 185, 80, 0.55); }
.ai-wl-card.conv-yellow { border-color: rgba(210, 153, 34, 0.55); }
.ai-wl-card.conv-red { border-color: rgba(248, 81, 73, 0.45); }
.ai-wl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ai-wl-head strong { font-size: 1.05rem; }
.ai-conv-num { margin-left: auto; color: var(--text-dim); font-size: 0.85rem; }
.ai-fut-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.15);
  color: var(--accent);
  border: 1px solid rgba(88, 166, 255, 0.35);
}
.ai-conv-bar {
  height: 6px;
  background: #21262d;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ai-conv-fill {
  height: 100%;
  background: linear-gradient(90deg, #3fb950, #58a6ff);
  border-radius: 999px;
}
.ai-wl-card.conv-yellow .ai-conv-fill { background: linear-gradient(90deg, #d29922, #f0c14b); }
.ai-wl-card.conv-red .ai-conv-fill { background: linear-gradient(90deg, #f85149, #ff7b72); }
.ai-thesis {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.35;
  min-height: 2.5em;
}
.ai-score-row {
  display: grid;
  grid-template-columns: 72px 1fr 28px;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.ai-score-track {
  height: 4px;
  background: #21262d;
  border-radius: 999px;
  overflow: hidden;
}
.ai-score-fill { height: 100%; border-radius: 999px; }
.ai-score-fill.pos { background: var(--green); }
.ai-score-fill.neg { background: var(--red); }