/* =============================================================================
   PAGES - Shared styles for wizard-based pages (training, prediction, mydata)
   ============================================================================= */

/* ---- Page Header ---- */
.page-header {
 background: #111827;
 padding: 20px 30px;
 border-radius: 12px;
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 margin-bottom: 24px;
}
.page-header h1 {
 color: #ffffff;
 font-size: 28px;
 margin-bottom: 8px;
}
.page-header .subtitle {
 color: #F59E0B;
 font-size: 14px;
 margin-bottom: 0;
}
.page-header a {
 color: #F59E0B;
 text-decoration: none;
 font-weight: 600;
 transition: color 0.2s;
}
.page-header a:hover {
 color: #D97706;
}

/* ---- Wizard ---- */
.wizard {
 background: white;
 border-radius: 12px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 overflow: hidden;
}
.wizard-header {
 background: #f7fafc;
 padding: 24px 30px;
 border-bottom: 1px solid #e2e8f0;
}
.wizard-body {
 padding: 30px;
}

/* ---- Steps indicator ---- */
.steps {
 display: flex;
 gap: 12px;
 margin-bottom: 12px;
}
.step {
 flex: 1;
 padding: 12px;
 background: #edf2f7;
 border-radius: 8px;
 text-align: center;
 font-weight: 500;
 color: #718096;
 cursor: pointer;
 transition: all 0.3s;
}
.step.active {
 background: #F59E0B;
 color: #0B0F14;
}
.step.completed {
 background: #FDE68A;
 color: #0B0F14;
 font-weight: 600;
}

/* ---- Step content ---- */
.step-content {
 display: none;
}
.step-content.active {
 display: block;
}

/* ---- Stat / Metric cards ---- */
.stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 16px;
 margin-bottom: 24px;
}
.stat-card {
 background: white;
 border: 1px solid #E5E7EB;
 border-radius: 10px;
 padding: 20px;
 text-align: center;
}
.stat-card .stat-label {
 color: #6B7280;
 font-size: 0.8125rem;
 margin-bottom: 4px;
}
.stat-card .stat-value {
 font-size: 1.5rem;
 font-weight: 700;
 color: #1a1a1a;
}

/* ---- Metric inline cards (training results) ---- */
.metric-card {
 background: white;
 border: 1px solid #E5E7EB;
 border-radius: 8px;
 padding: 16px;
 text-align: center;
}
.metric-label {
 color: #6B7280;
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: 4px;
}
.metric-value {
 font-size: 1.25rem;
 font-weight: 700;
 color: #1a1a1a;
}

/* ---- Tabs (mydata, simulation-style) ---- */
.tabs {
 display: flex;
 background: #f7fafc;
 border-bottom: 2px solid #e2e8f0;
}
.tab {
 flex: 1;
 padding: 16px 24px;
 background: none;
 border: none;
 font-size: 16px;
 font-weight: 500;
 color: #718096;
 cursor: pointer;
 transition: all 0.2s;
 position: relative;
}
.tab:hover {
 background: #edf2f7;
 color: #4a5568;
}
.tab.active {
 color: #F59E0B;
 background: white;
}
.tab.active::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 right: 0;
 height: 2px;
 background: #F59E0B;
}
.tab-content {
 display: none;
 padding: 24px;
}
.tab-content.active {
 display: block;
}

/* ---- Info panel ---- */
.info-panel {
 background: #F8FAFC;
 border: 1px solid #E2E8F0;
 border-radius: 8px;
 padding: 16px;
 margin-bottom: 20px;
 font-size: 0.875rem;
 line-height: 1.6;
}

/* ---- Alert boxes ---- */
.alert {
 padding: 12px 16px;
 border-radius: 8px;
 margin-bottom: 16px;
 font-size: 0.875rem;
}
.alert-success {
 background: #F0FDF4;
 color: #166534;
 border: 1px solid #BBF7D0;
}
.alert-info {
 background: #EFF6FF;
 color: #1E40AF;
 border: 1px solid #BFDBFE;
}
.alert-warning {
 background: #FFFBEB;
 color: #92400E;
 border: 1px solid #FDE68A;
}
.alert-error, .alert-danger {
 background: #FEF2F2;
 color: #991B1B;
 border: 1px solid #FECACA;
}

/* ---- Status tag/badge ---- */
.status-badge {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 12px;
 font-size: 0.75rem;
 font-weight: 600;
}
.status-badge.success { background: #D1FAE5; color: #065F46; }
.status-badge.warning { background: #FEF3C7; color: #92400E; }
.status-badge.error   { background: #FEE2E2; color: #991B1B; }
.status-badge.info    { background: #DBEAFE; color: #1E40AF; }

/* ---- Hidden utility ---- */
.hidden { display: none !important; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
 .steps { flex-wrap: wrap; gap: 8px; }
 .step { min-width: 80px; font-size: 0.8rem; padding: 8px; }
 .stats-grid { grid-template-columns: 1fr 1fr; }
 .tabs { flex-wrap: wrap; }
 .tab { font-size: 14px; padding: 12px 16px; }
}