:root{--ink:#23262B;--concrete:#E5E6E1;--paper:#FFFFFF;--steel:#6A7480;--line:#D2D4CE;--tape:#FFD200;--red:#A8321C;}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;color:var(--ink);background:var(--concrete);min-height:100vh;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0;}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
button{font-family:inherit;cursor:pointer;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;box-shadow:0 0 0 4px var(--tape);}
input,select,textarea{font-family:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:13px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);}
::placeholder{color:#A6ABA4;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;}
.btn{border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:10px;padding:7px 12px;font-size:12px;font-weight:600;letter-spacing:.02em;transition:background .12s,color .12s;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-tape{background:var(--tape);border-color:var(--ink);}
.btn-tape:hover{background:var(--ink);color:var(--tape);}
.btn-ghost{border-color:transparent;background:transparent;color:var(--steel);padding:4px 6px;}
.btn-ghost:hover{background:transparent;color:var(--red);}
.tab{border:none;background:transparent;padding:14px 2px;margin-right:22px;text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:600;color:var(--steel);border-bottom:3px solid transparent;}
.tab[data-on="1"]{color:var(--ink);border-bottom-color:var(--tape);}
.tape-strip{height:22px;background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10px);background-size:100% 8px;background-repeat:repeat-x;background-position:0 100%;opacity:.5;}
.row{display:grid;grid-template-columns:minmax(220px,1fr) 92px 84px 96px 104px 116px 30px;gap:10px;align-items:center;}
.erow{display:grid;grid-template-columns:minmax(210px,1fr) 84px 90px 62px 100px 100px 26px;gap:9px;align-items:center;}
.hd{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);}
.chain{font-size:11px;color:var(--steel);margin-top:3px;}
.chain b{color:var(--ink);font-weight:600;}
.num{text-align:right;}
.scroll{overflow-x:auto;}
.scroll > *{min-width:820px;}
.combo{position:relative;}
.dd{position:absolute;left:0;top:100%;z-index:40;width:340px;max-height:260px;overflow:auto;background:#fff;border:1px solid var(--ink);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.14);display:none;}
.dd button{display:flex;width:100%;gap:8px;align-items:center;text-align:left;border:none;background:#fff;border-bottom:1px solid #F0F0ED;padding:8px 10px;font-size:13px;}
.dd button:hover,.dd button[data-hi="1"]{background:#FFF7CC;}
.fold{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#F4F4F1;border:1px solid var(--line);border-radius:9px;margin:8px 0 4px;}
@media (max-width:900px){.cols{grid-template-columns:1fr !important;}.side{position:static !important;}}
#printClone{display:none;}
@media print{
  body{background:#fff;}
  body.printing #root{display:none !important;}
  body.printing #printClone{display:block;}
  /* прямой Cmd+P без кнопки: печатаем только документ, если он открыт */
  body:not(.printing) *{visibility:hidden;}
  body:not(.printing) #kpDoc, body:not(.printing) #kpDoc *{visibility:visible;}
  body:not(.printing) #kpDoc{position:absolute;left:0;top:0;width:100%;padding:0 !important;}
  #kpDocPrint{padding:0 !important;background:#fff;}
  #printClone table{page-break-inside:auto;}
  #printClone tr{page-break-inside:avoid;}
  #printClone thead{display:table-header-group;}
  @page{margin:12mm 12mm 18mm;}
}

/* ---- экран входа ---- */
#authWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.authCard{background:var(--paper);border:1px solid var(--line);border-radius:9px;width:380px;max-width:100%;padding:28px;}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.logo .sq{width:24px;height:24px;background:var(--tape);border:2px solid var(--ink);}
.err{background:#FBEDE9;color:var(--red);border:1px solid #EBD3CC;border-radius:9px;padding:8px 10px;font-size:13px;margin-bottom:12px;display:none;}
.field{margin-bottom:12px;}
.field label{display:block;margin-bottom:4px;}
.tabsw{display:flex;gap:6px;margin-bottom:18px;}
.tabsw button{flex:1;border:1px solid var(--line);background:var(--paper);color:var(--steel);padding:9px;border-radius:9px;font-weight:600;font-size:13px;}
.tabsw button[data-on="1"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.link{border:none;background:transparent;color:var(--steel);text-decoration:underline;font-size:13px;padding:4px;}
.link:hover{color:var(--ink);}
/* название проекта в графике — ссылка в проект */
.glink{color:#2F80CB;}
.glink:hover{color:var(--ink);text-decoration:underline;}
/* подписи полей всегда в одну строку: длинный текст обрезается с «…»
   и не ломает выравнивание соседних блоков (полный текст — в title) */
label>.hd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#authWrap input{width:100%;padding:9px 10px;font-size:14px;}
#authWrap .btn{width:100%;background:var(--ink);color:var(--paper);padding:11px 14px;}
#authWrap .btn:hover{background:var(--tape);color:var(--ink);}

/* нижний колонтитул печати */
.print-footer{display:none;}
@media print{
  .print-footer{display:flex;position:fixed;bottom:0;left:0;right:0;justify-content:space-between;align-items:center;gap:10px;font-size:8.5px;color:#6A7480;border-top:1px solid #D2D4CE;padding:3px 0 0;background:#fff;}
  #kpDocPrint{padding-bottom:14mm !important;}
}

/* ═══ адаптив: планшеты ═══ */
@media (max-width: 900px){
  header > div, main{ padding-left:12px !important; padding-right:12px !important; }
  header h1{ font-size:16px !important; }
  main{ padding-top:14px !important; }
  .card{ padding:12px !important; overflow:visible; }
  table{ font-size:12px; display:block; overflow-x:auto; max-width:100%; }
  nav .tab{ white-space:nowrap; }
}
/* ═══ адаптив: телефоны ═══ */
@media (max-width: 640px){
  html, body{ overflow-x:hidden; max-width:100vw; }
  header h1{ font-size:14px !important; }
  header > div > div:first-child{ flex-wrap:wrap; }
  main{ padding-bottom:130px !important; max-width:100vw; }
  input, select, textarea{ font-size:16px; } /* iOS: без автозума */
  .btn{ padding:8px 10px; }
  .kb-col{ flex:0 0 200px !important; }
  h2{ font-size:16px !important; }
  /* вкладки проекта — своя горизонтальная полоса (попапов внутри нет) */
  .ptabs{ overflow-x:auto; scrollbar-width:none; }
  .ptabs::-webkit-scrollbar{ display:none; }
  .ptabs button{ white-space:nowrap; flex:none; }
  /* нижняя сводка сметы: компактно, всё видно */
  .bbar{ padding:8px 10px !important; gap:10px 14px !important; font-size:12px; }
  .bbar .hd{ font-size:9px !important; }
  /* двухколоночные раскладки (обсуждение, финансы, эскиз, формы) — в столбик */
  [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns:minmax(0,1fr) 320px"],
  [style*="grid-template-columns:300px 1fr"]{ display:block !important; }
  [style*="grid-template-columns:1fr 1fr;"] > *,
  [style*="grid-template-columns:minmax(0,1fr) 320px"] > *,
  [style*="grid-template-columns:300px 1fr"] > *{ margin-bottom:12px; min-width:0; }
  /* выпадающие подсказки прайса/наборов — в пределах экрана */
  .combo{ position:relative; }
  .dd{ max-width:calc(100vw - 32px); }
  /* журнал выполнения: строки не сжимаются, листаются пальцем */
  .shipTbl{ overflow-x:auto; }
  .shipTbl > div{ min-width:660px; }
}

/* ═══ гость-заказчик: всё только для чтения, кроме чата ═══ */
.guest input, .guest select, .guest textarea{ pointer-events:none; background:#F6F6F3 !important; }
.guest [data-e="chatText"], .guest [data-e="chatFile"]{ pointer-events:auto; background:#fff !important; }
/* «Мой профиль» — личные данные гостя, полностью живые */
.guest #profOverlay input, .guest #profOverlay select, .guest #profOverlay textarea{ pointer-events:auto; background:#fff !important; }
.guest #profOverlay input[type="checkbox"]{ background:none !important; }
.guest [data-act="prMenu"], .guest [data-act="stageSet"], .guest [data-act="projDates"]{ display:none !important; }

/* ═══ мобильная первая помощь (экраны до 700px) ═══ */
@media (max-width:700px){
  /* попапы — по ширине экрана, со своей прокруткой */
  div[style*="z-index:60"]>div, div[style*="z-index:65"]>div{
    width:100% !important; max-width:94vw !important;
    max-height:88vh; overflow:auto;
  }
  /* поля дат iOS не должны распирать вёрстку */
  input[type="date"], input[type="datetime-local"], input[type="time"]{
    width:100% !important; min-width:0 !important; max-width:100%;
  }
  /* колонки складываем в одну, ряды — с переносом (кроме таблиц) */
  #root div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  #root div[style*="display:flex"]{ flex-wrap:wrap; }
  /* таблицы (сметы и пр.) — горизонтальная прокрутка внутри карточки */
  .card{ overflow-x:auto; }
  .card table{ min-width:560px; }
  /* названия не рвём по буквам */
  #root button, #root a, #root .hd{ word-break:normal; overflow-wrap:break-word; }
  /* нижняя итоговая панель — компактнее и с переносом */
  #root>div[style*="position:fixed"][style*="bottom"]{ font-size:11px; }
}

/* мобильное меню «⋮» — по центру экрана, поверх всего (не режется прокруткой) */
@media (max-width:700px) and (pointer:coarse){
  .dd:not(.ctxpop){
    position:fixed !important; left:50% !important; right:auto !important;
    top:50% !important; transform:translate(-50%,-50%);
    z-index:80 !important; min-width:230px !important; max-width:92vw;
    max-height:70vh; overflow:auto; box-shadow:0 10px 40px rgba(31,35,40,.35);
  }
  .dd button{ padding:13px 16px !important; font-size:15px !important; }
  [data-pricecell], [data-qtycell]{ text-decoration:underline dotted; }
}

/* ═══ мобильное: ленты вкладок в один ряд с прокруткой ═══ */
@media (max-width:700px){
  .tabbar{
    flex-wrap:nowrap !important;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tabbar::-webkit-scrollbar{ display:none; }
  .tabbar > *{ flex:0 0 auto !important; white-space:nowrap; }
  nav.tabbar .tab{ margin-right:14px; padding:11px 2px; font-size:13px; }
  .ptabs.tabbar button{ padding:10px 12px !important; font-size:12px !important; }
  /* колокольчик всегда виден у правого края ленты + подсказка, что лента листается */
  nav.tabbar > span:last-child{ position:sticky; right:0; background:var(--paper);
    padding-left:8px; box-shadow:-10px 0 10px -7px rgba(35,38,43,.20); }
}

/* ═══ мобильное: строки списков — название сверху, цифры ниже ═══ */
@media (max-width:700px){
  /* --- строка сметы --- */
  .mrow-est{ flex-wrap:wrap !important; gap:6px 8px !important; padding:10px 6px 10px 4px !important; }
  .mrow-est > button[data-act="openEst"]{ order:1; flex:1 1 55% !important; min-width:0; padding:4px 0 !important; }
  .mrow-est > span.mono{ order:2; width:auto !important; margin-left:auto; font-size:15px !important; }
  .mrow-est > span:not(.combo):not(.mono){ order:3; flex:1 1 100% !important; width:auto !important; }
  .mrow-est > label{ order:4; flex-direction:row !important; align-items:center !important; gap:6px !important; padding:0 !important; }
  .mrow-est > button[data-act="openProgress"]{ order:5; margin-left:10px; }
  .mrow-est > span.combo{ order:6; margin-left:auto; }
  .mrow-est > button[data-act="openEst"] > div:first-child{ font-size:15px !important; line-height:1.25; }

  /* --- строка проекта --- */
  .mrow-proj > button{ flex-wrap:wrap !important; gap:6px !important; padding:12px 10px !important; }
  .mrow-proj > button > div:first-child{ flex:1 1 100%; min-width:0; }
  .mrow-proj > button > div:first-child > div:first-child{ font-size:15px !important; line-height:1.25; }
  .mrow-proj > button > div:last-child{ flex:1 1 100% !important; gap:10px !important; justify-content:space-between; }
  .mrow-proj > button > div:last-child > span:first-child{ width:auto !important; flex:1 1 auto; min-width:0; }
  .mrow-proj > button > div:last-child > span.mono{ width:auto !important; flex:none; font-size:15px !important; }

  /* длинные названия переносим по словам */
  .mrow .hd, .mrow div, .mrow span{ overflow-wrap:break-word; word-break:normal; }
}

/* ═══ меню ⋮ у уголка кнопки (позиция задаётся из JS) ═══ */
.dd.ctxpop{ max-width:min(320px,92vw); box-shadow:0 10px 34px rgba(35,38,43,.28); }
@media (pointer:coarse){
  .dd.ctxpop button{ padding:13px 16px !important; font-size:15px !important; }
}

/* ═══ мобильное: крупные зоны тапа у редактируемых чисел ═══ */
@media (max-width:700px) and (pointer:coarse){
  [data-dblc], [data-pricecell], [data-qtycell]{ position:relative; }
  /* прозрачный «нимб» вокруг числа: сам элемент остаётся целью клика */
  [data-dblc]::after, [data-pricecell]::after, [data-qtycell]::after{
    content:""; position:absolute; top:-14px; bottom:-14px; left:-6px; right:-6px;
  }
  [data-dblc]::after{ left:-14px; right:-14px; }
}

/* ═══ мобильное: старая (зачёркнутая) цена — строкой ниже новой ═══ */
@media (max-width:700px){
  [data-pricecell], [data-qtycell]{ white-space:nowrap; line-height:1.35; }
  [data-pricecell] s{ display:block; margin-top:1px; }
}