/* MEV AI Studio v2 — estensioni mev-common.css */

.studio-shell { padding: 1rem; max-width: 1400px; margin: 0 auto; }

.kpi-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: var(--surface, #14202f);
  border: 1px solid var(--border2, #2a3a4f);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  position: relative;
}
.kpi-card .kpi-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, #8c9bb1);
  margin-bottom: .35rem;
}
.kpi-card .kpi-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--mev-teal, #1a9aab);
  line-height: 1.1;
  font-family: 'Space Mono', ui-monospace, monospace;
}
.kpi-card .kpi-sub {
  font-size: .72rem;
  color: var(--text-muted, #8c9bb1);
  margin-top: .25rem;
}
.kpi-card.warn .kpi-value { color: var(--mev-orange, #e67e22); }
.kpi-card.err .kpi-value { color: var(--mev-red, #e74c3c); }
.kpi-card.ok .kpi-value { color: var(--mev-green, #2ecc71); }

.studio-grid-2 {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.studio-tile-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 1rem 0;
}
.studio-tile {
  background: linear-gradient(145deg, #14202f, #0e1a2b);
  border: 1px solid #2a3a4f;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all .15s ease;
  position: relative;
}
.studio-tile:hover {
  border-color: var(--mev-teal, #1a9aab);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26,154,171,.15);
}
.studio-tile .st-icon { font-size: 1.6rem; margin-bottom: .5rem; }
.studio-tile .st-name { font-size: 1rem; font-weight: 700; color: var(--text, #ecf0f5); }
.studio-tile .st-desc { font-size: .8rem; color: var(--text-muted, #8c9bb1); margin-top: .3rem; line-height: 1.4; }
.studio-tile .st-arrow { position: absolute; top: 1rem; right: 1rem; opacity: .35; }

.badge-status { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.badge-status.completed { background: rgba(46,204,113,.18); color: #2ecc71; border: 1px solid rgba(46,204,113,.4); }
.badge-status.running { background: rgba(26,154,171,.18); color: #1a9aab; border: 1px solid rgba(26,154,171,.4); }
.badge-status.queued, .badge-status.planning { background: rgba(120,140,160,.18); color: #8c9bb1; border: 1px solid rgba(120,140,160,.4); }
.badge-status.failed, .badge-status.cancelled { background: rgba(231,76,60,.18); color: #e74c3c; border: 1px solid rgba(231,76,60,.4); }
.badge-status.awaiting_approval { background: rgba(230,126,34,.18); color: #e67e22; border: 1px solid rgba(230,126,34,.4); }
.badge-status.rolled_back { background: rgba(155,89,182,.18); color: #b97fdc; border: 1px solid rgba(155,89,182,.4); }

.badge-breaker { display: inline-block; padding: .12rem .45rem; border-radius: 8px; font-size: .65rem; font-weight: 700; }
.badge-breaker.closed { background: rgba(46,204,113,.15); color: #2ecc71; }
.badge-breaker.half_open { background: rgba(230,126,34,.15); color: #e67e22; }
.badge-breaker.open { background: rgba(231,76,60,.18); color: #e74c3c; }

.studio-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.studio-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #8c9bb1); padding: .55rem .65rem; border-bottom: 1px solid #2a3a4f; }
.studio-table td { padding: .55rem .65rem; border-bottom: 1px solid rgba(60,80,110,.25); vertical-align: middle; }
.studio-table tr:hover td { background: rgba(26,154,171,.04); }
.studio-table td.mono { font-family: 'Space Mono', ui-monospace, monospace; font-size: .78rem; }
.studio-table .row-clickable { cursor: pointer; }

.task-side {
  position: fixed; top: 0; right: 0; bottom: 0; width: 540px; max-width: 100vw;
  background: var(--surface, #14202f); border-left: 1px solid #2a3a4f;
  box-shadow: -8px 0 32px rgba(0,0,0,.4); padding: 1rem 1.2rem;
  overflow-y: auto; z-index: 1000; transform: translateX(100%); transition: transform .2s;
}
.task-side.open { transform: translateX(0); }
.task-side .ts-close { float: right; background: none; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; }
.task-side h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.task-side .ts-goal { font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.5; }

.event-log { background: #0a1320; border: 1px solid #1f2d40; border-radius: 8px; padding: .6rem; font-family: 'Space Mono', monospace; font-size: .72rem; max-height: 320px; overflow-y: auto; }
.event-log .ev-row { padding: .15rem 0; }
.event-log .ev-ts { color: #5a6c80; }
.event-log .ev-type { color: var(--mev-teal); margin-right: .4rem; }
.event-log .ev-error { color: var(--mev-red); }
.event-log .ev-ok { color: var(--mev-green); }

.form-row { display: flex; gap: .5rem; margin-bottom: .65rem; flex-wrap: wrap; }
.form-row label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .2rem; }
.form-row input, .form-row select, .form-row textarea {
  background: var(--input-bg, #0f1a2a); border: 1px solid #2a3a4f; color: var(--text, #ecf0f5);
  padding: .45rem .65rem; border-radius: 6px; font-size: .85rem; width: 100%; font-family: inherit;
}
.form-row textarea { min-height: 80px; resize: vertical; }
.form-row .grow { flex: 1; min-width: 200px; }

.cost { font-family: 'Space Mono', monospace; color: var(--mev-gold, #F5C20C); }
.muted { color: var(--text-muted, #8c9bb1); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #2a3a4f; border-top-color: var(--mev-teal); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-mini { background: transparent; border: 1px solid #2a3a4f; color: var(--text-muted); padding: .25rem .55rem; border-radius: 6px; font-size: .72rem; cursor: pointer; font-family: inherit; }
.btn-mini:hover { border-color: var(--mev-teal); color: var(--mev-teal); }
.btn-mini.danger:hover { border-color: var(--mev-red); color: var(--mev-red); }
.btn-mini.ok { border-color: rgba(46,204,113,.5); color: #2ecc71; }
.btn-mini.ok:hover { background: rgba(46,204,113,.1); }

.section-card { background: var(--surface, #14202f); border: 1px solid #2a3a4f; border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.section-card h2 { margin: 0 0 .8rem; font-size: 1rem; color: var(--text, #ecf0f5); font-weight: 700; }
.section-card h2 .accent { color: var(--mev-teal, #1a9aab); }