/* ==========================================================================
   ЖУРНАЛ УЛУЧШЕНИЙ — оформление карточки, быстрой записи и отчётов.
   Отдельный файл фичи: app.css не трогаем, выключение фичи ничего не задевает.
   Цвета и размеры берём те же, что в остальной системе, — экран не должен выбиваться.
   ========================================================================== */

/* ---------- быстрая запись (главный сценарий: телефон, стоя, 30 секунд) ---------- */
.impq { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.impq label { font-size: 12px; color: #555; margin-top: 10px; }
.impq select, .impq textarea, .impq input[type=file] {
  width: 100%; padding: 10px; font-size: 15px; border: 1px solid #ccd2d8; border-radius: 6px; background: #fff;
}
/* Крупные поля не для красоты: на телефоне в них попадают пальцем в перчатке. */
.impq select { height: 44px; }
.impq textarea { resize: vertical; font-family: inherit; }
.impq-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.impq-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid #ccd2d8; }
.impq-note { margin-top: 12px; padding: 8px 10px; background: #eef6ee; border-left: 3px solid #2f7a2f; font-size: 13px; color: #2f5c2f; }

/* ---------- карточка записи ---------- */
.impcard { display: flex; gap: 22px; padding: 14px 16px; }
.impcard .impcol { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.impcard label { font-size: 12px; color: #555; margin-top: 9px; }
.impcard input, .impcard select, .impcard textarea {
  padding: 6px 8px; font-size: 13px; border: 1px solid #ccd2d8; border-radius: 4px; background: #fff; width: 100%;
}
.impcard input:disabled, .impcard select:disabled, .impcard textarea:disabled { background: #f2f4f6; color: #666; }
.impcard textarea { resize: vertical; font-family: inherit; }
.impcard .improw { display: flex; gap: 12px; }
.impcard .improw > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.impphotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.impphoto { display: inline-block; width: 96px; height: 96px; border-radius: 6px;
  border: 1px solid #ccd2d8; background: #f2f4f6; cursor: pointer; overflow: hidden; }
.impphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- таблицы внутри карточки и отчётов ---------- */
.imptbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.imptbl th, .imptbl td { border-bottom: 1px solid #e6eaee; padding: 6px 8px; text-align: left; vertical-align: top; }
.imptbl th { background: #f5f7f9; font-weight: 600; position: sticky; top: 0; }
.imptbl tbody tr:nth-child(even) { background: #fafbfc; }   /* зебра — как во всех таблицах системы */
.imptbl td.r { text-align: right; white-space: nowrap; }

/* ---------- отчёты ---------- */
.impkpi { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 16px 4px; }
.impkpi-i { flex: 1 1 150px; background: #f5f7f9; border-radius: 8px; padding: 12px 14px; }
.impkpi-v { font-size: 22px; font-weight: 600; }
.impkpi-n { font-size: 12px; color: #666; margin-top: 2px; }
.impwarn { margin: 10px 16px; padding: 8px 10px; background: #fff6e6; border-left: 3px solid #b8860b; font-size: 13px; color: #6b5210; }
.impsec { padding: 14px 16px; }
.impsec h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
/* Полоска под названием — чтобы «где болит» читалось с одного взгляда, без вглядывания в цифры. */
.impbar { height: 4px; background: #e6eaee; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.impbar i { display: block; height: 100%; background: #c0392b; }

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  .impcard { flex-direction: column; gap: 10px; }
  .impkpi-i { flex: 1 1 44%; }
}

/* ---------- карточка-черновик в чате «Мастера производства» ---------- */
/* Появляется, когда мужичок разобрал надиктованную фразу. Сохранять он не может —
   человек видит разобранные поля и решает сам. */
.bdraft { border-left: 3px solid #2f7a2f; }
.bdraft-h { font-weight: 600; margin-bottom: 6px; }
.bdraft-r { display: flex; gap: 8px; font-size: 13px; margin: 2px 0; }
.bdraft-r span { color: #777; min-width: 84px; flex: none; }
.bdraft-btn { margin-top: 8px; padding: 7px 12px; border: 0; border-radius: 6px;
  background: #2f7a2f; color: #fff; font-size: 13px; cursor: pointer; }
.bdraft-btn:hover { background: #276a27; }