:root{--ink:#243B47;--concrete:#EDF3F6;--paper:#FFFFFF;--steel:#5E7A88;--line:#D4E4ED;--tape:#89CDE8;--red:#A8321C;--accent:#306883;--accent-deep:#1E4557;--wash:#EAF5FB;}
*{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;color:var(--accent-deep);}
.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:#93A8B2;}
.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:8px 14px;margin-right:2px;font-size:13.5px;font-weight:500;color:var(--steel);border-radius:10px;letter-spacing:.01em;}
.tab:hover{background:#F7FBFD;color:var(--accent);}
.tab[data-on="1"]{background:var(--wash);color:var(--accent-deep);font-weight:600;}
.tape-strip{height:3px;background:var(--tape);opacity:.45;border-radius:2px;}
.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 #EAF1F5;padding:8px 10px;font-size:13px;}
.dd button:hover,.dd button[data-hi="1"]{background:var(--wash);}
.fold{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#F7FBFD;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 78vw !important; max-width:300px; }
  h2{ font-size:16px !important; }
  /* ── Длинные ряды: горизонтальная прокрутка вместо переноса ──────────────
     Встроенные стили в разметке сильнее файла, поэтому !important.
     Полоса прокрутки скрыта, жест работает. Только раскладка — цвета,
     шрифты и оформление не трогаем. */
  .ptabs, nav.tabbar{
    overflow-x:auto !important; overflow-y:hidden;
    flex-wrap:nowrap !important;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .ptabs::-webkit-scrollbar, nav.tabbar::-webkit-scrollbar{ display:none; }
  .ptabs button, nav.tabbar button{ white-space:nowrap !important; flex:0 0 auto !important; }
  /* канбан: колонки листаются вбок, соседняя видна краем */
  .kb-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .kb-wrap::-webkit-scrollbar{ display:none; }
  /* ── Строки списка проектов: не сжимать название в вертикальную «лапшу» ──
     Причина: правая часть (полоска стадии + сумма) держит фиксированную
     ширину и выдавливает название до одной буквы. На узком экране убираем
     полоску стадии и позволяем правой части сжиматься. */
  /* ── Шапка: кнопки (помощь, аватар, выход) — в один ряд с логотипом ──────
     Меню разделов уезжает на свою строку и листается вбок. Так кнопки не
     «висят» отдельной строкой посреди экрана. */
  .hdrow{ flex-wrap:wrap !important; gap:8px !important; align-items:center; }
  .hdrow > .hdlogo{ order:1; flex:0 0 auto; height:34px !important; }
  .hdrow > nav{ order:3; flex:1 1 100% !important; margin-top:2px; }
  .hdrow > .hd, .hdrow > button, .hdrow > span, .hdrow > a{ order:2; }
  .hdrow > span[style*="margin-left:auto"]{ order:2; flex:1 1 0 !important; }

  /* ── Меню «Настройки» на телефоне ────────────────────────────────────────
     Меню лежит внутри прокручиваемой полосы навигации и уезжало вместе с ней
     за край экрана. Открепляем его от полосы: показываем по центру снизу,
     как обычную панель — так оно всегда видно целиком. */
  .setmenu{
    position:fixed !important;
    top:auto !important; bottom:0 !important;
    left:0 !important; right:0 !important;
    width:100% !important; min-width:0 !important;
    border-radius:16px 16px 0 0 !important;
    max-height:70vh; overflow-y:auto;
    box-shadow:0 -6px 24px rgba(0,0,0,.18) !important;
    z-index:80 !important;
    padding:8px 0 20px !important;
  }
  .setmenu button{ padding:13px 20px !important; font-size:15px !important; }

  /* ── Колокольчик: наверх, к логотипу; всплывашка — панелью снизу ─────────
     Он лежал в прокручиваемой полосе разделов и уезжал вправо вместе с ней,
     а его окно обрезалось краем экрана. */
  .hdrow > .bellwrap{ order:2; margin-left:0 !important; }
  .bellpop{
    position:fixed !important;
    top:auto !important; bottom:0 !important;
    left:0 !important; right:0 !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    border-radius:16px 16px 0 0 !important;
    max-height:72vh; overflow-y:auto;
    box-shadow:0 -6px 24px rgba(0,0,0,.18) !important;
    z-index:80 !important;
    padding:12px 16px 22px !important;
  }

  .mrow-stage{ display:none !important; }              /* полоска стадии — не помещается */
  /* ── Список смет: строка перестраивается в две строки ────────────────────
     На узком экране галка «в КП», прогресс, сумма, «Журнал» и меню вместе
     съедали всю ширину — названию оставалась одна буква в строку. Решение:
     название занимает всю первую строку, остальное уходит на вторую. */
  .mrow-est{ flex-wrap:wrap !important; padding-bottom:8px !important; }
  .mrow-est > button[data-act="openEst"]{
    flex:1 1 100% !important; min-width:0 !important; order:1;
    padding-left:14px !important;
  }
  .est-kp{ order:2; padding:0 8px 0 14px !important; flex-direction:row !important; gap:6px !important; }
  .est-prog{ display:none !important; }                    /* процент есть в подписи */
  .est-sum{ order:3; width:auto !important; min-width:70px; flex:1 1 auto !important; text-align:left !important; }
  .est-jrn{ order:4; }
  .mrow-est > span:last-child{ order:5; }                  /* меню ⋮ */
  .mrow-right{ gap:8px !important; flex:0 0 auto !important; }
  .mrow-sum{ width:auto !important; min-width:78px; }
  /* ── Пользователи: имя и почта во всю ширину, кнопки — второй строкой ──── */
  .urow{ flex-wrap:wrap !important; gap:8px !important; }
  .urow-info{ flex:1 1 100% !important; min-width:0 !important; }
  .urow-info > div{ overflow-wrap:anywhere; }
  .hrow{ flex-wrap:wrap !important; }
  .hrow > *{ min-width:0; }
  /* нижняя сводка сметы: компактно, всё видно */
  .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 ──────────────────────────────────────────────────────
     Пустое поле даты в Safari выглядит как узкий серый прямоугольник без
     единой подписи — непонятно, что это дата и куда нажимать. Задаём поле
     нормальной высоты и показываем «дд.мм.гггг» серым, пока оно пустое. */
  input[type="date"], input[type="datetime-local"], input[type="time"]{
    width:100% !important; min-width:0 !important; max-width:100%;
    min-height:38px; padding:8px 10px !important;
    -webkit-appearance:none; appearance:none;
    background:var(--paper);
  }
  /* Safari показывает заполнитель только для пустого поля */
  input[type="date"]:not(:valid)::-webkit-datetime-edit,
  input[type="date"][value=""]::-webkit-datetime-edit{ color:#93A8B2; }
  input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:.55; margin-left:auto; padding:2px;
  }
  /* пары «с — по» не сжимаются в нечитаемые огрызки */
  span:has(> input[type="date"] + span + input[type="date"]){ flex-wrap:wrap; }
  input[type="date"]{ flex:1 1 130px !important; }
  /* колонки складываем в одну, ряды — с переносом (кроме таблиц) */
  #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:anywhere; }
  /* нижняя итоговая панель — компактнее и с переносом */
  #root>div[style*="position:fixed"][style*="bottom"]{ font-size:11px; }
}

/* мобильное меню «⋮» — по центру экрана, поверх всего (не режется прокруткой) */
@media (max-width:700px) and (pointer:coarse){
  .dd{
    position:fixed !important; left:50% !important; right:auto !important;
    top:50% !important;
    /* bottom обязателен: у некоторых меню (например «На согласование») он задан
       в разметке как bottom:calc(100% + 4px) и утаскивал окно за нижний край */
    bottom:auto !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; }
}

/* полоса прокрутки занимает место всегда — шапка не прыгает при смене вкладок разной высоты */
html{overflow-y:scroll;}