/* Phase-1 shell only. The real editor UI arrives in phase 3; the offer
   document has its own stylesheet (static/css/document.css) in phase 4. */

:root {
  --bg: #eef1f3;
  --panel: #ffffff;
  --fg: #1b2329;
  --muted: #5d6a73;
  --line: #d6dde2;
  --field: #f6f8f9;
  --accent: #1f5f7a;
  --accent-fg: #ffffff;
  --danger: #a33a2c;
  --f-display: "Barlow", "Arial Narrow", Arial, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13181c; --panel: #1b2227; --fg: #e4e9ec; --muted: #97a4ad;
    --line: #2e3840; --field: #222a30; --accent: #6fb3cc; --accent-fg: #0d1a20;
    --danger: #e07a6a; color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
}

button, input, select, textarea { font: inherit; color: inherit; }

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px max(16px, env(safe-area-inset-left, 0px));
}
.bar nav { display: flex; gap: 12px; margin-right: auto; }
.bar a { color: var(--fg); text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }

.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
}
.brand small { font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--muted); }

main { padding: 24px max(16px, env(safe-area-inset-left, 0px)) 48px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  max-width: 920px;
  margin: 0 auto;
}
.card.narrow { max-width: 420px; margin-top: 8vh; }
.card h1 { font-family: var(--f-display); font-size: 22px; margin: 0 0 6px; }

.f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.f label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.f input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 6px;
  padding: 9px 10px;
}

.check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; }

.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: 9px 14px;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; width: 100%; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }

.error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid var(--danger);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.error p, .error-text { margin: 0; color: var(--danger); font-size: 14px; }

.messages { list-style: none; margin: 16px auto 0; padding: 0 16px; max-width: 920px; }
.messages li { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }

/* --- phase 2: data screens ------------------------------------------- */

.card.narrow-wide { max-width: 640px; }
.card h2 {
  font-family: var(--f-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.head-row h1 { margin-right: auto; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid .f.w, .grid .check.w { grid-column: 1 / -1; }
.f textarea, .f select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 6px;
  padding: 9px 10px;
}
.f input[type="color"] { padding: 2px; height: 38px; }

.btn.auto { width: auto; }
.btn.sm { padding: 5px 9px; font-size: 13px; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.filters input[type="search"], .filters select {
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 6px;
  padding: 8px 10px;
}
.filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.check.inline { margin: 0; }

.table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.table th, .table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table .r { text-align: right; }
.table .nums { font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table tr.dimmed td { opacity: .55; }
.table a { color: var(--fg); }

.badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--muted);
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  text-decoration: none;
  color: var(--fg);
  background: var(--field);
}
.tile:hover { border-color: var(--accent); }

.details { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 16px 0; }
.details dt { color: var(--muted); font-size: 13px; }
.details dd { margin: 0; }

.danger-zone { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.logo-preview { max-height: 40px; vertical-align: middle; background: #fff; padding: 2px;
  border: 1px solid var(--line); border-radius: 4px; }

/* Phones: one column, and wide tables scroll inside the card. */
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .bar nav { gap: 10px; font-size: 14px; overflow-x: auto; }
}

/* --- phase 3: the offer editor --------------------------------------- */

.editor {
  /* The editor bar's real height, written by editor.js: it wraps on narrower
     desktops, so the sticky preview below cannot assume a constant. */
  --bar-h: 48px;
  display: grid;
  grid-template-columns: 460px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "bar bar" "form preview";
  min-height: calc(100vh - 58px);
  margin: -24px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) -48px;
}

.editor-bar {
  grid-area: bar;
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 8px max(16px, env(safe-area-inset-left, 0px));
}
.mini-total { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.mini-total b { color: var(--fg); }

.editor-form {
  grid-area: form;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 4px 16px 60px;
  min-width: 0;
}
.editor-preview {
  grid-area: preview;
  background: var(--desk, #dfe4e8);
  padding: 20px 16px 48px;
  min-width: 0;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .editor-preview { background: #0f1316; }
}
.preview-stage { position: relative; margin: 0 auto; }
#preview-sheet-wrap { width: 794px; }

/* The preview follows the form down the page -- the sections are long and the
   point of the split screen is seeing the document while editing it. Sticky
   inside its own grid area, which stretches to the taller column, so the sheet
   travels exactly as far as the form is long. Only on the two-pane layout;
   below 900px the panes are tabs and there is nothing to follow. */
@media (min-width: 901px) {
  .editor-preview {
    position: sticky;
    top: var(--bar-h);
    align-self: start;
    max-height: calc(100vh - var(--bar-h));
    /* The sheet is usually taller than the viewport, so the pane scrolls on
       its own. The gutter is reserved permanently: letting the scrollbar
       appear and disappear would change the pane's width, which rescales the
       sheet, which changes its height -- a resize loop. */
    overflow: hidden auto;
    scrollbar-gutter: stable;
  }
}

/* Tabs are the phone layout; hidden while both panes fit side by side. */
.editor .tabs { display: none; gap: 4px; background: var(--field); border-radius: 8px; padding: 3px; }
.editor .tabs button {
  flex: 1; border: 0; background: transparent; border-radius: 6px;
  padding: 6px 14px; cursor: pointer; color: var(--muted);
}
.editor .tabs button[aria-selected="true"] {
  background: var(--panel); color: var(--fg); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.editor details { border-bottom: 1px solid var(--line); }
.editor summary {
  list-style: none; cursor: pointer; padding: 12px 0;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: .02em;
}
.editor summary::-webkit-details-marker { display: none; }
.editor summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .22s ease-out;
}
.editor details[open]:not(.is-closing) > summary::after { transform: rotate(-135deg); }
.editor summary .tag {
  font-family: var(--f-body); font-weight: 400; font-size: 12px;
  color: var(--muted); letter-spacing: 0;
}
.editor .grid { padding-bottom: 10px; }

/* Usługi / Materiały: lists nested inside Kosztorys, a step down from it. */
.editor details.item-group {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0 12px; margin-bottom: 10px;
}
.editor details.item-group > summary { font-size: 15px; padding: 10px 0; }
.editor details.item-group > .check { margin-bottom: 12px; }

.save-state { font-size: 13px; color: var(--muted); transition: opacity .4s; }
.save-state.is-fading { opacity: 0; }
.save-state-saved { color: var(--accent); }
.save-state-invalid, .save-state-conflict { color: var(--danger); opacity: 1 !important; }
.save-state-conflict { max-width: 42ch; line-height: 1.3; }

/* --- cost rows ------------------------------------------------------- */

.items { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.item-row {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  background: var(--field); cursor: grab;
}
.item-row.is-dragging { opacity: .5; }
.item-row .item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; }
.item-row .f { margin-bottom: 8px; }
.item-row .f.w { grid-column: 1 / -1; }
.item-row input, .item-row select { background: var(--panel); }
.item-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
}
.item-foot b { color: var(--fg); font-variant-numeric: tabular-nums; }
.item-actions { display: flex; gap: 2px; }
.icon {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  padding: 4px 8px; border-radius: 4px; font-size: 14px;
}
.icon:hover { background: var(--line); color: var(--fg); }
.icon.danger:hover { color: var(--danger); }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.hint-vat {
  font-size: 13px; color: var(--muted); background: var(--field);
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
  padding: 8px 10px; margin: 0 0 10px;
}

/* --- pickers --------------------------------------------------------- */

.picker, .client-block { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.picker input[type="search"], .client-block input[type="search"] {
  border: 1px solid var(--line); background: var(--field);
  border-radius: 6px; padding: 8px 10px; width: 100%;
}
.picker-results { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.picker-row {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  padding: 8px 6px; cursor: pointer;
}
.picker-row:hover { background: var(--field); }
.client-block .chosen {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--field);
}
.inline-form { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 8px; }
.company-summary { padding-bottom: 14px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.company-summary .btn { margin-top: 8px; }

/* --- phones ---------------------------------------------------------- */

@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; grid-template-areas: "bar" "form" "preview"; }
  .editor .tabs { display: flex; }
  .editor-form { border-right: 0; }
  .editor[data-view="edit"] .editor-preview { display: none; }
  .editor[data-view="preview"] .editor-form { display: none; }
  .mini-total { width: 100%; margin-left: 0; order: 3; }
}
@media (max-width: 420px) {
  .item-row .item-grid { grid-template-columns: 1fr 1fr; }
}

.nav-form { display: inline; }
.linkish {
  border: 0; background: transparent; color: var(--fg);
  padding: 0; cursor: pointer; font: inherit;
}
.linkish:hover { text-decoration: underline; }

.page-count { font-size: 13px; color: var(--muted); }

/* --- phase 5: offer list, detail, timeline ---------------------------- */

.date-filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.date-filter input {
  border: 1px solid var(--line); background: var(--field);
  border-radius: 6px; padding: 7px 9px;
}

.badge.status { border-color: currentColor; }
.status-draft { color: var(--muted); }
.status-sent { color: #1f5f7a; }
.status-accepted { color: #3f7d46; }
.status-rejected { color: var(--danger); }
.status-expired { color: #8a6d2f; }
.status-stale { color: #8a6d2f; border-color: currentColor; margin-left: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-sent { color: #6fb3cc; }
  :root:not([data-theme="light"]) .status-accepted { color: #7fb98a; }
  :root:not([data-theme="light"]) .status-expired,
  :root:not([data-theme="light"]) .status-stale { color: #cdae6b; }
}

.pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

.status-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status-form select {
  border: 1px solid var(--line); background: var(--field);
  border-radius: 6px; padding: 8px 10px;
}

.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.timeline li {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-when { color: var(--muted); font-size: 13px; }
.timeline-who { font-size: 13px; }

/* Phones: the table reflows into cards, one row per card, labels inline. */
@media (max-width: 640px) {
  .table.offers-table, .card .table {
    display: block; overflow-x: visible; white-space: normal;
  }
  .card .table thead { display: none; }
  .card .table tbody, .card .table tr, .card .table td { display: block; width: auto; }
  .card .table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--field);
  }
  .card .table td { border: 0; padding: 3px 0; text-align: left !important; }
  .card .table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 12px;
  }
  .card .table td[data-label=""]::before { content: ""; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .filters { flex-direction: column; align-items: stretch; }
  .date-filter { justify-content: space-between; }
}

/* --- phase 6: offer from a note -------------------------------------- */

.example-note {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-size: 13px;
  margin: 0;
}

.warnings {
  background: color-mix(in srgb, #8a6d2f 10%, transparent);
  border: 1px solid #8a6d2f;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 16px 0;
}
.warnings ul { margin: 6px 0 0; padding-left: 20px; }

.row-uncertain { background: color-mix(in srgb, #8a6d2f 7%, transparent); }
.confidence-high { color: #3f7d46; }
.confidence-medium { color: var(--muted); }
.confidence-low { color: #8a6d2f; }

.trash-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) { .trash-actions { justify-content: flex-start; } }

/* --- AI proofreading review ------------------------------------------ */

.proof {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--field);
}
.proof-risky { border-color: #8a6d2f; background: color-mix(in srgb, #8a6d2f 7%, transparent); }
.proof-head { margin-bottom: 10px; }

.proof-diff {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  line-height: 1.6;
}
.proof-diff s {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  text-decoration-thickness: 1px;
}
.proof-diff ins {
  background: color-mix(in srgb, #3f7d46 20%, transparent);
  text-decoration: none;
  border-bottom: 2px solid #3f7d46;
}

.proof-changes { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.proof-changes li { font-size: 14px; }

/* --- B / I / U / S over the long text fields (ADR-0059) ----------------- */
.rich-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rich-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.rich-btn:hover { border-color: var(--accent); color: var(--accent); }
.rich-btn b, .rich-btn i, .rich-btn u, .rich-btn s { pointer-events: none; }
.rich-hint { font-size: 12px; color: var(--muted); margin-left: 4px; }
@media (max-width: 480px) { .rich-hint { display: none; } }

/* ---------- AI busy overlay (static/js/ai-busy.js) ---------- */
.ai-busy {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(2px);
  cursor: progress;
  outline: none;
}
.ai-busy[hidden] { display: none; }
body.ai-busy-on { overflow: hidden; }
.ai-busy-box {
  max-width: 26rem; text-align: center;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 10px 40px rgb(0 0 0 / .18);
}
.ai-busy-spinner {
  width: 56px; height: 56px; margin: 0 auto 20px;
  border: 5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ai-busy-spin .9s linear infinite;
}
@keyframes ai-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ai-busy-spinner { animation-duration: 2.4s; }
}
.ai-busy-title {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.35rem; margin: 0 0 8px;
}
.ai-busy-desc { color: var(--muted); margin: 0; line-height: 1.45; }
.ai-busy-desc b { color: var(--fg); }