/* Tuleva disainisüsteemi tokenid (TulevaEE/onboarding-client: src/components/_variables.scss). */
:root {
  --navy: #002f63;
  --bright-blue: #00aeea;
  --blue: #006ce6;
  --red: #db2200;
  --green: #008300;
  --yellow: #fce228;
  --note-bg: #fff6d9;
  --note-border: #faeed0;
  --text-primary: #293036;
  --text-secondary: #6b7074;
  --text-tertiary: #8a8d91;
  --text-navy-secondary: #5c738c;
  --gray-bg-1: #fafbfc;
  --gray-bg-2: #f5f7f9;
  --gray-border-2: #d6dee6;
  --gray-border-3: #c8d0d8;
  --blue-bg-1: #f2fafe;
  --blue-border-1: #d3e8f5;
  --box-shadow-calculator: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 1px 3px 0 rgba(0, 0, 0, 0.04),
    0 3px 9px 0 rgba(0, 0, 0, 0.04), 0 6px 18px 0 rgba(0, 0, 0, 0.04);

  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--text-primary);
  --bs-primary: var(--blue);
  --bs-primary-rgb: 0, 108, 230;
  --bs-link-color: var(--blue);
  --bs-border-color: var(--gray-border-3);
}

html { min-width: 320px; -webkit-font-smoothing: antialiased; }
body { background: #fff; color: var(--text-primary); }

.container { max-width: 960px; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 575px) { .container { padding-left: 1rem; padding-right: 1rem; } }

h1, h2, h3, .text-navy { color: var(--navy); }
h1 { font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 500; }
.text-secondary { color: var(--text-secondary) !important; }
.small-muted { color: var(--text-tertiary); font-size: 0.875rem; }

.card { border-color: var(--gray-border-2); border-radius: 0.5rem; }
.card-calculator { box-shadow: var(--box-shadow-calculator); border: 0; }

.btn-primary { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: #005bc2; --bs-btn-hover-border-color: #005bc2; }
.btn-outline-primary { --bs-btn-color: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue); --bs-btn-hover-border-color: var(--blue); --bs-btn-active-bg: var(--blue); --bs-btn-active-border-color: var(--blue); }

.form-control, .form-select { border-color: var(--gray-border-3); }
.form-label { font-weight: 500; margin-bottom: 0.25rem; }
.form-text { color: var(--text-tertiary); }

.note { background: var(--note-bg); border: 1px solid var(--note-border); border-radius: 0.5rem; padding: 0.75rem 1rem; }

.answer { background: var(--blue-bg-1); border: 1px solid var(--blue-border-1); border-radius: 0.5rem; padding: 1rem 1.25rem; font-size: 1.125rem; color: var(--navy); }
.answer strong { font-weight: 700; }

.metric { border: 1px solid var(--gray-border-2); border-radius: 0.5rem; padding: 0.75rem 1rem; height: 100%; }
.metric .value { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.metric .label { font-size: 0.875rem; color: var(--text-secondary); }

.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.75rem; border-left: 2px solid var(--gray-border-2); margin-left: 0.5rem; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 0.25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bright-blue); }
.timeline .when { font-weight: 700; color: var(--navy); }

.scenario-tabs .btn { text-align: left; }
.scenario-tabs .btn small { display: block; font-weight: 400; opacity: 0.85; }

.table-compare th { color: var(--text-navy-secondary); font-weight: 500; font-size: 0.875rem; }
.table-compare td.best { font-weight: 700; color: var(--green); }

.chart-wrap { position: relative; height: 320px; }
@media (max-width: 575px) { .chart-wrap { height: 260px; } }

footer { color: var(--text-tertiary); font-size: 0.875rem; }

/* Eeltäidetud väljad ja allikad */
.is-prefilled { background-color: var(--blue-bg-1) !important; border-color: var(--bright-blue) !important; }
.src-chip { display: inline-block; margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; vertical-align: middle; }
.src-chip.tuleva { background: var(--blue-bg-1); color: var(--blue); border: 1px solid var(--blue-border-1); }
.src-chip.stat { background: #eef7ee; color: var(--green); border: 1px solid #cfe6cf; }
.src-chip.ska { background: var(--gray-bg-2); color: var(--text-navy-secondary); border: 1px solid var(--gray-border-2); }
.src-chip.puudub { background: var(--note-bg); color: #7a5c00; border: 1px solid var(--note-border); }
.prefill-panel { border: 1px solid var(--blue-border-1); background: var(--blue-bg-1); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.prefill-panel table { margin: 0; font-size: 0.875rem; --bs-table-bg: transparent; }
.prefill-panel code { font-size: 0.75rem; color: var(--text-navy-secondary); }
details summary { cursor: pointer; }