:root {
  color-scheme: dark;
  --bg: #1b2234;
  --surface: #222a3f;
  --surface-raised: #293047;
  --surface-soft: #1e2638;
  --border: #323d55;
  --border-strong: #3f4d6a;
  --ink: #c3c5cb;
  --muted: #8a90a0;
  --accent: #9b87f5;
  --accent-strong: #b7a8ff;
  --radius: 14px;
  --input-bg: #1a2132;
  --input-group-bg: #222a3f;
  --navbar-bg: rgb(27 8 40 / 94%);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-raised: #eef1f7;
  --surface-soft: #f8f9fc;
  --border: #dde2ed;
  --border-strong: #c4cad8;
  --ink: #171a21;
  --muted: #596171;
  --accent: #7c6edb;
  --accent-strong: #6c5ce7;
  --radius: 14px;
  --input-bg: #ffffff;
  --input-group-bg: #f0f2f7;
  --navbar-bg: rgba(255, 255, 255, .95);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-navbar { background: var(--navbar-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.navbar-brand { color: var(--ink); font-weight: 650; letter-spacing: -.01em; }
.navbar-brand:hover { color: var(--ink); }
.app-navbar .nav-link { color: var(--muted); }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { color: var(--ink); }
.app-navbar .btn-outline-light {
  color: var(--muted);
  border-color: var(--border-strong);
}
.app-navbar .btn-outline-light:hover {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--border-strong);
}
.brand-mark { color: var(--accent-strong); }
main.container { max-width: 1180px; padding-bottom: 4rem; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
.text-muted { color: var(--muted) !important; }

.dashboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.dashboard-actions { display: flex; align-items: center; gap: .5rem; }
.section-kicker {
  margin: 0 0 .35rem;
  color: var(--accent-strong);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.workflow-tabs {
  display: flex;
  gap: .5rem;
  padding: .35rem;
  margin-bottom: 1.5rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.workflow-tab {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 46px;
  padding: .65rem .85rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 9px;
  text-decoration: none;
}
.workflow-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .025); }
.workflow-tab.active {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.workflow-tab strong {
  min-width: 1.55rem;
  padding: .12rem .4rem;
  color: var(--ink);
  background: var(--surface-raised);
  border-radius: 999px;
  font-size: .76rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.status-dot { width: .52rem; height: .52rem; border-radius: 50%; }
.status-dot-open { background: #78dba9; box-shadow: 0 0 0 3px rgba(120, 219, 169, .12); }
.status-dot-progress { background: #b7a8ff; box-shadow: 0 0 0 3px rgba(183, 168, 255, .13); }
.status-dot-documents { background: #72b8ff; box-shadow: 0 0 0 3px rgba(114, 184, 255, .13); }
.tab-intro { display: flex; justify-content: space-between; align-items: end; margin-bottom: .9rem; }
.tab-intro h2 { margin: 0 0 .2rem; font-size: 1rem; }
.tab-intro p { margin: 0; color: var(--muted); font-size: .88rem; }
.request-status {
  padding: .08rem .45rem;
  color: #9ee8c2;
  background: rgba(80, 190, 135, .1);
  border: 1px solid rgba(120, 219, 169, .22);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
  text-transform: capitalize;
}
.request-status.is-progress {
  color: #d8d0ff;
  background: rgba(155, 135, 245, .12);
  border-color: rgba(183, 168, 255, .25);
}
.document-button { display: inline-flex; margin-top: 1rem; min-height: 38px; align-items: center; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 3.5rem 1.5rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}
.empty-state strong { color: var(--ink); font-size: 1.05rem; }

.document-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.document-page-heading h1 { margin: 0 0 .4rem; font-size: 1.65rem; }
.document-page-heading p:not(.section-kicker) { margin: 0; max-width: 64ch; color: var(--muted); }
.contract-form { display: flex; flex-direction: column; gap: 1rem; }
.contract-section {
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contract-section-title { display: flex; gap: .9rem; margin-bottom: 1.2rem; }
.contract-section-title > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #0b0d12;
  background: var(--accent-strong);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
}
.contract-section-title h2 { margin: 0; font-size: 1rem; }
.contract-section-title p { margin: .18rem 0 0; color: var(--muted); font-size: .84rem; }
.contract-fields { display: grid; gap: 1rem; }
.contract-fields.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contract-fields.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contract-fields label { color: var(--muted); font-size: .82rem; }
.contract-fields label .form-control { margin-top: .38rem; }
.contract-fields .full-width { grid-column: 1 / -1; }
.position-editor { overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.position-editor-head, .position-editor-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 170px;
  gap: .75rem;
  align-items: center;
  padding: .75rem;
  border-bottom: 1px solid var(--border);
}
.position-editor-head { color: var(--muted); background: var(--surface-soft); font-size: .75rem; font-weight: 700; }
.contract-total { display: flex; justify-content: flex-end; gap: 1.5rem; padding: 1rem; background: var(--surface-soft); }
.contract-total span { color: var(--muted); }
.contract-total strong { min-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.contract-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.contract-submit p { margin: 0; color: var(--muted); font-size: .88rem; }
.document-packages { display: flex; flex-direction: column; gap: 1rem; }
.document-package {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.package-main { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; }
.package-identity h2 { margin: .28rem 0 .1rem; font-size: 1.05rem; }
.package-identity p { display: inline; margin: 0 .75rem 0 0; color: var(--muted); font-size: .85rem; }
.package-number { color: var(--accent-strong); font-size: .74rem; font-weight: 750; letter-spacing: .07em; }
.package-status {
  align-self: start;
  padding: .3rem .65rem;
  color: #d8d0ff;
  background: rgba(155, 135, 245, .12);
  border: 1px solid rgba(183, 168, 255, .25);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
}
.package-status.sent { color: #9ee8c2; background: rgba(80, 190, 135, .1); border-color: rgba(120, 219, 169, .22); }
.package-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  padding: 1rem 1.3rem;
  background: var(--surface-soft);
  border-block: 1px solid var(--border);
}
.package-files a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  text-decoration: none;
}
.package-files a:hover { border-color: var(--accent); }
.package-files a span { color: var(--accent-strong); font-size: .7rem; font-weight: 800; }
.package-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.3rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.package-send { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex: 1; }
.package-send > span { color: var(--muted); font-size: .84rem; }
.package-send strong { color: var(--ink); }

.request-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  overflow: hidden;
}

.request-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.request-title { font-size: 1.1rem; margin: 0 0 .55rem; max-width: 70ch; }
.customer-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--muted); font-size: .92rem; }
.customer-meta strong { color: var(--ink); font-weight: 600; }

.request-message {
  max-width: 38rem;
  margin: 0;
  padding: .85rem 1rem;
  color: #dfe4ee;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  line-height: 1.5;
}

.offer-form { padding: 1.5rem; }
.offer-details { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.offer-details label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: .4rem; }
.detailed-field textarea { line-height: 1.55; resize: vertical; }
.timeline-field { grid-column: 1 / -1; }
.timeline-field textarea { line-height: 1.55; resize: vertical; }
.form-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.form-section-heading h3 { font-size: 1rem; margin: 0; }
.form-section-heading p { color: var(--muted); font-size: .86rem; margin: 0; }
.offer-grid { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.offer-row {
  display: grid;
  grid-template-columns: 3rem minmax(260px, 1fr) minmax(140px, .42fr) minmax(160px, .5fr);
  gap: .75rem;
  align-items: center;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--border);
}

.offer-row:last-child { border-bottom: 0; }
.offer-row-head { background: var(--surface-soft); color: var(--muted); font-size: .78rem; font-weight: 650; }
.position-number { color: var(--muted); font-variant-numeric: tabular-nums; }
.service-name { font-weight: 570; line-height: 1.35; }
.service-note { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: .2rem; }
.service-description { font-weight: 570; }
.empty-cost { color: #667084; text-align: center; }

.form-control, .form-select {
  min-height: 42px;
  color: var(--ink);
  background-color: var(--input-bg);
  border-color: var(--border-strong);
}
.form-control::placeholder { color: var(--muted); opacity: .7; }
.form-control:hover, .form-select:hover { border-color: var(--border-strong); filter: brightness(1.05); }
.form-control:focus, .form-select:focus {
  color: var(--ink);
  background-color: var(--input-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(155, 135, 245, .2);
}
.input-group-text { color: var(--muted); background: var(--input-group-bg); border-color: var(--border-strong); }
.extras-heading { padding: 1.1rem .9rem .45rem; color: var(--muted); font-size: .82rem; font-weight: 650; }
.extra-row { background: rgba(255, 255, 255, .012); }

.offer-summary {
  display: flex;
  justify-content: flex-end;
  gap: 2.5rem;
  padding: 1rem .9rem;
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
}
.summary-item { min-width: 150px; }
.summary-label { display: block; color: var(--muted); font-size: .78rem; }
.summary-value { display: block; margin-top: .15rem; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.offer-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; margin-top: 1.2rem; }
.notes-field label { color: var(--muted); font-size: .85rem; margin-bottom: .4rem; }
.submit-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.form-check-label { color: var(--muted); }
.form-check-input { background-color: var(--input-bg); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

.btn-primary {
  min-height: 44px;
  padding-inline: 1.35rem;
  color: #0b0d12;
  font-weight: 700;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn-primary:hover, .btn-primary:active { color: #0b0d12 !important; background: #c5baff !important; border-color: #c5baff !important; }
.btn-outline-secondary { color: var(--muted); border-color: var(--border-strong); }
.btn-outline-secondary:hover { color: var(--ink); background: var(--surface-raised); border-color: #59647a; }
.alert { color: var(--ink); background: var(--surface-raised); border-color: var(--border-strong); }
.alert-info { color: #cbd5ff; }
.alert-warning { color: #ffe0a3; }
.alert-success { color: #baf1d7; }

.preview-shell { max-width: 980px; margin: 0 auto; }
.preview-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.preview-paper { background: #f8f9fc; color: #1a1d25; border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); overflow: hidden; }
.preview-head { padding: 2rem 2.2rem 1.4rem; border-bottom: 1px solid #dfe3eb; }
.preview-head h1 { color: #171a21; font-size: 1.55rem; margin-bottom: 1.2rem; }
.preview-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 2rem; color: #4c5362; font-size: .92rem; }
.preview-meta strong { color: #20242d; }
.preview-body { padding: 1.5rem 2.2rem 2rem; }
.preview-message { margin-bottom: 1.5rem; color: #424957; }
.preview-preline { white-space: pre-line; }
.preview-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.preview-table th, .preview-table td { padding: .75rem .7rem; border-bottom: 1px solid #dfe3eb; vertical-align: top; }
.preview-table th { color: #596171; font-size: .75rem; text-align: left; background: #eef1f6; }
.preview-table th:nth-child(1), .preview-table td:nth-child(1) { width: 3rem; }
.preview-table th:nth-child(3), .preview-table td:nth-child(3), .preview-table th:nth-child(4), .preview-table td:nth-child(4) { width: 10rem; text-align: right; }
.preview-total td { font-weight: 700; background: #f0f2f7; }
.preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }
.preview-actions .btn-outline-light { border-color: var(--border-strong); color: var(--muted); }
.preview-actions .btn-outline-light:hover { background: var(--surface-raised); color: var(--ink); }

@media (max-width: 700px) {
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-head, .preview-body { padding: 1.2rem; }
  .preview-meta { grid-template-columns: 1fr; }
  .preview-table { font-size: .8rem; }
  .preview-table th, .preview-table td { padding: .55rem .4rem; }
  .preview-table th:nth-child(3), .preview-table td:nth-child(3), .preview-table th:nth-child(4), .preview-table td:nth-child(4) { width: auto; }
}
details { margin-top: .9rem; color: var(--muted); }
summary { cursor: pointer; }
pre { white-space: pre-wrap; font-size: .82rem; color: #d9dfeb; background: var(--surface-soft); padding: .75rem; border-radius: .5rem; }

@media (max-width: 850px) {
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-actions { width: 100%; flex-wrap: wrap; }
  .request-header { flex-direction: column; }
  .request-message { max-width: none; }
  .offer-row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .offer-row > :nth-child(3), .offer-row > :nth-child(4) { grid-column: 2; }
  .offer-row-head { display: none; }
  .offer-footer { grid-template-columns: 1fr; }
  .offer-details { grid-template-columns: 1fr; }
  .submit-stack { align-items: stretch; }
  .contract-fields.three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .position-editor-head { display: none; }
  .position-editor-row { grid-template-columns: 1fr; }
  .package-files { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .workflow-tabs { flex-direction: column; }
  .workflow-tab { justify-content: space-between; }
  main.container { padding-inline: .75rem; }
  .request-header, .offer-form { padding: 1rem; }
  .offer-summary { flex-direction: column; gap: .7rem; }
  .summary-item { min-width: 0; }
  .document-page-heading, .contract-submit, .package-main, .package-send, .package-actions { align-items: stretch; flex-direction: column; }
  .contract-fields.two-columns, .contract-fields.three-columns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .form-control, .form-select, .btn { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
}

/* ── invoice status colours ─────────────────────────────────────────────── */
.package-status.draft   { color: var(--muted); background: rgba(174,183,200,.08); border-color: var(--border-strong); }
.package-status.sent    { color: #9ee8c2; background: rgba(80,190,135,.1); border-color: rgba(120,219,169,.22); }
.package-status.paid    { color: #72d8a4; background: rgba(40,160,100,.14); border-color: rgba(80,200,130,.3); }
.package-status.overdue { color: #ffb4a0; background: rgba(230,80,50,.12); border-color: rgba(255,130,100,.28); }

.overdue-banner {
  padding: .5rem 1.3rem;
  color: #ffb4a0;
  background: rgba(230,80,50,.08);
  border-top: 1px solid rgba(255,130,100,.2);
  font-size: .82rem;
}

/* ── expense table ──────────────────────────────────────────────────────── */
.expense-table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.expense-head, .expense-row {
  display: grid;
  grid-template-columns: 8rem 7rem 1fr 8rem 3rem;
  gap: .5rem;
  align-items: center;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.expense-head { color: var(--muted); background: var(--surface-soft); font-size: .78rem; font-weight: 700; }
.expense-row:last-child { border-bottom: 0; }
.expense-row:hover { background: rgba(255,255,255,.018); }
.expense-cat {
  padding: .15rem .45rem;
  color: #d8d0ff;
  background: rgba(155,135,245,.1);
  border: 1px solid rgba(183,168,255,.2);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.receipt-link { color: var(--muted); text-decoration: none; margin-left: .4rem; }
.receipt-link:hover { color: var(--accent-strong); }

/* ── EÜR summary cards ───────────────────────────────────────────────────── */
.eur-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.eur-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.eur-label { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.eur-value { font-size: 1.55rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.eur-sub   { color: var(--muted); font-size: .8rem; }
.eur-income .eur-value   { color: #72d8a4; }
.eur-expenses .eur-value { color: #ffb4a0; }
.eur-surplus .eur-value  { color: var(--accent-strong); }

.eur-month-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.eur-month-row:last-child { border-bottom: 0; }
.eur-month-row strong { font-variant-numeric: tabular-nums; }

@media (max-width: 850px) {
  .eur-summary { grid-template-columns: 1fr; }
  .expense-head { display: none; }
  .expense-row { grid-template-columns: 1fr auto; }
  .expense-row > :nth-child(1) { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
  .expense-row > :nth-child(2) { order: -1; }
}