@import url("./base.css");

/* ===== HEADER NAVIGATION BUTTONS ===== */
.nav-btn{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;
  cursor:pointer;
  padding:clamp(8px,1.5vw,12px) clamp(14px,2vw,20px);
  border-radius:10px;
  font-weight:700;
  font-size:clamp(0.85rem,1.2vw,1rem);
  transition:all .2s cubic-bezier(.2,.9,.2,1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 4px 12px rgba(10,132,255,0.2);
  min-height:44px;
  white-space:nowrap;
}

.nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,132,255,0.3);
  opacity:0.95;
}

.nav-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(10,132,255,0.2);
}

.nav-btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
}

.nav-btn--secondary{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  padding:clamp(6px,1.5vw,10px) clamp(12px,2vw,18px);
}

.nav-btn--secondary:hover{
  background:rgba(10,132,255,0.1);
}

.nav-btn--success{
  background:linear-gradient(135deg,var(--success),#1ab85f);
  color:#fff;
}

.nav-btn--success:hover{
  box-shadow:0 8px 24px rgba(40,199,111,0.3);
}

@media(max-width:768px){
  .nav-btn{
    padding:8px 12px;
    font-size:0.85rem;
    min-height:40px;
  }
}

@media(max-width:600px){
  .nav-btn{
    padding:6px 10px;
    font-size:0.8rem;
    min-height:38px;
    border-radius:8px;
  }
  
  .nav-btn--secondary{
    padding:4px 8px;
  }
}

@media(max-width:480px){
  .nav-btn{
    padding:6px 10px;
    font-size:0.75rem;
    min-height:36px;
    border-radius:6px;
  }
}

/* Trader page — monitoring, live metrics, iOS-clean and performant */
.monitor-card{padding:18px;border-radius:12px;background:var(--surface);border:1px solid rgba(11,18,32,0.035);width:100%;box-sizing:border-box}
.monitor-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.monitor-title{font-weight:700;color:var(--text);white-space:nowrap}
.connection-status{color:var(--muted);font-size:clamp(0.85rem,1.5vw,0.95rem)}

.monitor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:14px;width:100%;box-sizing:border-box}
.monitor-item{background:var(--surface);padding:14px;border-radius:12px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:all .2s ease}
.monitor-label{font-size:clamp(0.8rem,1.2vw,0.85rem);color:var(--muted)}
.monitor-value{font-weight:800;font-size:clamp(1rem,2vw,1.15rem);margin-top:6px;color:var(--text)}

.volatility-meter{height:8px;background:rgba(11,18,32,0.04);border-radius:999px;overflow:hidden;margin-top:10px}
.volatility-fill{height:100%;width:40%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s cubic-bezier(.2,.9,.2,1);box-shadow:0 8px 22px rgba(10,132,255,0.08)}

.viability-badge{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(11,18,32,0.04);font-weight:700;color:var(--muted);font-size:0.85rem}

/* Animated indicator for live metrics (subtle) */
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 8px 18px rgba(10,132,255,0.12);display:inline-block;vertical-align:middle;margin-right:8px}
.monitor-item.sheen::after{content:"";position:absolute;left:-120%;top:0;width:36%;height:100%;transform:skewX(-12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);opacity:0;pointer-events:none}
.monitor-item.sheen.sheen--on-hover:hover::after{opacity:1;animation:sheenMove 1000ms cubic-bezier(.2,.8,.2,1)}

/* subtle pulsing when market is live */
.live-pulse{animation:pulseScale 1400ms ease-in-out infinite}

@media (max-width:900px){
  .monitor-grid{grid-template-columns:repeat(2,1fr)}\n  .monitor-header{flex-direction:column;align-items:flex-start;gap:8px}
  .nib-container{padding:10px}
}

@media (max-width:700px){
  .monitor-grid{grid-template-columns:1fr}
  .monitor-header{flex-direction:column;align-items:flex-start;gap:8px}
}

@media(max-width:600px){
  .monitor-grid{grid-template-columns:1fr;gap:12px}
  .monitor-item{padding:12px}
  .controls{flex-direction:column}
  .controls button{width:100%}
  .regulators{grid-template-columns:1fr;gap:12px}
  #derivApiContainer{flex-direction:column}
  #derivApiContainer input,#derivApiContainer button{width:100%}
}

@media(max-width:480px){
  .monitor-grid{grid-template-columns:1fr;gap:8px}
  .monitor-item{padding:10px}
  .card-value{font-size:16px}
  .controls{padding:8px;flex-direction:column}
  .simulation-panel{padding:8px}
  .monitor-label{font-size:0.75rem}
  .monitor-value{font-size:0.95rem}
  table{font-size:0.7rem;width:100%;overflow-x:auto;display:block}
  thead{display:none}
  tbody{display:block;width:100%}
  tr{display:block;margin-bottom:12px;border:1px solid rgba(11,18,32,0.04);border-radius:8px;padding:10px}
  td{display:block;text-align:right;padding:6px 0;border:none}
  td:before{content:attr(data-label);float:left;font-weight:600;color:var(--text)}
  .logs-container{max-height:120px}
  .api-badge{font-size:11px;padding:4px 8px}
}

.volatility-meter{height:8px;background:rgba(11,18,32,0.04);border-radius:999px;overflow:hidden;margin-top:10px}
.volatility-fill{height:100%;width:40%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s cubic-bezier(.2,.9,.2,1);box-shadow:0 8px 22px rgba(10,132,255,0.08)}

.viability-badge{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(11,18,32,0.04);font-weight:700;color:var(--muted)}

/* Animated indicator for live metrics (subtle) */
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 8px 18px rgba(10,132,255,0.12);display:inline-block;vertical-align:middle;margin-right:8px}
.monitor-item.sheen::after{content:"";position:absolute;left:-120%;top:0;width:36%;height:100%;transform:skewX(-12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);opacity:0;pointer-events:none}
.monitor-item.sheen.sheen--on-hover:hover::after{opacity:1;animation:sheenMove 1000ms cubic-bezier(.2,.8,.2,1)}

/* subtle pulsing when market is live */
.live-pulse{animation:pulseScale 1400ms ease-in-out infinite}

@media (max-width:700px){.monitor-grid{grid-template-columns:1fr}.monitor-header{flex-direction:column;align-items:flex-start;gap:8px}}

/* Layout containers and controls (light, neutral) */
.nib-container{max-width:1200px;margin:0 auto;padding:12px}
.card.nib{background:var(--surface);border-radius:12px;padding:18px;border:1px solid rgba(11,18,32,0.03)}
.card-title{font-size:13px;color:var(--muted);margin-bottom:8px}
.card-value{font-size:22px;font-weight:700;color:var(--text)}

.controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.5));border-radius:12px}
.btn-start{background:var(--success);color:#fff}.btn-stop{background:var(--danger);color:#fff}.btn-trade{background:var(--accent);color:#fff}
.btn:hover{transform:translateY(-2px);opacity:.98}

.regulators{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:18px 0;padding:12px;border-radius:12px}
.regulator{background:var(--surface);padding:12px;border-radius:8px;border:1px solid rgba(11,18,32,0.03);min-width:0;word-wrap:break-word;overflow-wrap:break-word}
.regulator label{display:block;font-weight:600;color:var(--muted);margin-bottom:8px}
.regulator input[type=range]{width:100%;height:8px;border-radius:6px;background:rgba(11,18,32,0.06);outline:none}
.regulator input[type=number]{width:100%;padding:8px;border:1px solid rgba(11,18,32,0.04);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(250,250,251,0.95));color:var(--text);font-size:14px}

.charts{display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-bottom:18px}
@media(max-width:768px){.charts{grid-template-columns:1fr}}
.chart-container{background:var(--surface);border-radius:12px;padding:12px;height:250px;border:1px solid rgba(11,18,32,0.03);position:relative;min-width:0;overflow:hidden}

.trades-container{background:var(--surface);border-radius:12px;padding:14px;margin-bottom:18px;border:1px solid rgba(11,18,32,0.03)}
table{width:100%;border-collapse:collapse}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid rgba(11,18,32,0.04)}th{color:var(--muted);font-size:13px}

.api-status{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.api-badge{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border-radius:8px;border:1px solid rgba(11,18,32,0.03);font-size:13px}
.api-dot{width:8px;height:8px;border-radius:50%}.api-online{background:var(--success)}.api-offline{background:var(--danger)}

.logs-container{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:8px;padding:12px;margin-top:12px;max-height:200px;overflow-y:auto;font-family:monospace;font-size:12px}
.log-entry{padding:6px 0;border-bottom:1px solid rgba(11,18,32,0.03)}.log-time{color:var(--accent)}.log-info{color:var(--success)}.log-error{color:var(--danger)}.log-warn{color:#f59e0b}

.simulation-panel{background:rgba(10,132,255,0.06);border:1px solid rgba(10,132,255,0.08);border-radius:12px;padding:12px;margin:12px 0}
.simulation-active{display:block}
@keyframes pulse{0%{border-color:var(--accent)}50%{border-color:color-mix(in srgb,var(--accent) 60%, #fff 40%)}100%{border-color:var(--accent)}}
.simulation-timer{font-size:18px;font-weight:700;color:var(--accent);text-align:center;margin:10px 0}
.simulation-result{display:none}
.simulation-good{background:rgba(40,199,111,0.08);color:var(--success);display:block}.simulation-bad{background:rgba(239,68,68,0.06);color:var(--danger);display:block}

.error-message{color:var(--danger);background-color:rgba(255,107,107,0.08);padding:8px;border-radius:6px;margin-top:10px;text-align:center;font-size:.9rem}
.success-message{color:var(--success);background-color:rgba(40,199,111,0.06);padding:8px;border-radius:6px;margin-top:10px;text-align:center;font-size:.9rem}

.terms-container{margin-top:18px;text-align:center}.terms-btn{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;font-weight:700}

#derivApiContainer{background:var(--surface);border-radius:12px;padding:12px;margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid rgba(11,18,32,0.03)}
#derivApiContainer input{flex-grow:1;padding:10px 12px;border:1px solid rgba(11,18,32,0.04);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(250,250,251,0.95));color:var(--text);font-size:14px}
#derivApiContainer input::placeholder{color:var(--muted)}
#derivApiContainer button{padding:10px 14px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .12s;background:var(--accent);color:#fff}
#derivApiContainer button:hover{transform:translateY(-2px)}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media(max-width:768px){
	.charts{grid-template-columns:1fr}
	.chart-container{height:200px}
	.controls{flex-direction:column}
	.controls button{width:100%}
	.regulators{grid-template-columns:1fr}
	.trading-grid{grid-template-columns:1fr}
	#derivApiContainer{flex-direction:column}
	#derivApiContainer input,#derivApiContainer button{width:100%}
	table{font-size:0.85rem}
	th,td{padding:8px 10px}
}

@media(max-width:480px){
	.monitor-grid{grid-template-columns:1fr}
	.monitor-item{padding:10px}
	.card-value{font-size:18px}
	.controls{padding:10px}
	.simulation-panel{padding:10px}
	table{font-size:0.75rem}
	th,td{padding:6px}
	.logs-container{max-height:150px}
	.api-badge{font-size:12px;padding:6px 10px}
}