/* static/css/v2_newobj.css — «Новый объект» страницей (02_SCREENS.md §3.2).
   Только токены из tokens.css; префикс nob- — чтобы не задеть чужие экраны. */

.nob-topnote { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; }
.nob-back { white-space: nowrap; }

/* Ширина — по месту, а не по окну: с открытой боковой панелью на ноутбуке
   колонке достаётся ~600px, и две колонки там уже не помещаются. */
.nob-wrap { container: nobpage / inline-size; }
.nob-page {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4);
  align-items: start; max-width: 1320px;
}
.nob-steps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* шаг — белая группа на сером полотне */
.nob-step {
  container: nobstep / inline-size;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: var(--s-5) 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.nob-step-hd { display: flex; align-items: center; gap: 10px; }
.nob-step-hd h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-body); }
.nob-num {
  width: 24px; height: 24px; border-radius: var(--radius-full); flex-shrink: 0;
  background: var(--ink-solid); color: var(--toast-fg);
  font-size: var(--text-sm); font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .nob-num { background: var(--ink); color: var(--bg); }
.nob-sub { margin: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); }

/* поля */
.nob-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nob-lbl { font-size: var(--text-sm); color: var(--ink-2); }
.nob-opt { color: var(--ink-4); }
.nob-fld .inp { width: 100%; box-sizing: border-box; min-height: var(--h-field); }
.nob-fld textarea.inp { resize: vertical; min-height: var(--h-field); font: inherit; }
.nob-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nob-check { display: flex; align-items: center; gap: 10px; min-height: var(--h-row-sm); font-size: var(--text-md); cursor: pointer; }
.nob-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.nob-link {
  border: 0; background: none; padding: 0; color: var(--accent); font: inherit;
  font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap;
}
.nob-link:hover { color: var(--accent-d); }
.nob-add { align-self: flex-start; min-height: var(--h-row-sm); font-size: var(--text-sm); }

/* ── 1. Где ─────────────────────────────────────────────────────────────── */
.nob-where { display: flex; gap: 14px; align-items: flex-start; }
.nob-where-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nob-map {
  width: 280px; height: 210px; flex-shrink: 0; border-radius: var(--radius-md);
  overflow: hidden; background: var(--map-canvas); box-shadow: inset 0 0 0 1px var(--line);
}
.nob-pt {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font-size: var(--text-sm); color: var(--ink-3);
}
.nob-pt.ok b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.nob-pt.warn { color: var(--warn); }
.nob-pt-sub { color: var(--ink-4); }
#nob-dup:empty, #nob-cl-dups:empty, #nob-contact-hints:empty { display: none; }
.nob-more summary {
  cursor: pointer; color: var(--accent); font-size: var(--text-sm); font-weight: var(--fw-medium);
  min-height: var(--h-row-sm); display: flex; align-items: center; list-style: none;
}
.nob-more summary::-webkit-details-marker { display: none; }
.nob-more summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform var(--transition); }
.nob-more[open] summary::before { transform: rotate(90deg); }
.nob-more-body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

/* выпадающие подсказки: адрес и клиент */
.nob-ac { position: relative; }
.nob-ac-row { display: flex; gap: 8px; }
.nob-ac-row .inp { flex: 1; min-width: 0; }
.nob-ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-dropdown);
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow: auto; padding: 4px 0;
}
.nob-ac-list[hidden] { display: none; }
.nob-ac-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
  padding: 10px 14px; min-height: var(--h-row-sm); font-size: var(--text-md);
  border-bottom: 1px solid var(--line);
}
.nob-ac-item:last-child { border-bottom: 0; }
.nob-ac-item:hover, .nob-ac-item:focus-visible { background: var(--accent-sf); outline: none; }
.nob-ac-client span { font-size: var(--text-xs); color: var(--ink-3); }
.nob-ac-client .nob-ac-addr { color: var(--ink-4); }
.nob-ac-scope {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 14px 8px; font-size: var(--text-xs); color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.nob-ac-scope .nob-link { font-size: var(--text-xs); min-height: 32px; }
.nob-ac-empty { padding: 12px 14px; font-size: var(--text-sm); color: var(--ink-3); }
.nob-ch {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--ink-3);
  background: var(--fill); border-radius: 5px; padding: 1px 6px; margin-left: 4px; white-space: nowrap;
}

/* жёлтая плашка «рядом уже есть» (и «такой клиент уже есть») */
.nob-dup {
  background: var(--warn-sf); color: var(--warn); border-radius: var(--radius-md);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-md);
}
.nob-dup b { font-weight: var(--fw-semibold); }
.nob-dup-more { color: var(--warn); opacity: .85; }
.nob-dup-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.nob-dup-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nob-dup .btn { min-height: var(--h-row-sm); white-space: nowrap; }
.nob-dup-yes { background: var(--surface); color: var(--warn); border-color: transparent; font-weight: var(--fw-semibold); }
.nob-dup-no { background: transparent; color: var(--warn); border-color: transparent; box-shadow: none; }
.nob-dup-no:hover { background: var(--warn-sf); }
.nob-dup-ack { font-size: var(--text-sm); color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nob-dup-ack .nob-link { min-height: 32px; font-size: var(--text-sm); }

/* ── 2. Клиент ──────────────────────────────────────────────────────────── */
#nob-client { display: flex; flex-direction: column; gap: 12px; }
.nob-client-top { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.nob-legal { flex: 0 1 240px; }
.nob-mgr { flex: 0 0 auto; margin-left: auto; }
.nob-mgr-val {
  display: inline-flex; align-items: center; min-height: var(--h-field); padding: 0 14px;
  border-radius: var(--r-field); background: var(--fill); color: var(--ink-2);
  font-size: var(--text-md); white-space: nowrap;
}
.nob-seg {
  display: inline-flex; background: var(--fill); border-radius: var(--radius-md); padding: 2px; flex-shrink: 0;
}
.nob-seg button {
  border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--text-md);
  font-weight: var(--fw-medium); border-radius: 8px; padding: 0 14px; min-height: 40px;
  white-space: nowrap; cursor: pointer; transition: background var(--transition), color var(--transition);
}
.nob-seg button.on { background: var(--seg-thumb); color: var(--ink); box-shadow: var(--sh-thumb); font-weight: var(--fw-semibold); }
.nob-seg button:disabled { opacity: .4; cursor: default; }
.nob-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nob-found {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--ok);
  background: var(--ok-sf); border-radius: 5px; padding: 1px 6px; margin-left: 4px;
}
.nob-unpick { white-space: nowrap; min-height: var(--h-field); }
.nob-client-note { font-size: var(--text-sm); color: var(--ink-3); margin-top: -4px; }
.nob-contacts { min-height: 64px; }
.nob-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nob-chips:empty { display: none; }
.nob-chips-lbl { font-size: var(--text-xs); color: var(--ink-3); margin-right: 2px; }
.nob-chip {
  font-size: var(--text-sm); background: var(--fill); color: var(--ink-2);
  border-radius: var(--radius-full); padding: 4px 10px; white-space: nowrap;
}
.nob-chip-btn { border: 0; font: inherit; font-size: var(--text-sm); color: var(--accent); cursor: pointer; min-height: 32px; }
.nob-chip-btn:hover { background: var(--accent-sf); }
.nob-pay { max-width: 260px; }

/* ── 3. Что будет на объекте ────────────────────────────────────────────── */
.nob-cabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nob-cab {
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.nob-pill {
  align-self: flex-start; font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.nob-pill.our { background: var(--accent-sf); color: var(--accent); }
.nob-pill.cl { background: var(--warn-sf); color: var(--warn); }
.nob-cab-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nob-stepper { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nob-stp {
  width: 40px; height: 40px; border-radius: var(--radius-md); border: 0; cursor: pointer;
  background: var(--fill); color: var(--ink); font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--dur-fast) var(--ease);
}
.nob-stp:hover:not(:disabled) { background: var(--fill-2); }
.nob-stp:active:not(:disabled) { transform: scale(.94); }
.nob-stp:disabled { opacity: .35; cursor: default; }
.nob-qty {
  min-width: 32px; text-align: center; font-size: var(--text-2xl); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.nob-unit { color: var(--ink-3); }
.nob-type { flex: 1 1 120px; min-width: 0; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.nob-price { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.nob-price .inp {
  width: 96px; min-height: 40px; padding: 8px 10px; text-align: right; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.nob-price span { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.nob-price-sm .inp { width: 84px; }
.nob-cab-note { font-size: var(--text-sm); color: var(--ink-3); }
.nob-x {
  width: 40px; height: 40px; border: 0; border-radius: var(--radius-md); background: none; flex-shrink: 0;
  color: var(--ink-3); font-size: var(--text-md); cursor: pointer;
}
.nob-x:hover { background: var(--bad-sf); color: var(--bad); }

.nob-rules { display: flex; flex-direction: column; gap: 8px; }
.nob-rule {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2);
}
.nob-rule-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.nob-rule-main b { font-weight: var(--fw-semibold); }
.nob-rule-main .nob-price { margin-top: 4px; }
.nob-rule-bill { font-size: var(--text-sm); color: var(--ink-3); }
.nob-rule-bill.paid { color: var(--ok); font-weight: var(--fw-semibold); }
.nob-rule-bill.warn { color: var(--warn); }
.nob-days { display: inline-flex; gap: 3px; flex-shrink: 0; }
.nob-day {
  position: relative; width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  border: 0; background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2);
  font: inherit; font-size: var(--text-xs); font-weight: var(--fw-bold); white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nob-day:hover:not(:disabled):not(.on) { background: var(--fill); color: var(--ink); }
.nob-day.on { background: var(--accent-solid); color: var(--accent-fg); box-shadow: none; }
.nob-day:disabled { opacity: .3; cursor: default; }
.nob-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* машина КО в этот день проезжает рядом — точка под буквой */
.nob-day.near::after {
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--ok);
}
.nob-day.near.on::after { background: var(--accent-fg); }
.nob-rules-note { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--ink-3); }
.nob-near-lbl { color: var(--ok); font-weight: var(--fw-medium); }
.nob-warn { color: var(--warn); }
.nob-empty {
  font-size: var(--text-sm); color: var(--ink-3); padding: 14px;
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line-2); text-align: center;
}

/* ── 4. Сразу создать заявки ────────────────────────────────────────────── */
.nob-orders { display: flex; flex-direction: column; gap: 10px; }
.nob-order {
  border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--transition), box-shadow var(--transition);
}
.nob-order.on { background: var(--accent-sf); box-shadow: inset 0 0 0 1px var(--accent-sf); }
.nob-order-hd {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
  padding: 12px 14px; min-height: 56px; border-radius: var(--radius-md);
}
.nob-order-hd:disabled { cursor: default; }
.nob-order.off .nob-order-hd { opacity: .55; }
.nob-order-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nob-box {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: var(--fw-bold); color: transparent; box-shadow: inset 0 0 0 2px var(--fill-3);
}
.nob-order.on .nob-box { background: var(--accent-solid); color: var(--accent-fg); box-shadow: none; }
.nob-order-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nob-order-t b { font-weight: var(--fw-semibold); }
.nob-order-t span { font-size: var(--text-sm); color: var(--ink-3); }
.nob-order-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px 48px;
  align-items: end;
}
.nob-order-body .inp { background: var(--surface); }
.nob-quote { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--ink-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nob-quote .nob-link { min-height: 32px; }
.nob-orders-note { font-size: var(--text-sm); color: var(--ink-3); }

/* ── правая колонка ─────────────────────────────────────────────────────── */
.nob-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nob-card {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 18px var(--s-5); display: flex; flex-direction: column; gap: 12px;
}
.nob-cap { font-size: var(--text-sm); color: var(--ink-3); }
.nob-pv-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nob-pv-meta { font-size: var(--text-sm); color: var(--ink-2); }
.nob-pv-num { color: var(--accent); font-weight: var(--fw-bold); }
.nob-pv-title {
  font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-title);
  line-height: var(--lh-tight); overflow-wrap: anywhere;
}
.nob-pv-title.ghost { color: var(--ink-4); font-weight: var(--fw-semibold); }
.nob-pv-client { font-size: var(--text-sm); color: var(--ink-2); }
.nob-pv-addr { font-size: var(--text-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.nob-tiles { display: flex; gap: 8px; }
.nob-tile {
  flex: 1; background: var(--surface-2); border-radius: var(--radius-md); padding: 8px 10px;
  display: flex; flex-direction: column;
}
.nob-tile b { font-size: var(--text-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.nob-tile span { font-size: var(--text-xs); color: var(--ink-3); }
.nob-money { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.nob-money-h { font-weight: var(--fw-semibold); }
.nob-money-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); }
.nob-money-row span:last-child { font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.nob-money-row span.muted { color: var(--ink-4); font-weight: var(--fw); }
.nob-money-total {
  display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 6px;
  font-size: var(--text-base); font-weight: var(--fw-bold);
}
.nob-money-total span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nob-flow { margin: 0; padding: 0; list-style: none; counter-reset: nob; display: flex; flex-direction: column; gap: 10px; }
.nob-flow li { counter-increment: nob; display: flex; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); line-height: var(--lh); }
.nob-flow li::before {
  content: counter(nob); width: 20px; height: 20px; border-radius: var(--radius-full); flex-shrink: 0;
  background: var(--accent-sf); color: var(--accent); font-size: var(--text-xs); font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.nob-need { font-size: var(--text-sm); color: var(--warn); }
.nob-need:empty { display: none; }
.nob-create {
  justify-content: center; min-height: var(--h-button); font-size: var(--text-md);
  font-weight: var(--fw-semibold); white-space: nowrap;
}

/* ── узкое место: сначала правая колонка уходит вниз, потом шаги в столбик ── */
@container nobpage (max-width: 960px) {
  .nob-page { grid-template-columns: minmax(0, 1fr); }
  .nob-aside { position: static; }
}
@container nobstep (max-width: 640px) {
  /* на узком: адрес → точка → дубль → карта → название → для водителя */
  .nob-where { flex-direction: column; align-items: stretch; gap: 10px; }
  .nob-where-main { display: contents; }
  .nob-where .nob-ac { order: 1; }
  #nob-pt { order: 2; }
  #nob-dup { order: 3; }
  .nob-map { width: 100%; height: 200px; order: 4; }
  .nob-title-fld { order: 5; }
  .nob-more { order: 6; }
  .nob-grid2, .nob-cabs, .nob-order-body { grid-template-columns: minmax(0, 1fr); }
  .nob-order-body { padding-left: 14px; }
  .nob-client-top { flex-direction: column; align-items: stretch; }
  .nob-seg { display: flex; max-width: 100%; }
  .nob-seg button { flex: 1 1 auto; min-width: 0; padding: 0 8px; }
  .nob-legal { flex-basis: auto; }
  .nob-mgr { margin-left: 0; }
}
@container nobstep (max-width: 820px) {
  .nob-cabs { grid-template-columns: minmax(0, 1fr); }
}

/* ── телефон ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nob-topnote { display: none; }
  .nob-page { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nob-step { padding: var(--s-4); }
  .nob-seg button { min-height: var(--h-row-sm); }
  .nob-stp, .nob-x { width: var(--h-row-sm); height: var(--h-row-sm); }
  .nob-type, .nob-price .inp { min-height: var(--h-row-sm); }
  .nob-days { display: flex; width: 100%; gap: 4px; }
  .nob-day { flex: 1; width: auto; min-width: 0; height: var(--h-row-sm); }
  .nob-dup .btn, .nob-link, .nob-chip-btn, .nob-ac-scope .nob-link, .nob-dup-ack .nob-link, .nob-quote .nob-link { min-height: var(--h-row-sm); }
  .nob-aside { position: static; }
}