/* ============================================================
   CSS/COMPONENTS.CSS — Cards, Breakdown, Modal, Toast
   ============================================================ */

/* ---------- Summary Cards ---------- */
.summary-section { width: 100%; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.summary-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Colored top accent */
.summary-card--blue   { border-top: 3px solid var(--color-primary); }
.summary-card--green  { border-top: 3px solid var(--color-green); }
.summary-card--yellow { border-top: 3px solid var(--color-yellow); }
.summary-card--purple { border-top: 3px solid var(--color-purple); }
.summary-card--teal   { border-top: 3px solid var(--color-teal); }

.card-icon {
  font-size: 1.6rem;
  margin-bottom: var(--space-3);
  display: block;
}

.card-label {
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-2);
}

.card-value {
  font-size: var(--size-2xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-feature-settings: 'tnum';
}

.card-unit {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 3px;
}

.card-sub {
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ---------- Breakdown Section ---------- */
.breakdown-section { width: 100%; }

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}

.breakdown-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.breakdown-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.breakdown-name {
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breakdown-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: var(--size-xs);
  font-weight: 700;
}

.breakdown-badge--blue {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid rgba(37,99,235,0.2);
}

.breakdown-badge--green {
  background: var(--color-green-light);
  color: var(--color-green);
  border: 1px solid rgba(22,163,74,0.2);
}

.breakdown-rows { display: flex; flex-direction: column; gap: var(--space-3); }

.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.breakdown-row-label {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breakdown-row-value {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-text);
  font-feature-settings: 'tnum';
}

.breakdown-row-value--green  { color: var(--color-green); }
.breakdown-row-value--red    { color: var(--color-red); }
.breakdown-row-value--yellow { color: var(--color-yellow); }
.breakdown-row-value--blue   { color: var(--color-primary); }

.breakdown-progress { margin-top: var(--space-4); }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.progress-bar-track {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
}

.progress-bar-fill--blue  { background: linear-gradient(90deg, var(--color-primary), #60a5fa); }
.progress-bar-fill--green { background: linear-gradient(90deg, var(--color-green),  #4ade80); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-slow);
}

.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal--sm { max-width: 360px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-title { font-size: var(--size-lg); font-weight: 700; color: var(--color-text); }

.modal-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--size-md);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.modal-close:hover { background: var(--color-surface-2); color: var(--color-text); }

.modal-form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }

.form-label {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-hint {
  font-weight: 400;
  color: var(--color-text-dim);
  font-size: var(--size-xs);
}

.form-input {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.form-input--readonly { background: var(--color-surface-2); color: var(--color-text-muted); }
.form-input option { background: var(--color-surface); color: var(--color-text); }

.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Delete Modal Specifics */
.delete-confirm-text {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.delete-record-info {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.delete-info-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-xs);
}

.delete-info-label {
  color: var(--color-text-dim);
  font-weight: 500;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--size-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-normal);
  max-width: 340px;
}

.toast.show     { transform: translateY(0); opacity: 1; }
.toast--success { background: var(--color-green); }
.toast--error   { background: var(--color-red); }
.toast--info    { background: var(--color-primary); }

/* ---------- Source Compare Strip ---------- */
.source-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.source-compare-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.source-compare-card--dad { border-left: 4px solid var(--color-purple); }
.source-compare-card--jq  { border-left: 4px solid var(--color-primary); }

.sc-name { font-size: var(--size-lg); font-weight: 700; color: var(--color-text); min-width: 55px; }

.sc-metrics { display: flex; gap: var(--space-5); flex-wrap: wrap; flex: 1; }
.sc-metric  { display: flex; flex-direction: column; gap: 2px; }

.sc-metric-label {
  font-size: var(--size-xs); font-weight: 700;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}

.sc-metric-value {
  font-size: var(--size-md); font-weight: 700;
  color: var(--color-text); font-feature-settings: 'tnum';
}

.sc-metric-value--blue   { color: var(--color-primary); }
.sc-metric-value--yellow { color: var(--color-yellow);  }
.sc-metric-value--green  { color: var(--color-green);   }
.sc-metric-value--purple { color: var(--color-purple);  }

/* Legacy Tab Bar (removed as it's now in sidebar) */

/* ---------- Tab Panels ---------- */
.tab-panel        { display: flex; flex-direction: column; gap: var(--space-5); }
.tab-panel.hidden { display: none; }

/* ---------- Source Stats Row ---------- */
.source-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card--blue   { border-top: 3px solid var(--color-primary); }
.stat-card--yellow { border-top: 3px solid var(--color-yellow); }
.stat-card--green  { border-top: 3px solid var(--color-green); }
.stat-card--red    { border-top: 3px solid var(--color-red); }
.stat-card--purple { border-top: 3px solid var(--color-purple); }

.stat-label {
  font-size: var(--size-xs); font-weight: 700;
  color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: var(--space-2);
}

.stat-value {
  font-size: var(--size-xl); font-weight: 700;
  color: var(--color-text); font-feature-settings: 'tnum'; line-height: 1.1;
}

.stat-value--blue   { color: var(--color-primary); }
.stat-value--yellow { color: var(--color-yellow);  }
.stat-value--green  { color: var(--color-green);   }
.stat-value--red    { color: var(--color-red);     }
.stat-value--purple { color: var(--color-purple);  }
.stat-sub { font-size: var(--size-xs); color: var(--color-text-dim); margin-top: var(--space-1); }

/* ---------- Charts Side-by-Side ---------- */
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.chart-section--half { padding: var(--space-5); }

/* ---------- Date Range Query ---------- */
.range-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.range-controls {
  display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.range-field  { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 130px; }
.range-sep    { font-size: var(--size-sm); color: var(--color-text-muted); font-weight: 600; padding-bottom: 10px; flex-shrink: 0; }

.range-results        { display: flex; flex-direction: column; gap: var(--space-5); }
.range-results.hidden { display: none; }

/* Ensure summary cards inside range results are responsive */
.range-results .summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .range-results .summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
  }
  .range-results .stat-card {
    padding: var(--space-3);
  }
  .range-results .stat-value {
    font-size: var(--size-md);
  }
  .range-results .stat-label {
    font-size: 10px;
    margin-bottom: var(--space-1);
  }
}

.range-empty        { text-align: center; padding: var(--space-12); color: var(--color-text-muted); }
.range-empty.hidden { display: none; }
.range-empty .table-empty-icon { font-size: 3rem; display: block; margin-bottom: var(--space-3); opacity: 0.4; }

/* ---------- Misc ---------- */
.btn-sm  { padding: var(--space-1) var(--space-3) !important; font-size: var(--size-xs) !important; }
.th-note { text-align: left; min-width: 100px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .summary-cards  { grid-template-columns: repeat(2, 1fr); }
  .breakdown-grid { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }
  .toast          { bottom: var(--space-4); right: var(--space-4); left: var(--space-4); max-width: none; }
  .source-compare { grid-template-columns: 1fr; }
  .tab-btn        { padding: var(--space-2); font-size: var(--size-xs); }
  .range-controls { flex-direction: column; }
  .range-field    { width: 100%; }
}

@media (max-width: 480px) {
  .summary-cards    { grid-template-columns: 1fr; }
  .source-stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .stat-card { padding: var(--space-3) var(--space-3); }
  .stat-value { font-size: var(--size-lg); }
  .source-compare-card { padding: var(--space-3); gap: var(--space-3); }
  .sc-name { min-width: auto; font-size: var(--size-md); }
  .sc-metrics { gap: var(--space-3); }
}

@media (max-width: 380px) {
  .source-stats-row { grid-template-columns: 1fr; }
  .tab-btn { padding: var(--space-2) var(--space-3); font-size: 0.75rem; }
}