/*
 * 053_predictions.css
 * SecureOneBank — Phase 10 Predictions & Insights Styling
 *
 * This stylesheet is fully self-contained and styles only:
 *   - predictions-card
 *   - prediction-block
 *   - confidence bar
 *   - recommendations list
 *   - warnings list
 *
 * Safe to drop in with zero conflicts.
 */

/* ---------------------------------------------
   CARD BASE
--------------------------------------------- */
.predictions-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  color: #eee;
}

.predictions-card .card-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
}

/* ---------------------------------------------
   LOADING STATE
--------------------------------------------- */
.predictions-loading {
  text-align: center;
  padding: 20px 0;
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------
   BLOCKS
--------------------------------------------- */
.prediction-block {
  margin-bottom: 20px;
}

.prediction-block h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.prediction-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.prediction-row > div {
  flex: 1;
}

.prediction-row .label {
  font-size: 0.85rem;
  color: #888;
}

.prediction-row .value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}

/* ---------------------------------------------
   CONFIDENCE BAR
--------------------------------------------- */
.confidence-bar {
  width: 100%;
  height: 10px;
  background: #222;
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0 5px;
}

.confidence-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0f0, #6f0);
  transition: width 0.6s ease;
}

.confidence-label {
  font-size: 0.85rem;
  color: #aaa;
}

.outlook-label {
  font-size: 0.9rem;
  margin-top: 4px;
  font-weight: 500;
}

/* ---------------------------------------------
   UTILIZATION BAND
--------------------------------------------- */
.util-band-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ccc;
}

/* ---------------------------------------------
   PAYMENT BEHAVIOR
--------------------------------------------- */
.warning-label {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #f66;
  font-weight: 600;
}

/* ---------------------------------------------
   RECOMMENDATIONS
--------------------------------------------- */
.recommendations-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.recommendations-list li {
  background: #181818;
  border: 1px solid #262626;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: #ddd;
}

.recommendations-list li .rec-title {
  font-weight: 600;
  color: #fff;
}

.recommendations-list li .rec-message {
  font-size: 0.85rem;
  color: #aaa;
}

/* ---------------------------------------------
   EARLY WARNINGS
--------------------------------------------- */
.warnings-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.warnings-list li {
  background: #1a0f0f;
  border: 1px solid #331010;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: #f88;
}

.warnings-list li .warn-title {
  font-weight: 600;
  color: #faa;
}

.warnings-list li .warn-detail {
  font-size: 0.85rem;
  color: #d88;
}