/* vid.css — Титан Микро. Иврит, справа налево. Плотно: один ряд там, где хватает одного. */
:root {
  --fon: #f4f4f1; --karta: #fff; --tekst: #1a1a19; --tishe: #66665f; --ramka: #d9d9d1;
  --glavnyy: #1f5f8a; --glavnyy-t: #184c6f; --beda: #a4302a; --horosho: #1f6f4a;
  --probnyy: #8a5a00; --otkl: #7a7a74;
}
* { box-sizing: border-box; }
html { direction: rtl; }
body {
  margin: 0; padding: 10px 12px 32px; background: var(--fon); color: var(--tekst);
  font: 14px/1.4 -apple-system, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
}
.list { max-width: 1180px; margin: 0 auto; }
.uzkiy { max-width: 560px; }
.shapka { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.shapka h1 { font-size: 18px; margin: 0; }
.shapka .tishe { color: var(--tishe); }
h2 { font-size: 15px; margin: 12px 0 4px; display: flex; gap: 8px; align-items: baseline; }
h2 .schet { color: var(--tishe); font-weight: 400; }
.karta { background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px; padding: 8px 10px; }
.ryad { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ryad label { display: flex; gap: 4px; align-items: center; color: var(--tishe); }
input, select, button { font: inherit; color: inherit; }
input[type=text], input[type=tel], input[type=number], select {
  padding: 4px 6px; border: 1px solid var(--ramka); border-radius: 5px; background: #fff; min-width: 0;
}
input[type=number] { width: 56px; }
button {
  padding: 4px 10px; border: 1px solid var(--glavnyy); border-radius: 5px; background: var(--glavnyy);
  color: #fff; cursor: pointer; font-weight: 600; white-space: nowrap;
}
button:hover { background: var(--glavnyy-t); }
button.tihaya { background: #fff; color: var(--glavnyy); }
button.tihaya:hover { background: #eef4f8; }
button:disabled { opacity: .5; cursor: default; }
.ssylka { direction: ltr; unicode-bidi: plaintext; font: 12px/1.3 ui-monospace, Consolas, monospace;
  background: #f0f5f9; border: 1px solid #c9dbe8; border-radius: 5px; padding: 4px 6px; word-break: break-all; flex: 1; min-width: 200px; }
.beda { color: var(--beda); }
.tishe { color: var(--tishe); }
.skryt { display: none !important; }
.rastyanut { flex: 1; min-width: 260px; }

table { width: 100%; border-collapse: collapse; background: var(--karta); border: 1px solid var(--ramka); }
th, td { padding: 3px 6px; border-bottom: 1px solid #ecece6; text-align: right; vertical-align: middle; }
th { background: #f7f7f3; font-weight: 600; color: var(--tishe); white-space: nowrap; }
td.ltr { direction: ltr; text-align: right; unicode-bidi: plaintext; white-space: nowrap; }
td.deystviya { white-space: nowrap; }
td.deystviya .ryad { flex-wrap: nowrap; gap: 4px; }
.pusto { color: var(--tishe); text-align: center; padding: 8px; }

.status { font-weight: 600; white-space: nowrap; }
.status.ne_platit { color: var(--tishe); }
.status.probnyy { color: var(--probnyy); }
.status.platyashchiy { color: var(--horosho); }
.status.otklyuchen { color: var(--otkl); text-decoration: line-through; }

/* форма записи исполнителя: две колонки на широком, одна на узком */
.polya { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.polya label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.polya input, .polya select { width: 100%; padding: 6px 8px; }
.polya .vo-vsyu { grid-column: 1 / -1; }
.bolshaya { width: 100%; padding: 8px; margin-top: 8px; font-size: 15px; }

.dva { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mesto { border: 1px dashed var(--ramka); border-radius: 8px; padding: 8px 10px; color: var(--tishe); background: #fafaf7; }
.mesto b { color: var(--tekst); }

/* Таблица мастеров: ширины колонок ЗАДАНЫ, а не считаются по содержимому —
   иначе после нажатия (другое слово статуса) колонка меняет ширину и кнопки едут. */
.tab-isp { table-layout: fixed; }
.tab-isp .k-imya { width: 13%; }
.tab-isp .k-biznes { width: 13%; }
.tab-isp .k-tel { width: 108px; }
.tab-isp .k-kat { width: 56px; }
.tab-isp .k-rayon { width: 16%; }
.tab-isp .k-kogda { width: 66px; }
.tab-isp .k-status { width: 250px; }
.tab-isp .k-knopki { width: 352px; }  /* поле дней 52 + четыре кнопки 255 + промежутки 24 + поля 12 = 343; замерено 30.09 */
.tab-isp .k-knopki input, .tab-isp .k-knopki button { flex: 0 0 auto; }
.tab-isp .k-knopki input { width: 52px; }
.tab-isp td { overflow: hidden; text-overflow: ellipsis; }
.tab-isp .status { white-space: normal; }

/* ── Кабинет столяра (Э1-б): карточки клиентов ──────────────────────────────
   Каждая карточка — ТРИ строки неизменной высоты: «кто», «проект · метры · файлы»,
   «что дальше». Строка одна, без переноса: длинное обрезается многоточием, кнопки
   не сжимаются и остаются на экране. Правило владельца — без пустого воздуха. */
.stroka-vhoda { margin: 0 0 4px; }
.stroka-vhoda .ssylka { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; min-width: 120px; }
.konstruktor .zakryto { font-weight: 600; }
.forma-klienta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 7px; margin-bottom: 4px; }
.forma-klienta input { padding: 3px 6px; border: 1px solid var(--ramka); border-radius: 5px; background: #fff; width: 110px; }
.forma-klienta input.shirokoe { width: 200px; }
.forma-klienta input[type=number] { width: 78px; }
.forma-klienta input[type=date] { width: 132px; }
.klienty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr)); gap: 4px; }
.klient { background: var(--karta); border: 1px solid var(--ramka); border-inline-start: 3px solid var(--ramka);
  border-radius: 6px; padding: 2px 7px; min-width: 0; }
.klient.prosrocheno { border-inline-start-color: var(--beda); }
.klient .stroka { display: flex; align-items: center; gap: 6px; height: 24px; white-space: nowrap; overflow: hidden; }
.klient .stroka > * { flex: 0 0 auto; }
.klient .k-imya { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
.klient .k-tel { direction: ltr; unicode-bidi: plaintext; color: var(--glavnyy); text-decoration: none; }
.klient .k-gorod { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.klient .k-data { margin-inline-start: auto; font-weight: 600; color: var(--tishe); }
.klient .k-data.prosrocheno { color: var(--beda); }
.klient .k-proekt { flex: 1 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
.klient .k-metry { color: var(--horosho); font-weight: 600; }
.klient .vl { color: var(--glavnyy); text-decoration: none; font-size: 12px; }
.klient .yarlyk { color: var(--tishe); }
.klient .k-dalshe { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right;
  background: none; border: 0; color: var(--tekst); font-weight: 400; padding: 0; }
.klient .k-dalshe:hover { background: none; text-decoration: underline; }
.klient .dalshe input[type=text] { flex: 1 1 auto; min-width: 0; padding: 1px 5px; border: 1px solid var(--ramka); border-radius: 4px; }
.klient .dalshe input[type=date] { width: 128px; padding: 1px 4px; border: 1px solid var(--ramka); border-radius: 4px; }
button.mini { padding: 0 6px; font-size: 12px; line-height: 20px; background: #fff; color: var(--glavnyy); font-weight: 600; }
button.mini:hover { background: #eef4f8; }
.mesto-stroka { margin: 6px 0 0; padding: 3px 8px; border: 1px dashed var(--ramka); border-radius: 6px; color: var(--tishe); background: #fafaf7; }
.mesto-stroka b { color: var(--tekst); }
.tab-isp .k-klienty { width: 52px; text-align: center; }

/* ── Э1-в: заявка клиента, лента заявок мастера, заявки на экране владельца ──
   🔴 Цен нет нигде — только метры. Плотно, как и остальное. */
.ltr { direction: ltr; unicode-bidi: plaintext; }
.horosho { color: var(--horosho); font-weight: 600; }
.mesto-konstruktora { margin-bottom: 8px; }
.mesto-konstruktora .podskazka { margin-bottom: 4px; }
.ramka-konstruktora { display: block; width: 100%; height: calc(100vh - 150px); min-height: 480px;
  border: 1px solid var(--ramka); border-radius: 8px; background: #fff; }
.forma-zayavki { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.forma-zayavki .polya input[type=number] { width: 100%; }
.galochka { display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.galochka input { margin-top: 3px; flex: 0 0 auto; }
.galochka.soglasie { font-size: 13px; color: var(--tishe); }
.preduprezhdenie { color: var(--probnyy); background: #fff8e6; border: 1px solid #ecd9a8; border-radius: 6px; padding: 4px 8px; margin: 6px 0; }
.svodka-zayavki .ryad { gap: 8px; }
.spisok-komu { display: flex; flex-direction: column; gap: 3px; }
.komu { display: flex; gap: 8px; align-items: baseline; background: var(--karta); border: 1px solid var(--ramka);
  border-radius: 6px; padding: 3px 8px; white-space: nowrap; overflow: hidden; }
.komu .k-biznes { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.komu .k-sost { margin-inline-start: auto; color: var(--tishe); }
.komu.vzyal .k-sost { color: var(--horosho); font-weight: 600; }
.komu.ne_dlya_menya { opacity: .6; }
.eshchyo { margin: 8px 0 4px; }
.klient.zayavka.novaya { border-inline-start-color: var(--glavnyy); }
.klient.zayavka .k-tel { direction: ltr; unicode-bidi: plaintext; color: var(--glavnyy); text-decoration: none; }
button.mini.vzyat { background: var(--glavnyy); color: #fff; }
.zayavki-pult { display: flex; flex-direction: column; gap: 4px; }
.zayavka-pult { background: var(--karta); border: 1px solid var(--ramka); border-radius: 6px; padding: 3px 8px; min-width: 0; }
.zayavka-pult .ryad { gap: 3px 8px; }
.zayavka-pult .komu-imya { font-size: 12px; border: 1px solid var(--ramka); border-radius: 10px; padding: 0 6px; white-space: nowrap; }
.zayavka-pult .komu-imya.vzyal { border-color: var(--horosho); color: var(--horosho); font-weight: 600; }
.zayavka-pult .komu-imya.ne_dlya_menya { color: var(--otkl); text-decoration: line-through; }
.zayavka-pult .vl, .svodka-zayavki .vl { color: var(--glavnyy); text-decoration: none; font-size: 12px; }
.k-metry { color: var(--horosho); font-weight: 600; }

@media (max-width: 640px) {
  .polya, .dva { grid-template-columns: 1fr; }
  .forma-klienta input, .forma-klienta input.shirokoe { width: calc(50% - 2px); }
  .forma-klienta input[type=number], .forma-klienta input[type=date] { width: calc(50% - 2px); }
  .tablica-obyortka { overflow-x: auto; }

  /* Телефон: каждый мастер — карточка из ТРЁХ строк неизменной высоты:
       1) имя · категория · город, округ   2) статус   3) поле дней и все кнопки.
     Каждая строка — одна, без переноса (длинное обрезается многоточием): иначе смена
     слова статуса переносит строку и сдвигает все карточки ниже (Д4, приёмка 30.09). */
  .tab-isp, .tab-isp tbody, .tab-pr, .tab-pr tbody { display: block; width: 100%; border: 0; background: none; }
  .tab-isp thead, .tab-isp .k-biznes, .tab-isp .k-tel, .tab-isp .k-kogda, .tab-pr thead { display: none; }
  .tab-isp tr, .tab-pr tr {
    display: block; background: var(--karta); border: 1px solid var(--ramka); border-radius: 6px;
    padding: 4px 7px; margin-bottom: 4px; line-height: 1.35;
  }
  .tab-isp tr {
    display: grid; grid-template-columns: fit-content(55%) max-content minmax(0, 1fr);
    grid-auto-rows: auto; align-items: center;
  }
  .tab-isp td { display: block; width: auto; border: 0; padding: 0; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.35em; }
  .tab-isp .k-status, .tab-isp .k-knopki { grid-column: 1 / -1; }
  /* счёт клиентов — четвёртой клеткой первой строки; район уступает ему место
     многоточием, строк у карточки по-прежнему три */
  .tab-isp tr { grid-template-columns: fit-content(50%) max-content minmax(0, 1fr) max-content; }
  .tab-isp .k-klienty { grid-column: 4; grid-row: 1; width: auto; color: var(--tishe); }
  .tab-isp .k-klienty::before { content: ' · לקוחות '; white-space: pre; }
  .tab-isp .status { white-space: nowrap; }
  .tab-pr td { display: inline; width: auto; border: 0; padding: 0; overflow: visible; white-space: normal; }
  .tab-isp .k-imya { font-weight: 600; }
  .tab-isp .k-imya::after, .tab-isp .k-kat::after,
  .tab-pr td:not(:last-child)::after { content: ' · '; color: var(--tishe); font-weight: 400; white-space: pre; }
  .tab-isp .k-knopki { width: auto; height: auto; overflow: visible; margin-top: 3px; }
  .tab-isp .k-knopki .ryad { flex-wrap: nowrap; gap: 4px; }
  .tab-isp .k-knopki button { padding: 3px 7px; }
  .tab-isp .k-knopki input { width: 44px; }
  .tab-pr td.net-ssylki { display: none; }
  .tab-pr td:has(+ td.net-ssylki)::after { content: none; }
  .tab-pr td.deystviya { display: inline-block; margin-inline-start: 4px; }
  .tab-pr td.deystviya button { padding: 2px 7px; }
  .tab-isp .pusto, .tab-pr .pusto { display: block; }
  .ramka-konstruktora { height: calc(100vh - 170px); min-height: 420px; }
  .zayavka-pult .ryad { font-size: 13px; }
}

/* ── Э1-г: беседа клиент ↔ мастер ───────────────────────────────────────────
   Плотно: шапка в один ряд, лента прокручивается внутри, ввод — одной строкой.
   Длинное слово (ссылка) переносится где угодно — иначе на телефоне страница едет вбок. */
.beseda { background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px; display: flex; flex-direction: column; min-width: 0; }
.b-shapka { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px; border-bottom: 1px solid var(--ramka); }
.b-shapka .b-kto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 60%; }
.b-shapka .b-zakryt { margin-inline-start: auto; }
.b-lenta { flex: 1 1 auto; overflow-y: auto; padding: 5px 8px; display: flex; flex-direction: column; gap: 3px; min-height: 120px; max-height: 50vh; }
.b-s { max-width: 85%; padding: 3px 8px; border-radius: 8px; background: #eef4f8; align-self: flex-start;
  white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.b-s.svoyo { background: #e6f2ea; align-self: flex-end; }
.b-vremya { font-size: 11px; color: var(--tishe); margin-inline-start: 6px; white-space: nowrap; }
.b-img { display: block; max-width: min(220px, 100%); max-height: 220px; border-radius: 6px; margin: 2px 0; }
.b-sistema { align-self: center; font-size: 12px; color: var(--tishe); }
.b-sistema.b-dan { color: var(--horosho); font-weight: 600; }
.b-forma { display: flex; gap: 4px; padding: 4px 6px; border-top: 1px solid var(--ramka); }
.b-vvod { flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 1px solid var(--ramka); border-radius: 5px; font: inherit; }
.b-niz { padding: 0 8px; font-size: 12px; display: flex; gap: 8px; min-width: 0; overflow: hidden; }
button.b-nomer.vazhno { background: var(--glavnyy); color: #fff; }
button.b-zvonok { opacity: .6; }
.besedy-vybor { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
button.b-vybor.vybrana { background: var(--glavnyy); color: #fff; }
.p-besedy { color: var(--tekst); }
/* кабинет: окно беседы поверх; на телефоне — во весь экран */
.beseda-okno { position: fixed; inset-inline-end: 12px; bottom: 12px; width: 420px; max-width: calc(100vw - 24px);
  height: min(560px, calc(100vh - 24px)); z-index: 10; box-shadow: 0 4px 20px rgba(0, 0, 0, .2); border-radius: 8px; }
.beseda-okno .beseda { height: 100%; }
.beseda-okno .b-lenta { max-height: none; }
@media (max-width: 640px) {
  .beseda-okno { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; }
  .beseda-okno .beseda { border-radius: 0; }
}