* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #f0f2f5;
color: #1a1a1a;
}
.screen { display: none; }
.screen.active { display: block; }
.hidden { display: none !important; }
.placeholder { color: #aaa; padding: 32px; text-align: center; }
/* ── Login ────────────────────────────────────────────────────────── */
#login-screen {
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #2d8a4e 0%, #1a5c32 100%);
}
#login-screen.active { display: flex; }
.login-card {
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,0.15);
width: 360px;
text-align: center;
}
.login-card h1 { color: #2d8a4e; margin-bottom: 4px; font-size: 28px; }
.login-card .subtitle { color: #666; margin-bottom: 24px; font-size: 14px; }
.login-card input {
width: 100%; padding: 12px 16px; margin-bottom: 12px;
border: 1px solid #ddd; border-radius: 8px; font-size: 15px;
}
.login-card button {
width: 100%; padding: 12px; background: #2d8a4e; color: #fff;
border: none; border-radius: 8px; font-size: 16px; cursor: pointer;
}
.login-card button:hover { background: #246e3e; }
.error { color: #d32f2f; margin-top: 12px; font-size: 14px; }
/* ── Header ───────────────────────────────────────────────────────── */
header {
background: #fff;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 100;
}
.header-left h2 { color: #2d8a4e; font-size: 18px; white-space: nowrap; }
#main-nav { display: flex; gap: 4px; flex: 1; }
.nav-btn {
padding: 7px 14px; border: none; background: transparent;
cursor: pointer; border-radius: 6px; font-size: 14px; color: #555;
}
.nav-btn:hover { background: #e8f5e9; }
.nav-btn.active { background: #2d8a4e; color: #fff; }
.header-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
#user-info { font-size: 13px; color: #555; }
/* Селектор «Производство» в шапке (admin/agronomist с доступом к 2+) */
#production-switcher {
padding: 5px 10px; border: 1px solid #c5e0c9; background: #f3faf5;
border-radius: 6px; font-size: 13px; color: #2d8a4e; font-weight: 600;
cursor: pointer;
}
#production-switcher:hover { background: #e6f4ea; }
/* Лейбл текущего производства для прочих ролей (read-only) */
#production-label {
padding: 5px 10px; background: #f3faf5; border-radius: 6px;
font-size: 13px; color: #2d8a4e; font-weight: 600;
}
/* Чекбоксы привязки юзера к производствам в модалках «Пользователи» */
.pu-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pu-checks label {
display: flex; align-items: center; gap: 8px; font-weight: normal;
cursor: pointer; padding: 4px 0;
}
.pu-checks input[type="checkbox"] { margin: 0; }
.user-pu-cell { font-size: 12px; color: #555; }
.user-pu-cell .user-pu-tag {
display: inline-block; background: #e6f4ea; color: #2d8a4e;
border-radius: 4px; padding: 1px 6px; margin-right: 4px;
}
#logout-btn {
padding: 5px 12px; border: 1px solid #ddd; background: #fff;
border-radius: 6px; cursor: pointer; font-size: 13px;
}
#logout-btn:hover { background: #f5f5f5; }
/* ── Main layout ──────────────────────────────────────────────────── */
main { padding: 20px 20px 40px; }
.tab { display: none; }
.tab.active { display: block; }
h3 { margin-bottom: 16px; font-size: 20px; }
/* ── Generic table ────────────────────────────────────────────────── */
table {
width: 100%; border-collapse: collapse;
background: #fff; border-radius: 8px;
overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
thead { background: #f8f9fa; }
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
th { font-weight: 600; color: #555; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }
.badge { padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.badge-active { background: #e8f5e9; color: #2e7d32; }
.badge-needs-norm { background: #fff3e0; color: #e65100; }
.badge-inactive { background: #f5f5f5; color: #999; }
/* ── Harvest ──────────────────────────────────────────────────────── */
.harvest-controls, .bonus-controls {
margin-bottom: 16px; display: flex; gap: 16px; align-items: center;
}
.harvest-controls input, .bonus-controls input {
padding: 7px 11px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;
}
.bonus-controls button {
padding: 7px 16px; background: #2d8a4e; color: #fff;
border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.harvest-input {
width: 90px; padding: 5px 9px; border: 1px solid #ddd;
border-radius: 6px; font-size: 14px; text-align: right;
}
.save-btn {
padding: 4px 11px; background: #2d8a4e; color: #fff;
border: none; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.save-btn:disabled { background: #ccc; cursor: default; }
/* Баннер статуса редактирования урожая */
.harvest-lock-banner {
margin-left: auto;
padding: 5px 12px;
border-radius: 14px;
font-size: 13px;
font-weight: 600;
}
/* Шапка вкладки «Урожай»: заголовок + кнопка «📋 Сбор» слева, дата-инпут справа */
.harvest-tab-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.harvest-tab-header h3 { margin: 0; }
.harvest-tab-header-left {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 1;
min-width: 0;
}
.harvest-share-btn {
background: #fff;
color: #2d8a4e;
border: 1px solid #2d8a4e;
border-radius: 6px;
padding: 5px 11px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.harvest-share-btn:hover { background: #e8f5e9; }
.harvest-share-btn:active { background: #c8e6c9; }
.harvest-date-picker { font-size: 14px; color: #444; }
/* Большая кнопка «Сохранить» — одна на всю таблицу урожая, справа сверху */
.btn-save-all {
padding: 8px 18px;
background: #2d8a4e;
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.btn-save-all:hover:not(:disabled) { background: #1e6e3c; }
.btn-save-all:disabled { background: #ccc; cursor: default; }
/* Подсветка изменённой ячейки в таблице урожая (до нажатия «Сохранить») */
.harvest-input.dirty {
border-color: #f9a825;
background: #fffde7;
box-shadow: 0 0 0 1px #f9a825 inset;
}
/* Навигация по неделям */
.btn-week-nav {
width: 32px; height: 32px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 16px;
line-height: 1;
}
.btn-week-nav:hover { background: #f0fff4; border-color: #2d8a4e; }
.harvest-week-label {
font-weight: 600;
font-size: 14px;
color: #333;
min-width: 180px;
text-align: center;
}
/* Таблица — 7 колонок-дней + итого; компактнее, чем одна широкая колонка */
#harvest-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#harvest-table th,
#harvest-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.harvest-day-th {
text-align: center;
font-size: 11px;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.harvest-day-date { font-size: 12px; color: #999; font-weight: 500; text-transform: none; }
.harvest-day-cell { text-align: center; padding: 4px 5px; }
.harvest-day-cell .harvest-input {
width: 60px;
padding: 4px 6px;
font-size: 13px;
text-align: right;
}
/* Вертикальный стек значений (на заказ / в теплицу / принято) внутри одной ячейки дня.
Каждая строка — grid из двух колонок (значение | чекбокс), чтобы input и RO-текст
всегда стояли в одной вертикали независимо от наличия чекбокса. Подписи строк
(З/Т/П) вынесены в отдельную колонку слева — см. .harvest-stage-labels. */
.harvest-cell-stack {
display: inline-block;
min-width: 70px;
}
.harvest-cell-row {
display: grid;
grid-template-columns: 52px 16px;
align-items: center;
column-gap: 4px;
font-size: 12px;
margin-bottom: 2px;
}
.harvest-cell-row:last-child { margin-bottom: 0; }
/* Колонка с подписями стадий (З/Т/П) — одна на строку культуры, перед днями. */
.harvest-stage-labels {
padding: 4px 6px 4px 2px;
text-align: right;
vertical-align: middle;
}
.harvest-stage-row {
height: 22px;
line-height: 22px;
margin-bottom: 2px;
color: #888;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.harvest-stage-row:last-child { margin-bottom: 0; }
.harvest-stage-th { padding: 0; }
/* Заголовок-разделитель группы культур в таблице урожая («Цветы» / «Микрозелень»). */
.harvest-group-header td {
background: #e8f5e9;
color: #2e7d32;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 12px;
border-bottom: 1px solid #c8e6c9;
}
.harvest-cell-input {
width: 52px;
padding: 2px 5px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 12px;
text-align: right;
background: #fff;
box-sizing: border-box;
}
.harvest-cell-input:disabled { background: #f5f5f5; color: #888; cursor: default; }
/* Единственная визуальная индикация автосохранения — красная рамка,
если предыдущая попытка не прошла. Никаких мигающих оранжевых/зелёных
состояний при обычной работе. */
.harvest-cell-input.save-error,
.harvest-cell-cb.save-error,
.harvest-plan-input.save-error {
border-color: #d32f2f;
background: #ffebee;
box-shadow: 0 0 0 1px #d32f2f inset;
}
.harvest-cell-cb { margin: 0; cursor: pointer; justify-self: center; }
.harvest-cell-cb:disabled { cursor: default; }
.harvest-cell-ro { color: #555; font-size: 12px; text-align: right; padding-right: 5px; }
.harvest-cell-empty .harvest-cell-input,
.harvest-cell-empty .harvest-cell-cb { opacity: 0.55; }
.harvest-day-today {
background: #f0fff4;
}
th.harvest-day-today {
background: #c8e6c9 !important;
color: #1b5e20 !important;
}
.harvest-total {
font-weight: 700;
text-align: center;
background: #fafafa;
}
/* Ячейка «План на день» — input + кнопка сброса при ручном override */
.harvest-plan-cell { padding: 4px 6px; }
.harvest-plan-wrap {
display: inline-flex;
align-items: center;
gap: 4px;
}
.harvest-plan-input {
width: 100px;
padding: 4px 8px;
font-size: 13px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
text-align: right;
color: #999;
-moz-appearance: textfield;
}
.harvest-plan-input::-webkit-outer-spin-button,
.harvest-plan-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.harvest-plan-input::placeholder { color: #aaa; font-style: italic; }
.harvest-plan-input.is-override {
color: #222;
font-weight: 700;
border-color: #90caf9;
background: #f1f8ff;
}
.harvest-plan-input.dirty {
border-color: #f9a825;
background: #fffde7;
box-shadow: 0 0 0 1px #f9a825 inset;
}
.harvest-plan-reset {
background: transparent;
border: 1px solid #ddd;
border-radius: 4px;
padding: 2px 6px;
cursor: pointer;
font-size: 12px;
color: #777;
line-height: 1.2;
}
.harvest-plan-reset:hover { background: #f0fff4; color: #2d8a4e; border-color: #2d8a4e; }
.harvest-lock-banner:empty { display: none; }
.harvest-lock-open { background: #e8f5e9; color: #2e7d32; }
.harvest-lock-admin { background: #e3f2fd; color: #1565c0; }
.harvest-lock-closed { background: #fff3e0; color: #c62828; }
.harvest-input:disabled { background: #f5f5f5; color: #888; cursor: default; }
.harvest-readonly { color: #aaa; font-size: 13px; }
.pct-good { color: #2e7d32; } .pct-warn { color: #f9a825; } .pct-bad { color: #d32f2f; }
/* ── Bonus ────────────────────────────────────────────────────────── */
.bonus-header {
display: flex; gap: 28px; background: #fff;
padding: 14px 18px; border-radius: 8px; margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06); font-size: 15px;
}
.bonus-header strong { font-size: 17px; }
.zone-norm { color: #2e7d32; } .zone-yellow { color: #f9a825; font-weight: 600; }
.zone-red { color: #d32f2f; font-weight: 600; }
.zone-critical { color: #fff; background: #d32f2f; padding: 2px 7px; border-radius: 4px; font-weight: 700; }
/* ── Tasks ────────────────────────────────────────────────────────────────── */
.tasks-toolbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 8px 12px; border-bottom: 1px solid #eee; background: #fff;
}
.tasks-date-filter {
display: flex; align-items: center; gap: 6px;
}
.tasks-toolbar .btn-primary {
margin-left: auto;
}
.task-card-overdue {
border: 2px solid #d32f2f !important;
background: #fff5f5 !important;
}
.task-card-overdue .task-card-title {
color: #d32f2f;
font-weight: 700;
}
.task-card-overdue .task-card-top::before {
content: "⚠ Просрочена";
display: inline-block;
font-size: 10px;
font-weight: 700;
color: #fff;
background: #d32f2f;
border-radius: 4px;
padding: 1px 6px;
margin-right: 6px;
}
.tasks-date-label { font-size: 13px; color: #555; font-weight: 500; }
.tasks-date-inp {
padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px;
font-size: 13px; color: #222; cursor: pointer;
}
.tasks-date-inp:focus { outline: none; border-color: #1976D2; }
.tasks-date-clear {
padding: 4px 10px; border: 1px solid #ccc; border-radius: 6px;
background: #f5f5f5; color: #555; font-size: 12px; cursor: pointer;
}
.tasks-date-clear:hover { background: #e0e0e0; }
/* ── Kanban board ─────────────────────────────────────────────────── */
.kanban-board {
display: flex;
align-items: stretch;
flex: 1;
overflow: hidden;
min-height: 0;
}
.kanban-col {
flex: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #e0e0e0;
min-width: 0;
overflow: hidden;
}
.kanban-col:last-child { border-right: none; }
.kanban-col-header {
padding: 10px 14px;
font-size: 13px;
font-weight: 700;
border-bottom: 3px solid;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.kanban-count {
background: rgba(0,0,0,0.10);
border-radius: 10px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
}
.kanban-cards {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.kanban-empty {
color: #bbb; text-align: center;
padding: 28px 8px; font-size: 13px;
}
.task-card {
background: #fff; border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
cursor: pointer; display: flex; overflow: hidden;
transition: box-shadow 0.15s, transform 0.1s;
}
.task-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.13); transform: translateY(-1px); }
.task-priority-bar { width: 5px; background: var(--pcolor, #999); flex-shrink: 0; }
.task-card-body { flex: 1; padding: 10px 12px; min-width: 0; }
.task-card-top {
display: flex; justify-content: space-between; align-items: center;
gap: 6px; margin-bottom: 5px;
}
.task-op-badge {
font-size: 11px; background: #f0f4f8; color: #555;
padding: 2px 7px; border-radius: 10px; white-space: nowrap;
}
.task-status-badge {
font-size: 11px; color: #fff; padding: 2px 7px; border-radius: 10px; white-space: nowrap;
}
.task-card-title {
font-size: 14px; font-weight: 600; margin-bottom: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card-location {
font-size: 12px; color: #777; margin-bottom: 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card-footer {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: #888; gap: 6px;
}
.task-assignee { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.task-due { color: #888; white-space: nowrap; }
.task-overdue { color: #d32f2f; font-weight: 600; white-space: nowrap; }
/* Task detail modal */
.modal-box-wide { width: 480px; max-width: 96vw; }
.modal-body-scroll { max-height: 70vh; overflow-y: auto; }
/* История обходов — широкая модалка */
#rounds-history-modal .modal-box { width: 820px; max-width: 96vw; }
.rh-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.rh-table th {
text-align: left;
font-size: 11px;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 10px;
border-bottom: 2px solid #e0e0e0;
background: #fafafa;
position: sticky;
top: 0;
}
.rh-table td {
padding: 9px 10px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.rh-row { cursor: pointer; transition: background 0.1s; }
.rh-row:hover td { background: #f5fff7; }
.rh-time, .rh-count { color: #666; font-size: 12px; }
.rh-status {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.rh-st-draft { background: #fff8e1; color: #f57f17; }
.rh-st-done { background: #e8f5e9; color: #2e7d32; }
.rh-actions-cell { width: 36px; text-align: right; }
.rh-del-btn {
border: none; background: #ffebee; color: #c62828;
border-radius: 4px; padding: 2px 8px; font-size: 13px; cursor: pointer;
}
.rh-del-btn:hover { background: #ffcdd2; }
.task-detail-status {
padding: 7px 14px; text-align: center; color: #fff;
font-weight: 600; font-size: 14px; border-radius: 6px; margin-bottom: 12px;
}
.task-detail-section {
background: #f8f9fa; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
}
.task-detail-row {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 0; font-size: 13px; border-bottom: 1px solid #eee; gap: 8px;
}
.task-detail-row:last-child { border-bottom: none; }
.task-detail-row > span:first-child { color: #888; flex-shrink: 0; }
.task-detail-desc {
font-size: 13px; color: #444; background: #fff;
border: 1px solid #eee; border-radius: 6px;
padding: 8px 12px; margin-bottom: 10px; white-space: pre-wrap;
}
.task-detail-report {
background: #e8f5e9; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;
}
.task-report-label {
font-size: 11px; font-weight: 700; color: #2e7d32;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.task-report-photo {
width: 100%; max-height: 220px; object-fit: cover;
border-radius: 4px; margin-bottom: 6px; cursor: pointer;
}
.task-report-comment { font-size: 13px; color: #333; white-space: pre-wrap; }
.task-rejection-note {
background: #fdecea; border: 1px solid #ef9a9a; border-radius: 6px;
padding: 8px 12px; font-size: 13px; color: #d32f2f; margin-bottom: 10px;
}
.task-report-form { margin-top: 10px; }
.task-report-form textarea {
width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px;
font-size: 13px; font-family: inherit; resize: vertical;
margin-bottom: 8px; box-sizing: border-box;
}
.task-photo-label {
font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.task-photo-label input { font-size: 12px; }
.task-reject-form textarea {
width: 100%; padding: 8px 10px; border: 1px solid #ef9a9a; border-radius: 6px;
font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box;
}
.task-delete-btn { margin-right: auto; }
/* ── Reference / Справочник ───────────────────────────────────────────────── */
.ref-header {
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.ref-header h3 { margin: 0; }
.ref-header-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.ref-header-actions button { font-size: 13px; padding: 6px 14px; }
/* Архивная строка — приглушённый фон, перечёркнутое имя */
.ref-row-archived td { background: #fafafa; color: #888; }
.ref-row-archived td strong { text-decoration: line-through; }
/* Колонка действий справа: узкая, кнопка по правому краю строки */
.ref-th-actions { width: 40px; }
.ref-actions-cell {
text-align: right;
width: 40px;
padding-left: 4px !important;
padding-right: 8px !important;
}
/* Маленькие кнопки действия в правой колонке */
.ref-row-del, .ref-row-restore {
border: none;
border-radius: 4px;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
line-height: 1.4;
vertical-align: middle;
}
.ref-row-del { background: #ffebee; color: #c62828; }
.ref-row-del:hover { background: #ffcdd2; }
.ref-row-restore { background: #e8f5e9; color: #2e7d32; }
.ref-row-restore:hover { background: #c8e6c9; }
.ref-subtitle { color: #888; font-size: 13px; margin: 4px 0 0; }
.ref-section { margin-bottom: 32px; }
.ref-section-hd {
display: flex; align-items: center; gap: 10px;
padding: 10px 0 10px; border-bottom: 2px solid #e8f5e9; margin-bottom: 0;
}
.ref-section-icon { font-size: 20px; line-height: 1; }
.ref-section-hd h4 { margin: 0; font-size: 18px; font-weight: 700; color: #1a1a1a; }
.ref-section-sub { color: #999; font-size: 13px; margin-left: 4px; }
.ref-table-wrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; }
/* Закрепляем первый столбец (название культуры) при горизонтальном скролле.
Селекторы: первый | верхней строки шапки (rowspan покрывает обе строки
шапки таблицы цветов) + первый | каждой строки тела. Hover-эффект
на закреплённой ячейке сохраняем переопределением фона. */
.ref-table thead tr:first-child th:first-child,
.ref-table tbody td:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.ref-table thead tr:first-child th:first-child { background: #fafafa; }
.ref-table tbody td:first-child { background: #fff; }
.ref-table tr:hover td:first-child { background: #fafff8; }
.ref-table th {
text-align: left; font-size: 13px; font-weight: 600; color: #666;
padding: 10px 12px; border-bottom: 1px solid #e0e0e0;
white-space: nowrap; background: #fafafa;
}
.ref-table td {
padding: 10px 12px; border-bottom: 1px solid #f0f0f0;
font-size: 14px; vertical-align: middle;
}
.ref-table tr:last-child td { border-bottom: none; }
.ref-table tr:hover td { background: #fafff8; }
.ref-table-micro th:not(:first-child) { text-align: center; }
.ref-table-micro td:not(:first-child) { text-align: center; }
.ref-edit-ro { color: #444; font-weight: 500; }
/* Flowers wide table */
.ref-table-flowers { min-width: 1100px; }
.ref-th-name { min-width: 140px; }
.ref-th-group {
text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; border-bottom: 1px solid #e0e0e0; padding: 14px 10px 8px;
color: #6b7280; background: transparent;
}
.ref-th-input { background: transparent; color: #6b7280; border-left: none; }
.ref-th-calc { background: transparent; color: #6b7280; border-left: none; }
.ref-calc-val { color: #2e7d32; font-weight: 600; }
.ref-calc-seeds { color: #e65100; font-weight: 700; }
.ref-table-flowers td { padding: 11px 12px; white-space: nowrap; text-align: center; }
.ref-table-flowers td.ref-name-cell { text-align: left; }
.ref-table-flowers th { padding: 12px 12px 10px; white-space: nowrap; font-size: 14px; text-align: center; color: #444; font-weight: 600; }
.ref-table-flowers th.ref-th-name { text-align: left; }
.ref-name-cell { white-space: nowrap; min-width: 130px; }
.ref-sel-inp {
font-size: 14px; padding: 5px 7px; border: 1px solid #ddd; border-radius: 4px;
max-width: 140px; background: #fff;
}
.ref-lifespan-unit {
font-size: 13px; padding: 5px 6px; border: 1px solid #ddd; border-radius: 4px;
background: #fff;
}
.culture-dot {
display: inline-block; width: 12px; height: 12px;
border-radius: 50%; margin-right: 8px; vertical-align: middle; flex-shrink: 0;
}
.norm-cell-wrap { display: flex; align-items: center; gap: 6px; }
.norm-input {
width: 90px; padding: 6px 9px;
border: 1px solid #ddd; border-radius: 5px; font-size: 14px;
text-align: center;
}
.norm-cell-wrap { justify-content: center; }
/* Глобально убираем стрелочки спиннера у number-инпутов во всех тб/модалках */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.norm-input:focus { outline: none; border-color: #2d8a4e; box-shadow: 0 0 0 2px #e8f5e9; }
.norm-input-saved { border-color: #4caf50; background: #e8f5e9; transition: border-color 0.25s, background 0.25s; }
/* Список продуктов культуры в справочнике (колонка «Норма») */
.ref-products-cell {
display: flex;
flex-direction: column;
gap: 4px;
align-items: stretch;
}
.ref-product-row {
display: flex;
align-items: center;
gap: 4px;
}
.ref-product-name {
flex: 1;
padding: 4px 7px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 13px;
min-width: 60px;
}
.ref-product-norm {
width: 72px;
padding: 4px 6px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 13px;
text-align: center;
}
.ref-product-del,
.ref-product-del-stub {
width: 22px;
height: 22px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ref-product-del {
background: transparent;
border: 1px solid #eee;
border-radius: 4px;
color: #999;
cursor: pointer;
font-size: 12px;
}
.ref-product-del:hover { background: #fff0f0; color: #d32f2f; border-color: #d32f2f; }
.ref-product-add {
background: transparent;
border: 1px dashed #c0c8c0;
border-radius: 5px;
padding: 3px 8px;
font-size: 12px;
color: #2d8a4e;
cursor: pointer;
white-space: nowrap;
}
.ref-product-add:hover { background: #f0fff4; border-color: #2d8a4e; }
.ref-product-ro {
font-size: 13px;
color: #555;
padding: 2px 0;
}
/* ── Управление пользователями (вкладка Пользователи, только admin) ─────────── */
.users-tab-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.users-tab-header h3 { margin: 0; }
#users-table { width: 100%; border-collapse: collapse; }
#users-table th,
#users-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
#users-table thead th {
text-align: left; font-size: 12px; color: #666;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
background: #fafafa;
}
.user-row-inactive { opacity: 0.55; }
.user-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
}
.user-status-active { background: #e8f5e9; color: #2e7d32; }
.user-status-inactive { background: #ffebee; color: #c62828; }
.user-action-btn {
background: transparent;
border: 1px solid #ddd;
border-radius: 5px;
padding: 3px 8px;
cursor: pointer;
font-size: 14px;
margin-right: 4px;
}
.user-action-btn:hover { background: #f0fff4; border-color: #2d8a4e; }
.user-action-del:hover { background: #fff0f0; border-color: #d32f2f; color: #d32f2f; }
.save-norm-btn {
padding: 6px 12px; background: #2d8a4e; color: #fff;
border: none; border-radius: 5px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.save-norm-btn:hover { background: #246e3e; }
.save-norm-btn:disabled { background: #aaa; cursor: default; }
.ref-no-data { color: #bbb; font-size: 12px; }
.ref-actual-val { color: #555; }
.ref-plan-val { font-weight: 600; color: #1a1a1a; }
.ref-fact-val { color: #2d8a4e; font-weight: 600; }
/* ── Bonus period label ────────────────────────────────────────────────────── */
.bonus-period-label { font-size: 14px; color: #2d8a4e; font-weight: 600; }
/* ══════════════════════════════════════════════════════════════════
MAP
══════════════════════════════════════════════════════════════════ */
.map-page-header {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.map-page-header h3 { margin: 0; white-space: nowrap; }
/* Line tabs */
#map-line-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.line-tab {
padding: 6px 14px; border: 1.5px solid #ddd;
background: #fff; border-radius: 20px;
cursor: pointer; font-size: 13px; color: #555;
transition: all 0.15s;
}
.line-tab:hover { border-color: #2d8a4e; color: #2d8a4e; }
.line-tab.active { background: #2d8a4e; border-color: #2d8a4e; color: #fff; }
/* Line summary bar */
.line-summary {
display: flex; gap: 20px; align-items: center;
background: #fff; border-radius: 8px; padding: 10px 16px;
margin-bottom: 14px; font-size: 13px; color: #555;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.line-summary strong { color: #2d8a4e; font-size: 15px; }
.line-area-wrap { display: inline-flex; align-items: center; gap: 5px; }
.line-area-wrap input {
width: 72px;
padding: 3px 7px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 13px;
text-align: right;
}
.line-area-wrap input:focus { outline: none; border-color: #2d8a4e; box-shadow: 0 0 0 2px #e8f5e9; }
/* Площадь поддона в tray-модалке */
.tray-area-row {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.tray-area-row input {
width: 130px;
padding: 6px 9px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
.tray-area-hint { color: #888; font-size: 11px; }
.tray-area-ro { font-size: 14px; color: #444; padding: 4px 0; }
/* Blocks scroll container */
.blocks-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 12px;
align-items: flex-start;
}
.blocks-scroll::-webkit-scrollbar { height: 6px; }
.blocks-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
.blocks-scroll::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
/* Block card */
.block-card {
background: #fff;
border-radius: 8px;
padding: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
flex-shrink: 0;
min-width: 0;
}
.block-label {
font-size: 11px; font-weight: 700; color: #666;
text-align: center; margin-bottom: 8px;
text-transform: uppercase; letter-spacing: 0.3px;
}
/* Shelves side by side */
.shelves-row {
display: flex;
gap: 6px;
align-items: flex-start;
}
/* Single shelf column */
.shelf-col { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.shelf-label {
font-size: 9px; color: #aaa; margin-bottom: 2px;
text-transform: uppercase; letter-spacing: 0.2px;
}
/* Tier row inside shelf */
.tier-row { display: flex; align-items: center; gap: 3px; }
.tier-num {
font-size: 9px; color: #ccc; width: 10px;
text-align: right; flex-shrink: 0;
}
/* The tray cell */
.tray-cell {
width: 52px;
height: 30px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.08);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 8.5px;
font-weight: 600;
color: rgba(0,0,0,0.55);
background: #f0f0f0;
overflow: hidden;
transition: transform 0.1s, box-shadow 0.1s;
text-align: center;
line-height: 1.1;
padding: 1px 2px;
user-select: none;
}
.tray-cell:hover {
transform: scale(1.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
z-index: 10;
position: relative;
}
.tray-cell.occupied { color: rgba(255,255,255,0.95); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.tray-cell.no-edit { cursor: default; }
.tray-cell.no-edit:hover { transform: none; box-shadow: none; }
/* Legend */
.map-legend {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
font-size: 11px; color: #666;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
/* Кнопка-аккордеон легенды видна только на мобиле — десктоп её игнорирует. */
.map-legend-toggle { display: none; }
@media (max-width: 600px) {
.map-legend-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 8px 14px;
background: #f0f4f7;
border: 1px solid #cfd8dc;
border-radius: 8px;
font-size: 13px;
color: #455a64;
cursor: pointer;
}
.map-legend-toggle:active { background: #e1e8ed; }
.map-legend {
display: none;
width: 100%;
margin-top: 6px;
padding: 8px;
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.map-legend.open { display: flex; }
}
.legend-dot {
min-width: 26px;
height: 22px;
padding: 0 6px;
border-radius: 4px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-shadow: 0 1px 1px rgba(0,0,0,0.45);
box-sizing: border-box;
}
/* ── Split tray ───────────────────────────────────────────────────── */
.tray-cell.split-tray {
overflow: hidden;
position: relative;
}
.split-badge {
position: absolute;
bottom: 1px;
right: 2px;
font-size: 7px;
font-weight: 700;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
line-height: 1;
pointer-events: none;
}
/* ── Split modal styles ───────────────────────────────────────────── */
/* Structure editor (edit mode) */
.split-part-row {
display: grid;
grid-template-columns: 70px 1fr 24px;
gap: 6px;
align-items: center;
margin-bottom: 8px;
}
.split-pct-input {
padding: 6px 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
text-align: right;
width: 100%;
box-sizing: border-box;
}
.split-pct-label {
font-size: 13px;
color: #888;
}
.split-remove-btn {
background: none;
border: none;
color: #d32f2f;
cursor: pointer;
font-size: 18px;
padding: 0;
line-height: 1;
}
.split-remove-btn:hover { color: #b71c1c; }
.add-part-btn {
background: none;
border: 1px dashed #2d8a4e;
color: #2d8a4e;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-size: 13px;
width: 100%;
margin-bottom: 10px;
}
.add-part-btn:hover { background: #e8f5e9; }
.split-total-bar {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #555;
padding: 8px 0 2px;
border-top: 1px solid #eee;
}
.split-ok { color: #2e7d32; font-weight: 600; }
.split-err { color: #d32f2f; font-weight: 600; }
/* Structure empty state */
.split-empty-hint {
text-align: center;
padding: 20px 0 12px;
color: #888;
font-size: 14px;
}
/* Culture assignment per part (normal mode, split tray) */
.split-culture-part {
display: flex;
gap: 8px;
align-items: flex-start;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.split-culture-part:last-child { border-bottom: none; margin-bottom: 0; }
.split-part-color {
width: 10px;
border-radius: 3px;
flex-shrink: 0;
align-self: stretch;
min-height: 54px;
}
.split-part-pct {
font-size: 12px;
font-weight: 700;
color: #555;
min-width: 30px;
padding-top: 9px;
flex-shrink: 0;
}
.split-part-fields {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.split-part-fields select,
.split-part-fields input[type="date"] {
width: 100%;
padding: 7px 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
box-sizing: border-box;
}
/* ── Edit mode controls ───────────────────────────────────────────── */
.edit-mode-btn {
padding: 6px 14px;
border: 1.5px solid #2d8a4e;
background: #fff;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: #2d8a4e;
transition: all 0.15s;
margin-left: 6px;
}
.edit-mode-btn:hover { background: #e8f5e9; }
.edit-mode-btn.active { background: #2d8a4e; color: #fff; }
.edit-mode-btn.active:hover { background: #246e3e; }
.add-struct-btn {
padding: 6px 12px;
border: 1.5px solid #2d8a4e;
background: #e8f5e9;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: #2d8a4e;
}
.add-struct-btn:hover { background: #c8e6c9; }
.del-line-btn {
padding: 6px 12px;
border: 1.5px solid #d32f2f;
background: #fff;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: #d32f2f;
}
.del-line-btn:hover { background: #fdecea; }
/* Block card in edit mode */
.block-card.edit-mode { border: 1.5px dashed #ffb300; position: relative; }
.block-label { position: relative; }
.block-delete-btn {
position: absolute;
right: -6px;
top: -6px;
background: #d32f2f;
color: #fff;
border: none;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
z-index: 5;
}
.block-delete-btn:hover { background: #b71c1c; }
/* Shelf delete button */
.shelf-delete-btn {
font-size: 8px;
background: #d32f2f;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 1px 3px;
margin-left: 2px;
vertical-align: middle;
}
.shelf-delete-btn:hover { background: #b71c1c; }
/* Add/delete tray buttons */
.add-tray-btn {
width: 20px;
height: 30px;
background: #f1f8e9;
border: 1.5px dashed #7cb342;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
color: #558b2f;
line-height: 1;
padding: 0;
flex-shrink: 0;
}
.add-tray-btn:hover { background: #dcedc8; }
.tray-delete-btn {
position: absolute;
top: 1px;
right: 1px;
width: 13px;
height: 13px;
background: rgba(211,47,47,0.85);
color: #fff;
border: none;
border-radius: 2px;
font-size: 8px;
cursor: pointer;
line-height: 13px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.tray-delete-btn:hover { background: #b71c1c; }
.tray-cell { position: relative; }
/* Add shelf column */
.add-shelf-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 4px;
}
.add-shelf-btn {
padding: 6px 8px;
background: #f1f8e9;
border: 1.5px dashed #7cb342;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
color: #558b2f;
white-space: nowrap;
writing-mode: vertical-lr;
text-orientation: mixed;
}
.add-shelf-btn:hover { background: #dcedc8; }
/* ── Modal ────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
z-index: 500;
}
.modal-box {
background: #fff;
border-radius: 12px;
width: 360px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
overflow: hidden;
}
.modal-header {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; border-bottom: 1px solid #eee;
}
.modal-header h4 { font-size: 15px; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #888; }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-body label { font-size: 12px; font-weight: 600; color: #555; margin-bottom: -6px; }
.modal-body select,
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body textarea {
width: 100%; padding: 8px 11px;
border: 1px solid #ddd; border-radius: 6px; font-size: 14px;
font-family: inherit;
box-sizing: border-box;
}
.modal-body textarea { resize: vertical; min-height: 72px; }
.modal-info {
background: #f0f7f0; border: 1px solid #c8e6c9;
border-radius: 6px; padding: 8px 11px; font-size: 12px; color: #2e7d32;
}
.modal-footer {
padding: 12px 18px; border-top: 1px solid #eee;
display: flex; gap: 8px; justify-content: flex-end;
}
.btn-primary { padding: 7px 16px; background: #2d8a4e; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.btn-primary:hover { background: #246e3e; }
.btn-danger { padding: 7px 16px; background: #fff; color: #d32f2f; border: 1px solid #d32f2f; border-radius: 6px; cursor: pointer; font-size: 14px; }
.btn-danger:hover { background: #fdecea; }
.btn-secondary { padding: 7px 14px; background: #f5f5f5; color: #555; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.btn-secondary:hover { background: #ebebeb; }
/* ── Tasks tab map ────────────────────────────────────────────────── */
.tasks-map-section {
background: #fff;
border-bottom: 2px solid #e8f5e9;
padding: 10px 16px 0;
}
.tasks-map-topbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.tasks-map-hint {
font-size: 12px;
color: #2d8a4e;
font-weight: 600;
white-space: nowrap;
}
.tasks-map-line-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.tasks-map-line-tab {
padding: 4px 14px;
border-radius: 6px;
border: 1px solid #ddd;
cursor: pointer;
background: #f5f5f5;
font-size: 13px;
}
.tasks-map-line-tab.active { background: #2d8a4e; color: #fff; border-color: #2d8a4e; }
.tasks-map-line-tab:hover:not(.active) { background: #e8f5e9; border-color: #a5d6a7; }
.tasks-map-content {
max-height: 46vh;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 10px;
}
/* Tasks-map tray: pointer cursor + hover effect */
.tasks-map-tray {
cursor: pointer;
position: relative;
transition: transform 0.1s, box-shadow 0.1s;
}
.tasks-map-tray:hover {
transform: scale(1.12);
box-shadow: 0 0 0 2px #2d8a4e;
z-index: 4;
}
/* Selected tray */
.tasks-map-tray-selected {
outline: 3px solid #2e7d32 !important;
z-index: 3;
}
.tray-sel-mark {
position: absolute;
top: 1px; right: 2px;
font-size: 9px;
color: #fff;
background: #2e7d32;
border-radius: 2px;
line-height: 1.3;
padding: 0 2px;
font-weight: 700;
z-index: 6;
}
/* Selection bar at bottom of map */
.tasks-map-sel-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: #f1f8e9;
border-top: 1px solid #c8e6c9;
}
.tasks-map-sel-count {
font-size: 13px;
color: #33691e;
font-weight: 600;
flex: 1;
}
/* Task badge on tray (count of active tasks) */
.tray-task-badge {
position: absolute;
top: 1px;
left: 1px;
background: #F57C00;
color: #fff;
font-size: 8px;
font-weight: 700;
border-radius: 3px;
min-width: 13px;
height: 13px;
line-height: 13px;
text-align: center;
padding: 0 2px;
z-index: 5;
}
.tasks-list-section {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* Height set via JS depending on whether map is shown */
/* Pre-filled tray info banner in create task form */
.task-form-tray-info {
background: #e8f5e9;
border: 1px solid #a5d6a7;
border-radius: 6px;
padding: 7px 11px;
font-size: 12px;
color: #2e7d32;
font-weight: 600;
margin-bottom: -2px;
}
/* Tray locations list in task detail — clickable */
.task-tray-link {
cursor: pointer;
border-radius: 6px;
padding: 4px 6px;
transition: background 0.15s;
}
.task-tray-link:hover { background: #e8f5e9; }
.task-tray-list {
margin: 0;
padding-left: 16px;
font-size: 12px;
color: #333;
list-style: disc;
}
.task-tray-link-hint {
display: block;
font-size: 11px;
color: #2d8a4e;
font-weight: 600;
margin-top: 3px;
}
/* Green badge for verified tasks */
.tray-task-badge-done {
background: #2e7d32;
right: 1px;
left: auto;
top: auto;
bottom: 1px;
font-size: 7px;
}
/* ── Tray view map modal ──────────────────────────────────────────── */
.modal-box-map-view {
width: 880px;
max-width: 97vw;
}
.tray-view-body {
max-height: 60vh;
overflow-x: auto;
overflow-y: auto;
background: #fafafa;
border: 1px solid #eee;
border-radius: 8px;
padding: 8px;
}
/* Highlighted tray in view modal */
.tray-view-highlight {
outline: 3px solid #2e7d32 !important;
z-index: 5;
animation: tray-pulse 1.8s ease-in-out infinite;
}
@keyframes tray-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(46,125,50,0.7); }
50% { box-shadow: 0 0 0 7px rgba(46,125,50,0); }
}
.tray-view-mark {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
z-index: 6;
pointer-events: none;
}
/* ── Rounds ───────────────────────────────────────────────────────────── */
.rounds-tab-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.rounds-tab-header h3 { margin-bottom: 0; }
.rounds-start-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-round-plants {
padding: 8px 16px;
background: #2d8a4e;
color: #fff;
border: none;
border-radius: 7px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.btn-round-plants:hover { background: #246e3e; }
.btn-round-plants:disabled { opacity: 0.6; cursor: default; }
.btn-round-nutrients {
padding: 8px 16px;
background: #1565c0;
color: #fff;
border: none;
border-radius: 7px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.btn-round-nutrients:hover { background: #0d47a1; }
.btn-round-nutrients:disabled { opacity: 0.6; cursor: default; }
.round-badge-type-plants { background: #e8f5e9; color: #2e7d32; }
.round-badge-type-nutrients { background: #e3f2fd; color: #1565c0; }
/* Round cards list */
#rounds-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.round-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 14px 16px;
cursor: pointer;
transition: box-shadow 0.15s, transform 0.1s;
border-left: 4px solid #e0e0e0;
}
.round-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.12); transform: translateY(-1px); }
.round-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.round-card-date { font-weight: 600; font-size: 15px; color: #222; }
.round-card-time { font-weight: 400; font-size: 13px; color: #888; }
.round-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.round-card-meta { display: flex; gap: 14px; font-size: 12px; color: #888; margin-bottom: 4px; }
.round-card-meta-item {}
.round-card-notes { font-size: 12px; color: #666; margin-top: 6px; font-style: italic; }
/* Status / alert badges */
.round-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.round-badge-done { background: #e8f5e9; color: #2e7d32; }
.round-badge-draft { background: #fff8e1; color: #f57f17; }
.round-badge-crit { background: #fce4ec; color: #c62828; }
.round-badge-warn { background: #fff3e0; color: #e65100; }
/* Round modal */
.modal-box-rounds {
width: min(1100px, 96vw);
max-height: 90vh;
display: flex;
flex-direction: column;
}
.round-meta-row {
display: flex;
gap: 18px;
font-size: 13px;
color: #666;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
/* Line tabs in modal */
.rounds-line-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.rounds-line-tab {
padding: 5px 13px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #555;
}
.rounds-line-tab:hover { background: #e8f5e9; border-color: #a5d6a7; }
.rounds-line-tab.active { background: #2d8a4e; color: #fff; border-color: #2d8a4e; }
/* Block check grid */
.round-blocks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
margin-bottom: 20px;
}
/* ── Date picker (заменил календарь) ──────────────────────────────── */
.rounds-datepicker {
background: #fff; border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,.08);
padding: 12px 16px; display: flex; align-items: center; gap: 10px;
flex: 0 0 auto;
}
.rounds-datepicker label { font-size: 13px; color: #555; font-weight: 600; }
.rounds-datepicker input[type="date"] {
padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px;
font-size: 13px;
}
.rounds-datepicker .btn-secondary { padding: 6px 12px; font-size: 12px; }
/* ── Page tray area (главный экран обхода) ────────────────────────── */
.rounds-tray-area {
background: #fff; border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,.08);
padding: 16px 20px; margin-bottom: 16px;
}
.rounds-tray-empty {
text-align: center; padding: 30px 20px;
}
.rounds-tray-empty h3 { margin: 0 0 10px; }
.rounds-tray-empty p { color: #777; margin-bottom: 16px; }
.rounds-tray-page-hd {
display: flex; align-items: baseline; gap: 16px;
padding-bottom: 10px; border-bottom: 2px solid #e8f5e9;
margin-bottom: 14px;
}
.rounds-tray-page-hd h3 { margin: 0; color: #1b5e20; }
.rounds-tray-page-meta { font-size: 12px; color: #888; }
/* ── Round map inline (новый flow обхода) ─────────────────────────── */
.round-tray-map {
background: #fafafa; padding: 12px;
border: 1px solid #e8e8e8; border-radius: 8px;
max-height: 400px; overflow-y: auto; overflow-x: auto;
margin-bottom: 10px;
}
.round-tray-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: #e3f2fd;
border-radius: 8px; margin-bottom: 10px;
flex-wrap: wrap;
}
.round-tray-counter { font-size: 13px; color: #1565c0; }
.round-tray-counter b { font-size: 16px; }
.round-tray-edit-hint {
font-size: 12px; color: #ef6c00; font-weight: 600;
background: #fff3e0; padding: 4px 10px; border-radius: 12px;
}
.btn-task {
background: #1565c0; color: #fff; border: none; border-radius: 6px;
padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-task:hover { background: #0d47a1; }
.btn-task:disabled { opacity: .4; cursor: not-allowed; }
.round-inline-task {
background: #e3f2fd; border: 2px solid #90caf9;
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.round-inline-form {
background: #f1f8e9; border: 2px solid #aed581;
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.round-inline-form-hd {
font-weight: 700; color: #1b5e20; font-size: 14px;
margin-bottom: 10px; padding-bottom: 8px;
border-bottom: 1px solid #c5e1a5;
}
.inline-photo-section {
margin-top: 10px; padding-top: 8px; border-top: 1px dashed #c5e1a5;
}
.inline-photo-label { font-size: 11px; color: #555; font-weight: 600; margin-bottom: 6px; display: block; }
.inline-photo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.inline-photo-section .tc-photo-add-btn {
width: auto; height: auto; padding: 6px 16px; font-size: 13px;
display: inline-flex; gap: 4px; cursor: pointer;
}
.round-inline-form-actions {
display: flex; gap: 8px; margin-top: 12px;
}
.tc-card-fields-ro {
font-size: 12px; color: #444;
background: #fafafa; padding: 8px 10px;
border-radius: 6px; margin: 8px 0;
display: flex; flex-direction: column; gap: 3px;
}
.tc-card-fields-ro b { color: #666; font-weight: 600; }
.tray-sel-tray-used {
opacity: 0.45; cursor: not-allowed !important;
text-decoration: line-through;
}
.tray-select-used-hint {
color: #888; font-size: 11px; margin-left: 6px;
}
/* ── Tray Checks (round по поддонам) ──────────────────────────────── */
.round-legacy-tag {
display: inline-block; font-size: 10px; color: #999;
font-weight: 400; padding: 2px 8px; border: 1px solid #ddd;
border-radius: 10px; margin-left: 8px; vertical-align: middle;
}
.tc-toolbar {
display: flex; align-items: center; gap: 14px;
margin-bottom: 14px;
}
.tc-toolbar-hint { color: #888; font-size: 12px; }
.tc-list { display: flex; flex-direction: column; gap: 12px; }
.tc-card {
background: #fff; border: 1px solid #e0e0e0;
border-radius: 10px; padding: 12px 14px;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.tc-card-hd {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px; padding-bottom: 8px;
border-bottom: 1px dashed #eee;
}
.tc-card-title { flex: 1; font-size: 14px; }
.tc-btn-edit, .tc-btn-delete {
font-size: 12px; padding: 4px 10px;
border: 1px solid #ccc; border-radius: 5px;
background: #fff; cursor: pointer;
}
.tc-btn-edit:hover { background: #f5f5f5; }
.tc-btn-delete { color: #c62828; border-color: #ef9a9a; }
.tc-btn-delete:hover { background: #ffebee; }
.tc-trays-list {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 12px;
}
.tc-tray-chip {
display: flex; align-items: center; gap: 6px;
padding: 4px 10px; background: #f1f8e9;
border: 1px solid #c8e6c9; border-radius: 12px;
font-size: 11px;
}
.tc-tray-chip-loc { color: #555; }
.tc-tray-chip-cult { color: #2e7d32; font-weight: 600; }
.tc-photos { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #eee; }
.tc-photos-label { font-size: 12px; color: #666; margin-bottom: 6px; }
.tc-photos-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-photo-item { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; }
.tc-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-photo-del {
position: absolute; top: 2px; right: 2px;
background: rgba(0,0,0,.6); color: #fff; border: none;
width: 20px; height: 20px; border-radius: 50%;
font-size: 11px; cursor: pointer; line-height: 1;
}
.tc-photo-add-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px; border: 2px dashed #bdbdbd;
border-radius: 6px; cursor: pointer; font-size: 28px; color: #888;
}
.tc-photo-add-btn:hover { background: #f5f5f5; border-color: #4caf50; color: #4caf50; }
/* ── Tray Selection Modal ──────────────────────────────────────────── */
.tray-select-counter {
padding: 8px 12px; background: #e3f2fd;
border-radius: 6px; margin-bottom: 12px; font-size: 13px; color: #1565c0;
}
.tray-sel-blocks {
display: flex; flex-direction: column; gap: 16px;
}
.tray-sel-block {
background: #fafafa; border: 1px solid #eee;
border-radius: 8px; padding: 10px 12px;
}
.tray-sel-block-hd { font-weight: 600; margin-bottom: 8px; font-size: 13px; color: #333; }
.tray-sel-shelves { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
.tray-sel-shelf {
background: #fff; padding: 6px 8px; border-radius: 6px;
border: 1px solid #f0f0f0;
flex: 0 0 auto; min-width: 120px;
}
.tray-sel-shelf-name { font-size: 11px; color: #777; margin-bottom: 4px; }
.tray-sel-tier {
display: flex; align-items: center; gap: 4px;
flex-wrap: wrap; padding: 2px 0;
}
.tray-sel-tier-num {
font-size: 10px; color: #888; min-width: 24px;
}
.tray-sel-tray {
display: inline-block; min-width: 52px; padding: 4px 6px;
font-size: 10px; text-align: center; cursor: pointer;
border: 2px solid transparent; border-radius: 4px;
user-select: none; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.tray-sel-tray:hover { border-color: #666; }
.tray-sel-tray-on {
border-color: #2e7d32 !important;
box-shadow: 0 0 0 1px #2e7d32 inset;
font-weight: 700;
}
.tray-sel-tray-on::before { content: "✓ "; color: #2e7d32; }
.tray-sel-tray-used {
opacity: 0.45; cursor: not-allowed !important;
filter: grayscale(60%);
position: relative;
}
.tray-sel-tray-used:hover { border-color: transparent; }
.tray-select-used-hint { color: #888; font-size: 12px; }
.bcc-card {
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 10px 12px;
transition: border-color 0.15s;
}
.bcc-card:hover { border-color: #c8e6c9; }
.bcc-header {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
}
.bcc-name { font-weight: 600; font-size: 13px; color: #222; }
.bcc-checked-mark { margin-left: auto; font-size: 12px; color: #2e7d32; font-weight: 700; }
/* Status dot */
.bcc-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid #ddd;
background: #fff;
}
.bcc-dot-ok { background: #66BB6A; border-color: #43A047; }
.bcc-dot-warn { background: #FFA726; border-color: #FB8C00; }
.bcc-dot-crit { background: #EF5350; border-color: #E53935; }
.bcc-dot-none { background: #e0e0e0; border-color: #bdbdbd; }
/* Block check fields */
.bcc-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.bcc-field { display: flex; flex-direction: column; gap: 4px; }
.bcc-field-wide { grid-column: 1 / -1; }
.bcc-field label { font-size: 10px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1; margin-bottom: 0; }
.bcc-field select,
.bcc-field input[type="text"] {
font-size: 12px;
padding: 4px 6px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
width: 100%;
color: #333;
}
.bcc-field select:disabled,
.bcc-field input:disabled { background: #f5f5f5; color: #999; cursor: default; }
/* Болезни/вредители + % поражения в одну строку */
.bcc-field-with-pct {
display: flex;
gap: 6px;
align-items: stretch;
}
.bcc-field-with-pct > select,
.bcc-field-with-pct > input[type="text"] {
flex: 1 1 auto;
min-width: 0;
}
.bcc-field .bcc-pct-input {
flex: 0 0 60px;
width: 60px;
font-size: 12px;
padding: 4px 6px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
color: #333;
text-align: right;
-moz-appearance: textfield;
}
.bcc-field .bcc-pct-input::-webkit-outer-spin-button,
.bcc-field .bcc-pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Notes + photo sections */
.round-notes-section { margin-bottom: 16px; }
.round-notes-label {
display: block;
font-size: 13px;
font-weight: 600;
color: #333;
line-height: 1.5;
padding-top: 20px;
padding-bottom: 4px;
margin-bottom: 10px;
}
.round-textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 7px;
font-size: 13px;
font-family: inherit;
resize: vertical;
color: #333;
margin-bottom: 8px;
}
.round-textarea:disabled { background: #f8f8f8; color: #777; }
.round-photo-section { margin-bottom: 8px; }
.round-photo-wrap { margin: 8px 0; }
.round-photo-img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
border: 1px solid #ddd;
cursor: pointer;
object-fit: contain;
}
.round-photo-upload-btn {
display: inline-block;
padding: 6px 14px;
background: #f1f8e9;
border: 1.5px dashed #7cb342;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #558b2f;
margin-top: 6px;
}
.round-photo-upload-btn:hover { background: #dcedc8; }
/* ── Rounds calendar ──────────────────────────────────────────────────── */
.rounds-topbar {
display: flex; gap: 16px; margin-bottom: 16px;
align-items: stretch;
}
.rounds-topbar > .rounds-calendar { margin-bottom: 0; flex: 0 0 auto; }
.farm-overview {
flex: 1 1 auto; min-width: 0;
background: #fff; border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 12px 16px;
display: flex; flex-direction: column; gap: 8px;
}
.farm-overview-hd {
font-size: 13px; font-weight: 700; color: #333;
padding-bottom: 6px; border-bottom: 1px solid #eee;
}
.farm-overview-legend {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 11px; color: #666; padding: 2px 0 6px;
}
.fo-lg {
display: inline-block; width: 12px; height: 12px;
border-radius: 3px; vertical-align: middle; margin-right: 2px;
border: 1px solid rgba(0,0,0,.1);
}
.fo-lg-gray { background: #eeeeee; }
.fo-lg-partial { background: repeating-linear-gradient(45deg, #fff3e0, #fff3e0 4px, #ffb74d 4px, #ffb74d 8px); }
.fo-lg-ok { background: #a5d6a7; }
.fo-lg-warn { background: #ffb74d; }
.fo-lg-crit { background: #ef5350; }
.fo-line { display: flex; align-items: center; gap: 10px; }
.fo-line-name {
font-size: 11px; color: #666; font-weight: 600;
min-width: 72px; text-align: right;
}
.fo-line-blocks {
display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto;
}
.fo-block {
min-width: 48px; padding: 5px 8px;
font-size: 11px; font-weight: 600; text-align: center;
border-radius: 5px; border: 1px solid rgba(0,0,0,.15);
cursor: default; white-space: nowrap;
}
.fo-block-gray { background: #eeeeee; color: #888; }
.fo-block-partial { background: repeating-linear-gradient(45deg, #fff3e0, #fff3e0 4px, #ffcc80 4px, #ffcc80 8px); color: #e65100; }
.fo-block-ok { background: #c8e6c9; color: #1b5e20; }
.fo-block-warn { background: #ffcc80; color: #bf360c; }
.fo-block-crit { background: #ef9a9a; color: #b71c1c; border-color: #c62828; }
.fo-block-empty { background: #fafafa; color: #bbb; font-style: italic; }
.rounds-calendar {
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 12px 16px 10px;
margin-bottom: 16px;
max-width: 340px;
}
.rcal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.rcal-month-label { font-weight: 600; font-size: 14px; color: #333; }
.rcal-nav {
background: none;
border: 1px solid #e0e0e0;
border-radius: 5px;
width: 28px;
height: 28px;
font-size: 18px;
cursor: pointer;
color: #555;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.rcal-nav:hover { background: #e8f5e9; border-color: #a5d6a7; }
.rcal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.rcal-dow {
text-align: center;
font-size: 10px;
font-weight: 700;
color: #aaa;
text-transform: uppercase;
padding: 3px 0 4px;
}
.rcal-day {
position: relative;
text-align: center;
font-size: 13px;
padding: 5px 2px 2px;
border-radius: 6px;
cursor: pointer;
min-height: 36px;
color: #333;
line-height: 1.3;
transition: background 0.1s;
}
.rcal-day:hover { background: #e8f5e9; }
.rcal-empty { cursor: default; }
.rcal-empty:hover { background: none; }
.rcal-today { font-weight: 700; color: #2d8a4e; border: 1.5px solid #a5d6a7; }
.rcal-selected { background: #2d8a4e !important; color: #fff !important; }
.rcal-selected:hover { background: #246e3e !important; }
.rcal-has-rounds { font-weight: 600; }
.rcal-dots {
display: flex;
justify-content: center;
gap: 2px;
margin-top: 2px;
}
.rcal-dot {
width: 5px;
height: 5px;
border-radius: 50%;
display: inline-block;
}
.rcal-dot-plants { background: #2d8a4e; }
.rcal-dot-nutrients { background: #1565c0; }
.rcal-filter-hint {
margin-top: 8px;
font-size: 12px;
color: #555;
display: flex;
align-items: center;
gap: 8px;
}
.rcal-clear-btn {
padding: 2px 8px;
border: 1px solid #ddd;
background: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
color: #d32f2f;
}
.rcal-clear-btn:hover { background: #fce4ec; }
/* Per-block photo */
.bcc-photo-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid #eee;
}
.bcc-photo-thumb {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 5px;
border: 1px solid #ddd;
cursor: pointer;
flex-shrink: 0;
}
.bcc-photo-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: #f1f8e9;
border: 1.5px dashed #7cb342;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
flex-shrink: 0;
transition: background 0.15s;
}
.bcc-photo-btn:hover { background: #dcedc8; }
/* Round section title */
.round-section-title {
font-size: 13px;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 18px 0 10px;
padding-bottom: 6px;
border-bottom: 2px solid #e8f5e9;
}
/* Nutrient nodes grid — 3 cards in a row */
.rn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 4px;
}
@media (max-width: 740px) {
.rn-grid { grid-template-columns: 1fr; }
}
/* Nutrient node card — same base as bcc-card */
.rn-card {
background: #f0f7ff;
border: 1px solid #bbdefb;
border-radius: 8px;
padding: 10px 12px;
}
.rn-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.rn-field { display: flex; flex-direction: column; gap: 4px; }
.rn-field-wide { grid-column: 1 / -1; }
.rn-field-checks {
grid-column: 1 / -1;
flex-direction: row;
gap: 14px;
align-items: center;
padding: 4px 0 2px;
}
.rn-field label {
font-size: 10px;
color: #78909c;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1;
margin-bottom: 0;
}
.rn-check-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: #333 !important;
font-weight: 500 !important;
cursor: pointer;
}
.rn-check-label input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
.rn-field select,
.rn-field input[type="number"],
.rn-field input[type="text"] {
font-size: 12px;
padding: 4px 6px;
border: 1px solid #90caf9;
border-radius: 5px;
background: #fff;
width: 100%;
color: #333;
}
.rn-field select:disabled,
.rn-field input:disabled { background: #f5f5f5; color: #999; cursor: default; border-color: #ddd; }
/* Тройка уровней (раб. р-р / маточник A / маточник B) — одна строка на всю ширину карточки */
.rn-levels-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 740px) {
.rn-levels-row { grid-template-columns: 1fr 1fr; }
}
/* Поля Елдайзера — голубой фон, чтобы выделялись среди контрольных */
.rn-field input.rn-eldizer {
background: #e3f2fd;
border-color: #90caf9;
}
/* Расхождение между Елдайзером и контрольным прибором (>0.3) — жёлтая обводка.
Идёт ПОСЛЕ .rn-eldizer, чтобы переопределить фон при срабатывании. */
.rn-field input.rn-divergent {
border-color: #f9a825;
background: #fffbe6;
box-shadow: 0 0 0 1px #f9a825 inset;
}
/* ── Bonus tab — премия агронома ──────────────────────────────────────────── */
.bonus-controls {
display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
font-size: 14px; flex-wrap: wrap;
}
.bonus-admin-base-wrap {
margin-left: auto;
display: inline-flex; align-items: center; gap: 8px;
background: #f1f8ff; padding: 6px 12px; border-radius: 8px;
border: 1px solid #bbdefb;
color: #1565c0;
font-size: 13px;
font-weight: 600;
}
.bonus-admin-base-wrap input {
width: 110px;
padding: 5px 8px;
border: 1px solid #90caf9;
border-radius: 5px;
font-size: 14px;
text-align: right;
}
/* Верх вкладки: заголовок + навигация слева, карточка с премией справа */
.bonus-top-row {
display: flex;
gap: 24px;
align-items: flex-start;
margin-bottom: 16px;
flex-wrap: wrap;
}
.bonus-top-left { flex: 1 1 auto; min-width: 0; }
.bonus-top-left h3 { margin-top: 0; }
.bonus-top-left .bonus-controls { margin-bottom: 0; }
/* Кнопка «ℹ Способ расчёта» — ghost-стиль, не отвлекает от карточки премии */
.bonus-help-btn {
align-self: flex-start;
padding: 6px 14px;
border: 1px solid #d0d0d0;
background: transparent;
color: #888;
border-radius: 18px;
font-size: 12px;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bonus-help-btn:hover { background: #f5f5f5; color: #555; border-color: #c0c0c0; }
/* Модалка «Способ расчёта премии» */
.bonus-help-box { max-width: 760px; }
.bonus-help-content { font-size: 13px; line-height: 1.5; color: #333; }
.bonus-help-content h5 {
margin: 18px 0 6px;
font-size: 14px;
color: #2d8a4e;
font-weight: 700;
}
.bonus-help-content h5:first-child { margin-top: 0; }
.bonus-help-content p { margin: 6px 0; }
.bonus-help-content ul,
.bonus-help-content ol { margin: 6px 0; padding-left: 22px; }
.bonus-help-content li { margin: 3px 0; }
.bonus-help-content em { font-style: normal; color: #1976d2; }
.bh-money { color: #2d8a4e; }
.bh-num { color: #1976d2; }
.bh-zone-norm { color: #2e7d32; font-weight: 600; }
.bh-zone-yellow { color: #f9a825; font-weight: 600; }
.bh-zone-red { color: #d32f2f; font-weight: 600; }
.bh-zone-crit { color: #6d4c41; font-weight: 600; }
.bh-formula {
background: #eaf3ff;
border-left: 3px solid #1976d2;
padding: 8px 12px;
margin: 8px 0;
font-size: 13px;
border-radius: 0 4px 4px 0;
}
.bh-zones-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 14px;
font-size: 12.5px;
}
.bh-zones-table th,
.bh-zones-table td {
border: 1px solid #e0e0e0;
padding: 6px 8px;
text-align: left;
vertical-align: top;
}
.bh-zones-table th { background: #f5f5f5; font-weight: 600; }
.bonus-summary {
flex: 0 0 auto;
align-self: flex-start;
}
.bonus-final-card {
background: linear-gradient(135deg, #e8f5e9, #f0fff4);
border: 1px solid #a5d6a7;
border-radius: 12px;
padding: 14px 22px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
min-width: 240px;
max-width: 360px;
}
.bonus-final-label { color: #555; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; line-height: 1.3; }
.bonus-final-value { font-size: 38px; font-weight: 800; color: #2e7d32; margin: 4px 0 6px; line-height: 1.1; }
.bonus-final-breakdown { color: #555; font-size: 12px; line-height: 1.4; }
.bonus-final-breakdown b { color: #333; }
.bonus-final-note { color: #c62828; font-size: 13px; font-weight: 600; margin-top: 4px; }
.bonus-final-card.bonus-final-zero {
background: linear-gradient(135deg, #ffebee, #fff5f5);
border-color: #ef9a9a;
}
.bonus-final-card.bonus-final-zero .bonus-final-value { color: #c62828; }
.bonus-final-card.bonus-final-up .bonus-final-value { color: #1b5e20; }
.bonus-final-card.bonus-final-down .bonus-final-value { color: #ef6c00; }
.bonus-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.bonus-table th {
text-align: left;
font-size: 11px;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 10px;
border-bottom: 2px solid #e0e0e0;
background: #fafafa;
white-space: nowrap;
}
.bonus-table td {
padding: 9px 10px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.bonus-table .bonus-penalty { color: #c62828; font-weight: 600; text-align: right; }
.bonus-table .bonus-bonus { color: #2e7d32; font-weight: 600; text-align: right; }
.bonus-table .bonus-dev-up { color: #2e7d32; font-weight: 600; }
.bonus-table .bonus-dev-down { color: #c62828; font-weight: 600; }
.bonus-coef-input {
width: 60px;
padding: 4px 6px;
border: 1px solid #c8c8c8;
border-radius: 5px;
font-size: 13px;
text-align: center;
}
.bonus-coef-input:focus { outline: none; border-color: #2d8a4e; box-shadow: 0 0 0 2px #e8f5e9; }
.bonus-coef-input:disabled { background: #f5f5f5; color: #999; }
.bonus-zone {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.bonus-zone-norm { background: #e8f5e9; color: #2e7d32; }
.bonus-zone-yellow { background: #fff8e1; color: #f57f17; }
.bonus-zone-red { background: #ffebee; color: #c62828; }
.bonus-zone-crit { background: #c62828; color: #fff; }
.bonus-zone-progress { background: #eceff1; color: #546e7a; }
.bonus-row-zone-yellow td { background: #fffbe6; }
.bonus-row-zone-red td { background: #fff3e0; }
.bonus-row-zone-critical td { background: #ffebee; }
/* Бак для посева — отдельная карточка под сеткой узлов, та же палитра */
.st-card {
background: #f0f7ff;
border: 1px solid #bbdefb;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
}
.st-fields {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 740px) {
.st-fields { grid-template-columns: 1fr; }
}
/* btn-danger for delete */
.btn-danger {
padding: 8px 18px;
border: 1px solid #d32f2f;
background: #fff;
color: #d32f2f;
border-radius: 7px;
cursor: pointer;
font-size: 14px;
}
.btn-danger:hover { background: #fce4ec; }
/* ── Analytics ────────────────────────────────────────────────────────── */
.analytics-header { margin-bottom: 16px; }
.analytics-header h3 { margin-bottom: 10px; }
.analytics-period-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.period-btn {
padding: 6px 14px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #555;
transition: background 0.15s;
}
.period-btn:hover { background: #e8f5e9; border-color: #a5d6a7; }
.period-btn.active { background: #2d8a4e; color: #fff; border-color: #2d8a4e; }
.period-custom {
display: flex;
align-items: center;
gap: 6px;
margin-left: 8px;
}
.period-custom input[type="date"] {
padding: 5px 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
color: #333;
}
.period-sep { color: #aaa; }
.analytics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.analytics-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 16px 18px 14px;
overflow: hidden;
}
.analytics-card-wide { grid-column: 1 / -1; }
.analytics-card-hd {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.analytics-hint {
font-size: 11px;
font-weight: 400;
color: #999;
}
.analytics-chart-wrap {
position: relative;
height: 280px;
}
.analytics-empty {
text-align: center;
color: #bbb;
padding: 32px 16px;
font-size: 13px;
}
.analytics-spinner {
font-size: 12px;
color: #aaa;
text-align: center;
padding: 6px 0 2px;
}
.analytics-select {
margin-left: auto;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 12px;
color: #555;
cursor: pointer;
background: #fff;
}
/* Task log table */
.tasklog-scroll { overflow-x: auto; }
.tasklog-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.tasklog-table thead th {
text-align: left;
padding: 6px 10px;
border-bottom: 2px solid #e8e8e8;
color: #666;
font-weight: 600;
white-space: nowrap;
background: #fafafa;
}
.tasklog-table tbody td {
padding: 7px 10px;
border-bottom: 1px solid #f2f2f2;
vertical-align: middle;
}
.tasklog-table tbody tr:hover td { background: #f6fdf7; }
.tasklog-dt { color: #999; white-space: nowrap; font-size: 12px; }
.tasklog-title { font-weight: 500; max-width: 260px; }
.tasklog-optype { color: #666; font-size: 12px; white-space: nowrap; }
.tasklog-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
color: #fff;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 860px) {
.analytics-grid { grid-template-columns: 1fr; }
.analytics-card-wide { grid-column: auto; }
.analytics-chart-wrap { height: 220px; }
}
/* ══ Reference table — new columns ════════════════════════════════════════════ */
.ref-type-sel {
font-size: 12px; padding: 2px 4px; border: 1px solid #ddd; border-radius: 4px;
background: #fafafa; cursor: pointer; max-width: 110px;
}
.ref-type-badge {
font-size: 12px; color: #555; background: #f0f0f0;
padding: 2px 6px; border-radius: 10px;
}
/* ══ Planting / Посадки tab ════════════════════════════════════════════════════ */
.planting-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px 10px; gap: 12px; flex-wrap: wrap;
}
.planting-header-left h3 { font-size: 18px; color: #2e7d32; margin: 0; }
.planting-header-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-pl-plan {
padding: 7px 16px; border-radius: 6px; border: none; cursor: pointer;
background: #2e7d32; color: #fff; font-size: 13px; font-weight: 600;
}
.btn-pl-plan:hover { background: #1b5e20; }
.btn-pl-germ {
padding: 7px 16px; border-radius: 6px; border: none; cursor: pointer;
background: #1565c0; color: #fff; font-size: 13px; font-weight: 600;
}
.btn-pl-germ:hover { background: #0d47a1; }
.planting-layout {
display: grid; grid-template-columns: 1fr 380px; gap: 0;
height: calc(100vh - 130px); overflow: hidden;
}
.planting-plan-col {
display: flex; flex-direction: column; border-right: 1px solid #e0e0e0; overflow: hidden;
}
.planting-week-nav {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
}
.planting-week-label { font-weight: 600; font-size: 14px; flex: 1; text-align: center; }
#planting-plan-body { flex: 1; overflow-y: auto; padding: 0; }
/* Plan table */
.plan-table {
width: 100%; border-collapse: collapse; font-size: 13px;
}
.plan-table th {
background: #f5f5f5; color: #555; font-weight: 600;
padding: 7px 10px; text-align: left; border-bottom: 2px solid #e0e0e0;
position: sticky; top: 0; z-index: 1;
}
.plan-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.plan-row:hover td { background: #fafafa; }
.plan-row-empty td { color: #bbb; }
.plan-date-cell {
font-size: 12px; white-space: nowrap; min-width: 80px;
display: flex; flex-direction: column; gap: 2px; padding: 6px 8px;
}
.plan-dow { font-weight: 700; font-size: 13px; color: #333; }
.plan-day-txt { font-size: 11px; color: #888; }
.plan-add-btn {
margin-top: 2px; width: 20px; height: 20px; border-radius: 50%; border: none;
background: #e8f5e9; color: #2e7d32; font-size: 14px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.plan-add-btn:hover { background: #c8e6c9; }
.plan-culture-cell { font-weight: 500; }
.plan-num-cell { text-align: center; font-weight: 600; }
.plan-act-cell { white-space: nowrap; }
.plan-empty-hint { color: #ccc; font-style: italic; font-size: 12px; }
/* Plan status badges */
.plan-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.plan-badge-ok { background: #e8f5e9; color: #2e7d32; }
.plan-badge-warn { background: #fff8e1; color: #f57c00; }
.plan-badge-crit { background: #ffebee; color: #c62828; }
.plan-badge-neutral { background: #f5f5f5; color: #757575; }
/* Plan action buttons */
.plan-btn-done {
width: 26px; height: 26px; border-radius: 5px; border: none; cursor: pointer;
background: #e8f5e9; color: #2e7d32; font-size: 14px; font-weight: 700; margin-right: 4px;
}
.plan-btn-done:hover { background: #c8e6c9; }
.plan-btn-del {
width: 26px; height: 26px; border-radius: 5px; border: none; cursor: pointer;
background: #ffebee; color: #c62828; font-size: 14px; font-weight: 700;
}
.plan-btn-del:hover { background: #ffcdd2; }
/* ── Germinator column ─────────────────────────────────────────────────────── */
.germinator-col {
display: flex; flex-direction: column; overflow: hidden; background: #fafafa;
}
.germinator-col-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px; background: #e3f2fd; border-bottom: 1px solid #bbdefb;
font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.germ-show-chk { font-size: 12px; font-weight: 400; color: #555; cursor: pointer; }
#germinator-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
/* Germinator batch cards */
.germ-card {
background: #fff; border-radius: 8px; border-left: 4px solid #bdbdbd;
box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden;
}
.germ-card-germinating { border-left-color: #4caf50; }
.germ-card-ready { border-left-color: #ff9800; }
.germ-card-overdue { border-left-color: #f44336; background: #fff8f8; }
.germ-card-extracted { border-left-color: #9e9e9e; opacity: 0.75; }
.germ-card-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; border-bottom: 1px solid #f0f0f0;
}
.germ-culture-name { font-weight: 700; font-size: 14px; }
.germ-card-rows { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.germ-row { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; }
.germ-row span:first-child { color: #888; flex-shrink: 0; }
.germ-defect-info { color: #c62828 !important; }
.germ-ship-future { color: #1565c0; }
.germ-ship-future span:first-child { color: #1565c0 !important; }
.germ-ship-ready { color: #2e7d32; font-weight: 600; }
.germ-ship-ready span:first-child { color: #2e7d32 !important; }
.germ-notes { font-size: 11px; color: #888; padding: 4px 12px 8px; font-style: italic; }
.germ-card-ft {
display: flex; gap: 6px; padding: 6px 12px 8px; border-top: 1px solid #f0f0f0;
}
/* Germinator status badges */
.germ-st-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.germ-st-germinating { background: #e8f5e9; color: #2e7d32; }
.germ-st-ready { background: #fff3e0; color: #e65100; }
.germ-st-overdue { background: #ffebee; color: #c62828; }
.germ-st-extracted { background: #f5f5f5; color: #9e9e9e; }
/* Germinator action buttons */
.btn-extract {
flex: 1; padding: 5px 10px; border-radius: 5px; border: none; cursor: pointer;
background: #1565c0; color: #fff; font-size: 12px; font-weight: 600;
}
.btn-extract:hover { background: #0d47a1; }
.btn-germ-del {
width: 28px; height: 28px; border-radius: 5px; border: none; cursor: pointer;
background: #ffebee; color: #c62828; font-size: 14px; font-weight: 700;
}
.btn-germ-del:hover { background: #ffcdd2; }
/* Batch extract preview */
.batch-extract-preview { margin-top: 4px; min-height: 18px; }
.batch-preview-txt { font-size: 12px; color: #1565c0; }
/* Extract / defect modal helpers */
.extract-info-txt { font-size: 13px; color: #555; margin-bottom: 4px; font-weight: 600; }
.extract-autoplan-hint {
font-size: 12px; color: #e65100; background: #fff3e0;
border-radius: 5px; padding: 6px 10px; margin-top: 6px;
}
/* btn-danger */
.btn-danger {
padding: 8px 18px; border-radius: 6px; border: none; cursor: pointer;
background: #d32f2f; color: #fff; font-size: 13px; font-weight: 600;
}
.btn-danger:hover { background: #b71c1c; }
/* ── Plan matrix (pivot: rows=cultures, cols=days) ──────────────────────────── */
.plan-matrix-wrap { overflow-x: auto; width: 100%; }
.plan-matrix {
border-collapse: collapse; font-size: 13px; width: 100%; table-layout: fixed;
}
.plan-matrix th, .plan-matrix td {
border: 1px solid #e0e0e0; padding: 0; vertical-align: middle;
}
/* Culture name column (left, sticky) */
.pm-th-cult-lbl {
background: #f5f5f5; color: #555; font-weight: 700; font-size: 12px;
padding: 8px 12px; text-align: left; width: 160px; min-width: 140px;
position: sticky; left: 0; z-index: 2; border-right: 2px solid #ddd;
}
.pm-cult-lbl {
padding: 8px 12px; font-weight: 600; font-size: 13px; color: #333;
background: #fafafa; border-right: 2px solid #ddd;
position: sticky; left: 0; z-index: 1; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.pm-cult-add-cell { background: #f9f9f9; padding: 8px 12px; }
/* Day column headers */
.pm-th-date {
background: #f5f5f5; color: #333; font-weight: 600; font-size: 12px;
padding: 6px 4px; text-align: center; min-width: 88px;
display: table-cell; /* flex не работает в th */
}
.pm-th-date .plan-dow { display: block; font-weight: 700; }
.pm-th-date .plan-day-txt { display: block; color: #888; font-size: 11px; }
.pm-th-today { background: #e8f5e9 !important; border-bottom: 2px solid #66bb6a; }
/* Today column highlight */
.pm-col-today { background-color: rgba(102,187,106,0.06) !important; }
.pmc-done.pm-col-today { background: #dcedc8; }
.pmc-partial.pm-col-today { background: #fff3cd; }
.pmc-overdue.pm-col-today { background: #ffcdd2; }
/* Row hover */
.pm-row:hover .pm-cell { filter: brightness(0.97); }
.pm-row:hover .pm-cult-lbl { background: #f0f0f0; }
/* Data cells */
.pm-cell {
padding: 6px 5px; text-align: center; vertical-align: middle; min-width: 88px;
}
.pm-cell-empty { background: #fafafa; }
/* Cell status colors */
.pmc-done { background: #e8f5e9; }
.pmc-partial { background: #fff8e1; }
.pmc-pending { background: #fff; }
.pmc-overdue { background: #ffebee; }
/* Numbers inside cell: "план / факт бок." */
.pmc-nums {
display: flex; align-items: baseline; justify-content: center;
gap: 2px; font-size: 13px; margin-bottom: 4px;
}
.pmc-plan { font-weight: 700; font-size: 14px; color: #333; }
.pmc-sep { color: #bbb; font-size: 12px; }
.pmc-fact { font-weight: 600; color: #555; }
.pmc-unit { font-size: 10px; color: #999; margin-left: 1px; }
/* Action buttons inside cell */
.pmc-btns { display: flex; gap: 4px; justify-content: center; }
.pmc-btn-done {
width: 24px; height: 22px; border-radius: 4px; border: none; cursor: pointer;
background: #c8e6c9; color: #2e7d32; font-size: 13px; font-weight: 700; line-height: 1;
}
.pmc-btn-done:hover { background: #a5d6a7; }
.pmc-btn-del {
width: 22px; height: 22px; border-radius: 4px; border: none; cursor: pointer;
background: #ffcdd2; color: #c62828; font-size: 12px; font-weight: 700; line-height: 1;
}
.pmc-btn-del:hover { background: #ef9a9a; }
/* Add button in empty cell */
.pmc-add-btn {
width: 24px; height: 24px; border-radius: 50%; border: 1px dashed #bbb;
background: transparent; color: #bbb; font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center; margin: auto; line-height: 1;
}
.pmc-add-btn:hover { background: #e8f5e9; border-color: #66bb6a; color: #2e7d32; }
/* Add culture row at bottom */
.pm-row-addcult td { border-top: 2px dashed #e0e0e0; }
.btn-pl-plan-sm {
padding: 5px 14px; font-size: 12px; border-radius: 5px; border: none; cursor: pointer;
background: #e8f5e9; color: #2e7d32; font-weight: 600;
}
.btn-pl-plan-sm:hover { background: #c8e6c9; }
/* Empty week */
.plan-empty-week { padding: 30px; text-align: center; color: #aaa; font-size: 14px; }
/* Today row highlight */
.plan-row-today td { background: #f1f8e9 !important; }
.plan-row-today .plan-date-cell { border-left: 3px solid #66bb6a; }
.plan-today-chip {
display: inline-block; font-size: 10px; background: #66bb6a; color: #fff;
border-radius: 8px; padding: 1px 6px; font-weight: 700; vertical-align: middle;
}
/* Today banner for workers */
.plan-today-banner {
background: #e8f5e9; border-left: 4px solid #2e7d32; border-radius: 6px;
margin: 10px 10px 8px; padding: 10px 14px;
}
.plan-today-hd { font-weight: 700; font-size: 14px; color: #2e7d32; margin-bottom: 8px; }
.plan-today-row {
display: flex; align-items: center; gap: 10px; padding: 6px 0;
border-bottom: 1px solid #c8e6c9; flex-wrap: wrap;
}
.plan-today-row:last-child { border-bottom: none; }
.plan-today-culture { font-weight: 600; font-size: 14px; flex: 1; min-width: 100px; }
.plan-today-nums { font-size: 13px; color: #555; white-space: nowrap; }
.plan-btn-done-lg {
padding: 5px 14px; border-radius: 5px; border: none; cursor: pointer;
background: #2e7d32; color: #fff; font-size: 13px; font-weight: 600;
}
.plan-btn-done-lg:hover { background: #1b5e20; }
/* Defect photo UI */
.defect-photo-row { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.defect-photo-label { font-size: 13px; color: #555; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.btn-attach-photo {
padding: 5px 12px; border-radius: 5px; border: 1px solid #bbb; cursor: pointer;
background: #f5f5f5; color: #333; font-size: 12px;
}
.btn-attach-photo:hover { background: #e0e0e0; }
.defect-photo-preview { display: flex; align-items: center; gap: 8px; }
.defect-thumb-preview {
width: 64px; height: 64px; object-fit: cover; border-radius: 6px;
border: 1px solid #ddd; cursor: pointer;
}
.defect-photo-name { font-size: 11px; color: #888; word-break: break-all; }
/* Defect photo in germinator card */
.germ-defect-photo-row { padding: 4px 12px 0; }
.defect-thumb {
width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
border: 1px solid #ddd; cursor: pointer;
}
.germ-defect-photo-row + .germ-defect-photo-row { margin-top: 4px; }
/* ── Microgreens reference panel ──────────────────────────────────────────── */
.planting-ref-section {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
margin: 0 0 14px;
overflow: hidden;
}
.planting-ref-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #f1f8e9;
border-bottom: 1px solid #dce8cc;
font-weight: 600;
font-size: 15px;
color: #2e7d32;
}
.btn-ref-close {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #777;
padding: 0 4px;
line-height: 1;
}
.btn-ref-close:hover { color: #c62828; }
.planting-ref-filter {
padding: 8px 16px;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
color: #555;
}
.planting-ref-table-wrap {
overflow-x: auto;
max-height: 380px;
overflow-y: auto;
}
.planting-ref-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.planting-ref-table th {
background: #fafafa;
position: sticky;
top: 0;
z-index: 1;
padding: 8px 10px;
text-align: center;
border-bottom: 2px solid #e0e0e0;
white-space: nowrap;
font-size: 12px;
color: #555;
font-weight: 600;
}
.planting-ref-table td {
padding: 7px 10px;
border-bottom: 1px solid #f5f5f5;
vertical-align: middle;
}
.planting-ref-table tr:hover td { background: #f9fbe7; }
.prt-name { text-align: left !important; min-width: 130px; font-weight: 500; }
.prt-num { text-align: center; min-width: 90px; }
.prt-save { width: 44px; text-align: center; }
.ref-inp {
width: 74px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 4px 6px;
font-size: 13px;
text-align: center;
color: #222;
background: #fafafa;
}
.ref-inp:focus { outline: none; border-color: #66bb6a; background: #fff; }
.ref-inp-int { width: 56px; }
.btn-ref-save {
padding: 4px 8px;
border: 1px solid #a5d6a7;
border-radius: 5px;
background: #e8f5e9;
color: #2e7d32;
cursor: pointer;
font-size: 14px;
transition: background 0.15s;
}
.btn-ref-save:hover { background: #c8e6c9; }
.btn-ref-save:disabled { opacity: 0.5; cursor: default; }
.ref-empty { color: #bbb; font-style: italic; }
.btn-pl-ref {
padding: 7px 14px;
border-radius: 7px;
border: 1px solid #a5d6a7;
background: #f1f8e9;
color: #2e7d32;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: background 0.15s;
}
.btn-pl-ref:hover { background: #c8e6c9; }
.btn-pl-ref-active { background: #a5d6a7; border-color: #66bb6a; }
.btn-pl-ref-active:hover { background: #81c784; }
.btn-pl-import {
padding: 7px 14px; border-radius: 7px; border: 1px solid #b0bec5;
background: #eceff1; color: #37474f; font-size: 13px; font-weight: 600;
cursor: pointer; transition: background 0.15s;
}
.btn-pl-import:hover { background: #cfd8dc; }
/* ── Import plan modal ───────────────────────────────────────────────────── */
.import-format-hint {
background: #f5f5f5; border-radius: 8px; padding: 12px 14px;
margin-bottom: 14px; font-size: 13px;
}
.import-format-hint b { display: block; margin-bottom: 8px; color: #333; }
.import-format-table { overflow-x: auto; margin-bottom: 8px; }
.import-format-table table {
border-collapse: collapse; font-size: 12px; width: auto;
}
.import-format-table th, .import-format-table td {
border: 1px solid #ddd; padding: 4px 10px; text-align: center;
}
.import-format-table th { background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.import-format-table td:first-child { text-align: left; font-weight: 500; }
.import-hint-note { color: #888; font-size: 11px; margin: 0; }
.import-file-label {
display: flex; align-items: center; gap: 10px; cursor: pointer;
border: 2px dashed #b0bec5; border-radius: 8px; padding: 14px 16px;
background: #fafafa; transition: border-color 0.2s;
}
.import-file-label:hover { border-color: #66bb6a; background: #f1f8f1; }
.import-file-label input[type=file] { display: none; }
#import-file-name { color: #555; font-size: 13px; }
.import-result { margin-top: 14px; border-radius: 8px; padding: 12px 14px; }
.import-result-ok { background: #e8f5e9; border: 1px solid #a5d6a7; }
.import-result-error { background: #ffebee; border: 1px solid #ef9a9a; color: #c62828; }
.import-stat-row {
display: flex; justify-content: space-between; gap: 12px;
font-size: 13px; padding: 3px 0;
}
.import-stat-row span:first-child { color: #555; }
.import-stat-row b { color: #1a1a1a; }
.import-unmatched { color: #e65100 !important; margin-top: 6px; }
.import-unmatched span:first-child { color: #e65100 !important; font-weight: 600; }
/* ── Batch-linked task tags ────────────────────────────────────────────────── */
.task-batch-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
margin-left: 4px;
}
.task-batch-extract { background: #e3f2fd; color: #1565c0; }
.task-batch-ship { background: #fff8e1; color: #e65100; }
.btn-task-extract { background: #1565c0; }
.btn-task-extract:hover { background: #0d47a1; }
.btn-task-ship { background: #e65100; }
.btn-task-ship:hover { background: #bf360c; }
@media (max-width: 900px) {
.planting-layout { grid-template-columns: 1fr; height: auto; }
.planting-plan-col { border-right: none; border-bottom: 1px solid #e0e0e0; max-height: 55vh; }
.germinator-col { max-height: 60vh; }
}
/* ══════════════════════════════════════════════════════════════════════════════
MOBILE ≤ 600px
══════════════════════════════════════════════════════════════════════════════ */
/* ── Toast notifications ─────────────────────────────────────────────────── */
#toast-container {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
z-index: 9999; pointer-events: none;
}
.toast {
padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
opacity: 0; transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap; max-width: 90vw; text-align: center;
}
.toast-visible { opacity: 1; transform: translateY(0); }
.toast-info { background: #1976d2; }
.toast-success { background: #2e7d32; }
.toast-warning { background: #e65100; }
.toast-error { background: #c62828; }
/* ── Shelf fill button (microgreens zone mode) ───────────────────────────── */
.shelf-fill-btn {
display: inline-block;
margin-left: 4px;
padding: 1px 5px;
font-size: 11px;
border-radius: 4px;
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
cursor: pointer;
vertical-align: middle;
line-height: 1.4;
}
.shelf-fill-btn:hover { background: #c8e6c9; }
/* ── Rotation Tab ────────────────────────────────────────────────────────── */
#tab-rotation { padding: 0 0 40px; }
.rot-section {
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,.08);
margin-bottom: 24px;
overflow: visible;
}
.rot-section .rot-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 0 0 10px 10px;
}
.rot-section-hd {
display: flex;
align-items: baseline;
gap: 12px;
padding: 14px 20px 10px;
border-bottom: 1px solid #f0f0f0;
}
.rot-section-hd h4 { margin: 0; font-size: 15px; }
.rot-section-sub { font-size: 12px; color: #888; }
/* Summary table */
.rot-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rot-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
.rot-table th, .rot-table td {
padding: 3px 4px;
border: 1px solid #e8e8e8;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rot-table thead th { background: #f8f9fa; font-weight: 600; font-size: 13px; line-height: 1.2; }
.rot-table thead th small { font-size: 11px; color: #888; font-weight: 400; }
.rot-table tbody td { font-size: 14px; }
.rot-table tbody td.rot-col-result { font-size: 15px; }
.rot-th-name { width: 14%; }
.rot-table td.rot-name-cell { text-align: left; }
.rot-table col.rot-c-plan { width: 9%; }
.rot-table col.rot-c-ref { width: 10%; }
.rot-table col.rot-c-area { width: 9%; }
.rot-table col.rot-c-res { width: 10%; }
.rot-th-group { font-size: 11px; letter-spacing: .4px; }
.rot-th-input { background: #f3f6fb !important; color: #1565c0; }
.rot-th-rota { background: #e8f0fe !important; color: #1a237e; }
.rot-th-sow { background: #fffde7 !important; color: #827717; }
.rot-cell-rota { background: #f0f4ff; }
.rot-cell-sow { background: #fffef0; }
.rot-col-ref { background: #f5f5f5 !important; color: #9e9e9e; font-style: italic; }
.rot-col-edit { background: #fff; }
.rot-col-result { background: #e8f5e9 !important; color: #1b5e20; font-weight: 600; }
.rot-inline-input {
width: 100%; max-width: 70px; padding: 2px 5px;
border: 1px solid #a5d6a7; border-radius: 3px;
font-family: inherit; font-size: 14px; text-align: center; background: #fff;
-moz-appearance: textfield;
}
.rot-inline-input::-webkit-outer-spin-button,
.rot-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rot-overridden-mark {
display: inline-block; width: 0; overflow: visible;
margin-left: 4px; color: #f57c00; font-weight: 400;
}
.rot-inline-input:focus { outline: none; border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.2); }
.rot-inline-suffix { color: #888; font-size: 11px; margin-left: 2px; }
.rot-plan-input {
width: 100%; max-width: 70px; padding: 2px 5px;
border: 1px solid #a5d6a7; border-radius: 3px;
font-family: inherit; font-size: 14px; text-align: center; background: #fff;
-moz-appearance: textfield;
}
.rot-plan-input::-webkit-outer-spin-button,
.rot-plan-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rot-plan-input:focus { outline: none; border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.2); }
.rot-plan-input-cell { text-align: center; }
.rot-plan-ok { font-size: 11px; color: #2e7d32; font-weight: 600; }
.rot-plan-gap { font-size: 11px; color: #c62828; font-weight: 600; }
.rot-table tbody tr:hover td { background: #fafafa; }
.rot-totals-row td { background: #f5f5f5 !important; font-weight: 600; border-top: 2px solid #ccc; }
/* ── Flower Batches Tab ──────────────────────────────────────────────── */
#tab-batches { padding: 20px 0 40px; }
.batches-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
}
.batches-header h3 { margin: 0; font-size: 18px; }
.batch-section {
background: #fff; border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,.08);
padding: 16px; margin-bottom: 20px;
}
.batch-section h4 { margin: 0 0 12px; font-size: 14px; }
.batch-pending h4 { color: #f57c00; }
.batch-sowed h4 { color: #2e7d32; }
.batch-checked h4 { color: #546e7a; }
.batch-card {
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 12px 14px; margin-bottom: 10px;
background: #fafafa;
}
.batch-card-pending_check { border-left: 4px solid #ff9800; background: #fff8e1; }
.batch-card-sowed { border-left: 4px solid #4caf50; background: #f1f8e9; }
.batch-card-checked { border-left: 4px solid #9e9e9e; background: #fafafa; }
.batch-card-hd {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.batch-card-title strong { font-size: 15px; }
.batch-card-date { color: #777; font-size: 12px; margin-left: 8px; }
.batch-card-propagation { color: #777; font-size: 12px; margin-left: 4px; font-style: italic; }
.batch-pct {
display: inline-block; padding: 3px 10px; border-radius: 12px;
font-weight: 700; font-size: 13px;
}
.batch-pct-good { background: #c8e6c9; color: #1b5e20; }
.batch-pct-mid { background: #fff9c4; color: #827717; }
.batch-pct-bad { background: #ffcdd2; color: #b71c1c; }
.batch-card-body { font-size: 13px; color: #444; }
.batch-stat { display: inline-block; margin-right: 16px; }
.batch-stat span { color: #888; }
.batch-notes { margin-top: 6px; font-style: italic; color: #555; }
.batch-author { margin-top: 4px; font-size: 11px; color: #999; }
.batch-card-actions {
margin-top: 10px; display: flex; gap: 8px;
}
.batch-card-actions button { font-size: 12px; padding: 5px 12px; }
.batch-check-info-box {
background: #f5f5f5; padding: 10px; border-radius: 6px;
margin-bottom: 12px; font-size: 13px;
}
.batch-card-alert {
border-left: 4px solid #d32f2f !important;
background: #ffebee !important;
box-shadow: 0 0 0 1px #ef9a9a;
}
.batch-alert-banner {
background: #d32f2f; color: #fff;
padding: 6px 10px; margin: -12px -14px 10px;
border-radius: 8px 8px 0 0;
font-size: 12px; font-weight: 600;
}
.batch-pct small { font-weight: 400; font-size: 10px; opacity: .75; }
/* ── Партии: подвкладочный воркфлоу ─────────────────────────────────────── */
.batch-subtabs {
display: flex; gap: 4px; margin: 0 0 18px; padding: 0;
border-bottom: 2px solid #e0e0e0;
}
.batch-subtab-btn {
background: none; border: 2px solid transparent; border-bottom: none;
padding: 9px 18px; cursor: pointer; font-size: 14px; color: #555;
border-radius: 8px 8px 0 0; position: relative; bottom: -2px;
font-weight: 500;
}
.batch-subtab-btn:hover { background: #f5f5f5; }
.batch-subtab-btn.active {
background: #fff; border-color: #e0e0e0; border-bottom: 2px solid #fff;
color: #2d8a4e; font-weight: 700;
}
.batch-subtab-count {
display: inline-block; margin-left: 6px; padding: 1px 8px;
background: #eaeaea; border-radius: 10px; font-size: 12px; color: #555;
}
.batch-subtab-btn.active .batch-subtab-count { background: #c8e6c9; color: #1b5e20; }
.batches-header { margin-bottom: 12px; display: flex; justify-content: flex-end; }
/* Шапка вкладки «Партии»: фильтр по способу размножения слева,
«+ Новая партия» справа. Действует на все подвкладки сразу. */
.batches-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.batches-filter {
font-size: 14px;
color: #444;
display: inline-flex;
align-items: center;
gap: 6px;
}
.batches-filter select {
padding: 5px 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.batch-group-hd { margin: 16px 0 6px; font-size: 14px; color: #444; }
.batch-card-tosow { border-left: 4px solid #1976d2; }
.batch-card-pending-verify { border-left: 4px solid #ffa000; background: #fff8e1; }
.batch-card-sown { border-left: 4px solid #4caf50; }
.batch-card-sprouted { border-left: 4px solid #388e3c; background: #f1f8e9; }
.batch-card-true_leaf { border-left: 4px solid #00897b; background: #e0f2f1; }
.batch-card-bank { border-left: 4px solid #9e9e9e; background: #fafafa; }
.batch-card-overdue { border: 2px solid #ff6f00 !important; box-shadow: 0 0 0 2px #ffe082; }
.batch-overdue-banner {
background: #fff3e0; color: #e65100; font-weight: 600;
padding: 6px 10px; margin: -12px -14px 10px;
border-radius: 6px 6px 0 0;
}
.batch-warn-banner {
background: #fff8e1; color: #ef6c00;
padding: 6px 10px; margin: -12px -14px 10px;
border-radius: 6px 6px 0 0; font-size: 12px;
}
.batch-source {
display: inline-block; padding: 1px 7px; border-radius: 8px;
font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: middle;
}
.batch-source-manual { background: #e3f2fd; color: #1565c0; }
.batch-source-auto { background: #e8f5e9; color: #2e7d32; }
.batch-source-additional { background: #fff3e0; color: #e65100; }
.batch-card-count { font-size: 16px; font-weight: 700; color: #2d8a4e; }
.batch-card-count-edit { display: inline-flex; align-items: baseline; gap: 4px; }
.batch-count-input {
width: 70px;
padding: 3px 6px;
border: 1px solid #c8c8c8;
border-radius: 5px;
font-size: 15px;
font-weight: 700;
color: #2d8a4e;
text-align: right;
background: #fff;
}
.batch-count-input:focus { outline: none; border-color: #2d8a4e; box-shadow: 0 0 0 2px #e8f5e9; }
.batch-count-input:disabled { background: #f5f5f5; color: #999; }
.batch-card-count-unit { font-size: 14px; color: #2d8a4e; font-weight: 600; }
.batch-count-info-box {
background: #f1f8e9; padding: 8px 10px; border-radius: 4px;
margin-bottom: 10px; font-size: 13px;
}
.batch-parent-ref { font-size: 11px; color: #888; margin-top: 4px; }
/* ── Таймлайн стадий в карточке партии ─────────────────────────────────── */
.batch-timeline { margin: 4px 0; font-size: 13px; }
.batch-tl-row {
display: flex; gap: 8px; padding: 2px 0;
border-bottom: 1px dashed transparent;
}
.batch-tl-label { color: #888; min-width: 180px; flex-shrink: 0; }
.batch-tl-value { color: #333; }
.rot-name-cell { text-align: left; }
.rot-trays b { color: #1976d2; }
.rot-nd { color: #bbb; }
.rot-badge {
display: inline-block;
padding: 2px 7px;
border-radius: 10px;
background: #e3f2fd;
color: #1565c0;
font-size: 11px;
white-space: nowrap;
}
.rot-badge-sow {
display: inline-block;
padding: 2px 7px;
border-radius: 10px;
background: #fffde7;
color: #827717;
font-size: 11px;
}
/* Schedule cards */
.rot-sched-card {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
margin: 12px 20px;
overflow: hidden;
}
.rot-sched-has-work {
border-color: #ffb74d;
}
.rot-sched-hd {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 14px;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.rot-sched-meta {
color: #888;
font-size: 12px;
margin-left: 4px;
}
.rot-badge-overdue {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
background: #ffebee;
color: #c62828;
font-size: 11px;
font-weight: 600;
}
.rot-badge-due {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
background: #fff8e1;
color: #e65100;
font-size: 11px;
font-weight: 600;
}
.rot-sched-ok {
padding: 10px 14px;
font-size: 13px;
color: #43a047;
margin: 0;
}
.rot-sched-trays { padding: 6px 8px 8px; }
.rot-tray-row {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 8px;
border-radius: 6px;
margin-bottom: 3px;
font-size: 12px;
}
.rot-tray-overdue { background: #ffebee; }
.rot-tray-due { background: #fff8e1; }
.rot-tray-upcoming { background: #f1f8e9; }
.rot-tray-icon { font-size: 14px; flex-shrink: 0; }
.rot-tray-loc { font-weight: 500; flex: 1; }
.rot-tray-date { color: #888; white-space: nowrap; }
.rot-tray-more {
padding: 4px 8px 6px 28px;
font-size: 12px;
color: #888;
font-style: italic;
}
/* Draft auto-rotation tasks */
.rot-draft-section { border-top: 3px solid #1976d2; }
.rot-draft-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-left: auto;
}
.rot-btn-generate {
padding: 6px 14px; font-size: 13px; border-radius: 6px;
background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9;
cursor: pointer; white-space: nowrap;
}
.rot-btn-generate:hover { background: #bbdefb; }
.rot-btn-confirm-all {
padding: 6px 14px; font-size: 13px; border-radius: 6px;
background: #2e7d32; color: #fff; border: none; cursor: pointer;
}
.rot-btn-confirm-all:hover { background: #1b5e20; }
.rot-btn-discard-all {
padding: 6px 14px; font-size: 13px; border-radius: 6px;
background: #fff; color: #c62828; border: 1px solid #ef9a9a; cursor: pointer;
}
.rot-btn-discard-all:hover { background: #ffebee; }
.rot-draft-empty { padding: 16px 20px; color: #aaa; }
.rot-draft-group { margin: 12px 20px; }
.rot-draft-group-hd {
font-size: 12px; font-weight: 700; color: #666;
text-transform: uppercase; letter-spacing: .5px;
padding: 4px 0 6px; border-bottom: 1px solid #eee; margin-bottom: 6px;
}
.rot-draft-card {
border-radius: 8px;
border: 1px solid #e0e0e0;
margin-bottom: 6px;
overflow: hidden;
}
.rot-draft-remove { border-left: 4px solid #ef5350; }
.rot-draft-place { border-left: 4px solid #66bb6a; }
.rot-draft-card-hd {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 12px; background: #fafafa;
}
.rot-draft-icon { font-size: 16px; flex-shrink: 0; }
.rot-draft-title { font-size: 13px; font-weight: 600; flex: 1; }
.rot-draft-prio-high {
font-size: 11px; padding: 2px 7px; border-radius: 10px;
background: #ffebee; color: #c62828; font-weight: 600;
}
.rot-draft-prio-med {
font-size: 11px; padding: 2px 7px; border-radius: 10px;
background: #e8f5e9; color: #2e7d32;
}
.rot-draft-btns { display: flex; gap: 4px; margin-left: auto; }
.rot-btn-confirm-one {
padding: 4px 10px; font-size: 12px; border-radius: 5px;
background: #43a047; color: #fff; border: none; cursor: pointer;
}
.rot-btn-confirm-one:hover { background: #2e7d32; }
.rot-btn-delete-one {
padding: 4px 8px; font-size: 12px; border-radius: 5px;
background: #fff; color: #c62828; border: 1px solid #ef9a9a; cursor: pointer;
}
.rot-btn-delete-one:hover { background: #ffebee; }
.rot-draft-desc { padding: 6px 12px 8px 38px; background: #fff; }
.rot-draft-addr {
font-size: 12px; color: #555; padding: 2px 0;
border-bottom: 1px dotted #f0f0f0;
}
.rot-draft-addr:last-child { border-bottom: none; }
@media (max-width: 600px) {
/* ── Global ─────────────────────────────────────────────────────────────── */
main { padding: 10px 8px 80px; }
h3 { font-size: 17px; margin-bottom: 10px; }
/* ── Login ──────────────────────────────────────────────────────────────── */
.login-card { width: calc(100vw - 32px); padding: 28px 18px; }
.login-card h1 { font-size: 24px; }
/* ── Header ─────────────────────────────────────────────────────────────── */
/* На мобиле — двухстрочная шапка:
1-я строка: селектор производства слева + «Выйти» справа.
2-я строка: навигация во всю ширину (горизонтальный скролл).
Логотип «АгроКонтроль» прячем — не нужен каждую секунду, экономим место. */
header {
padding: 6px 10px;
gap: 4px;
flex-wrap: wrap;
}
.header-left { display: none; }
#user-info { display: none; }
#logout-btn { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
#production-switcher,
#production-label {
font-size: 12px;
padding: 4px 8px;
}
.header-right {
order: 1;
width: 100%;
justify-content: space-between;
}
/* Nav — на отдельной строке во всю ширину, горизонтальный скролл вместо переноса */
#main-nav {
order: 2;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 2px;
}
#main-nav::-webkit-scrollbar { display: none; }
.nav-btn { padding: 5px 9px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
/* ── Tables — горизонтальный скролл ─────────────────────────────────────── */
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
th, td { padding: 8px 9px; font-size: 12px; white-space: nowrap; }
/* Таблицы Справочника НЕ должны становиться display:block — иначе скролл
уйдёт на саму таблицу и sticky первого столбца (название культуры) поедет
вместе с прокруткой. У них уже есть скролл-контейнер .ref-table-wrap. */
.ref-table { display: table; overflow-x: visible; }
/* ── Modals — снизу экрана (bottom sheet) ───────────────────────────────── */
.modal-overlay { align-items: flex-end; padding: 0; }
.modal-box {
width: 100% !important;
max-width: 100% !important;
border-radius: 20px 20px 0 0 !important;
max-height: 92vh;
overflow-y: auto;
}
.modal-box-wide { width: 100% !important; max-width: 100% !important; }
.modal-body { padding: 14px 16px; gap: 12px; }
.modal-footer { padding: 10px 16px; gap: 8px; }
.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer .btn-danger { flex: 1; text-align: center; }
/* Предотвращаем зум iOS при фокусе на input (font-size < 16px) */
input, select, textarea { font-size: 16px !important; }
/* ── Задачи ─────────────────────────────────────────────────────────────── */
/* Карта поддонов на телефоне не нужна */
.tasks-map-section { display: none; }
/* Тулбар — столбиком */
.tasks-toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
.tasks-date-filter { justify-content: space-between; }
.tasks-toolbar .btn-primary { margin-left: 0; }
.tasks-date-inp { flex: 1; }
.tasks-date-clear { white-space: nowrap; }
/* Канбан — колонки друг под другом */
.tasks-list-section { overflow: visible; flex: none; }
.kanban-board {
flex-direction: column;
height: auto !important;
overflow: visible;
}
.kanban-col {
border-right: none;
border-bottom: 2px solid #e0e0e0;
max-height: none;
overflow: visible;
}
.kanban-col:last-child { border-bottom: none; }
.kanban-cards { max-height: none; overflow: visible; }
/* Карточки задач — перенос заголовка */
.task-card-title { white-space: normal; font-size: 13px; }
.task-card-top { flex-wrap: wrap; gap: 4px; }
.task-card-body { padding: 8px 10px; }
.task-op-badge, .task-status-badge { font-size: 10px; }
.task-card-footer { font-size: 11px; }
/* Детальная модалка задачи */
.task-detail-row { font-size: 12px; }
.task-report-photo { max-width: 100%; height: auto; }
/* ── Посадки ────────────────────────────────────────────────────────────── */
.planting-header { flex-direction: column; gap: 8px; align-items: flex-start; }
.planting-header-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.planting-header-btns button { font-size: 13px; padding: 6px 10px; }
.planting-week-label { font-size: 12px; }
.planting-layout { grid-template-columns: 1fr !important; height: auto !important; }
.planting-plan-col { max-height: none; border-right: none; border-bottom: 1px solid #eee; }
.germinator-col { max-height: none; }
/* Матрица плана — скролл */
.plan-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm-th-cult-lbl, .pm-cult-lbl { min-width: 90px; max-width: 90px; font-size: 11px; }
.pm-th-date, .pm-col-today { min-width: 72px; }
.pmc-nums { font-size: 10px; }
/* Проращиватель */
.germ-card { padding: 10px; }
.germinator-col-hd { padding: 8px 10px; font-size: 13px; }
/* Справочник */
.planting-ref-hd { font-size: 13px; }
.planting-ref-table-wrap { max-height: 280px; }
.planting-ref-table th, .planting-ref-table td { padding: 6px 8px; font-size: 11px; }
.prt-num { min-width: 70px; }
.ref-inp { width: 60px; font-size: 14px !important; }
.ref-inp-int { width: 46px; }
/* ── Сбор урожая ────────────────────────────────────────────────────────── */
/* Заголовок вкладки: «Урожай» + кнопка «📋» слева, дата-инпут справа.
Текст «Дата:» прячем через font-size:0 у label, чтобы остался только сам
инпут (он перебивает font-size глобальным правилом 16px !important).
Дате даём жёсткий width 116px — иначе нативный input стремится быть шире
и распирает строку, из-за чего страница начинает горизонтально скроллиться.
У кнопки «Сбор» на мобильной прячем подпись, оставляем только иконку. */
.harvest-tab-header { gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; min-width: 0; }
.harvest-tab-header h3 { font-size: 16px; flex-shrink: 0; }
.harvest-tab-header-left { gap: 6px; }
.harvest-share-btn { padding: 4px 8px; font-size: 16px; }
.harvest-share-label { display: none; }
.harvest-date-picker { font-size: 0; flex-shrink: 0; min-width: 0; }
.harvest-date-picker input {
width: 116px;
min-width: 0;
padding: 3px 4px;
box-sizing: border-box;
}
/* Защита от случайного page-level horizontal scroll: если что-то изнутри
пробует распереть страницу, она просто обрежется (горизонтальный
скролл внутри .harvest-table-wrap при этом продолжает работать). */
html, body { overflow-x: hidden; }
/* Шапка-управление — только стрелки и день; баннер на мобильной убираем */
.harvest-controls { flex-wrap: wrap; gap: 6px; justify-content: center; }
.harvest-lock-banner { display: none; }
.harvest-week-label {
font-size: 24px;
font-weight: 600;
min-width: 0;
flex: 1;
text-align: center;
color: #2e7d32;
}
/* Шапка управления (стрелки недели) прилипает к верху при вертикальном
скролле — чтобы при пролистывании культур не уезжала.
top смещён под общий sticky-header сайта (≈ 42px на мобильной). */
.harvest-controls {
position: sticky;
top: 42px;
z-index: 60;
background: #f0f2f5;
padding: 6px 0;
margin: 0 0 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
/* Горизонтальный скролл — на обёртку вокруг таблицы, не на саму вкладку,
иначе sticky-top у .harvest-controls работает относительно вкладки,
а не окна, и не «прилипает» к экрану. */
.harvest-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#harvest-table {
display: table !important;
width: auto;
min-width: 100%;
border-collapse: separate; /* sticky + collapse даёт артефакты границ */
border-spacing: 0;
}
#harvest-table th,
#harvest-table td { white-space: normal; }
/* Sticky-left для трёх первых колонок: «Культура» + «План на день» + подписи стадий */
#harvest-table thead th:nth-child(-n+3),
#harvest-table tbody td:nth-child(-n+3) {
position: sticky;
background: #fff;
z-index: 2;
}
/* Суммарная ширина трёх sticky-колонок ≈ 122px (≈ ⅓ экрана на 400px).
Колонка 2 (План) — без подписи в шапке и впритык к подписям стадий.
Название культуры выровнено по правому краю, чтобы прижаться к «14»
и сократить зазор «Алиссум ↔ 14». */
#harvest-table thead th:nth-child(1) {
left: 0;
min-width: 96px;
max-width: 96px;
font-size: 13px;
padding: 6px 4px;
text-align: center;
}
#harvest-table tbody td:nth-child(1) {
left: 0;
min-width: 96px;
max-width: 96px;
font-size: 15px;
padding: 10px 4px;
text-align: center;
vertical-align: middle;
word-break: break-word;
line-height: 1.25;
}
#harvest-table thead th:nth-child(2),
#harvest-table tbody td:nth-child(2) {
left: 96px;
min-width: 38px;
max-width: 38px;
text-align: center;
font-weight: 600;
padding: 6px 0;
font-size: 16px;
overflow: hidden;
}
/* Подпись «План» в шапке прячем (на мобильной её не нужно). */
#harvest-table thead th:nth-child(2) { font-size: 0; padding: 0; }
#harvest-table thead th:nth-child(3),
#harvest-table tbody td:nth-child(3) {
left: 134px;
min-width: 50px;
max-width: 50px;
padding: 4px 8px 4px 1px;
/* визуальная граница, отделяющая прилипшую часть от скроллящейся */
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
}
/* Input колонки «План» в desktop CSS имеет width:100px и вылезал поверх
соседних ячеек. На мобильной сжимаем до 32px и прячем кнопку «↻»
(сбросить можно очистив значение). */
#harvest-table .harvest-plan-cell,
#harvest-table .harvest-plan-wrap { padding: 0; }
#harvest-table .harvest-plan-cell {
text-align: center;
}
#harvest-table .harvest-plan-wrap {
display: flex;
justify-content: center;
}
#harvest-table .harvest-plan-input {
width: 36px;
padding: 2px 2px;
text-align: center;
/* Цифры плана читаются тем же кеглем, что и цифры факта сбора
(Заказ/Теплица/Принято) — глобальный 16px не перебиваем. */
}
#harvest-table .harvest-plan-input::placeholder { font-size: 9px; }
#harvest-table .harvest-plan-reset { display: none; }
/* Шапка sticky-колонок поверх обычных th — повышаем z-index */
#harvest-table thead th:nth-child(-n+3) { z-index: 3; }
/* Подсветка сегодняшней даты не должна побеждать белый sticky-фон */
#harvest-table tbody td.harvest-day-today { background: #f0fff4; }
/* Скрываем «Итого» и «% от плана» — справочные колонки */
#harvest-table thead th:nth-last-child(-n+2),
#harvest-table tbody td:nth-last-child(-n+2) { display: none; }
/* Строка-разделитель групп («Цветы» / «Микрозелень») растянута на всю
ширину видимых колонок: убираем у её td все sticky/hidden эффекты,
которые на мобильной применены к остальным td. */
.harvest-group-header td {
position: static !important;
left: auto !important;
display: table-cell !important;
min-width: 0 !important;
max-width: none !important;
text-align: center;
box-shadow: none !important;
}
/* Уплотняем ячейки дней и стопки значений */
.harvest-day-cell { padding: 3px 3px; }
.harvest-day-th { padding: 4px 2px; font-size: 10px; }
.harvest-day-date { font-size: 11px; }
.harvest-cell-stack { min-width: 62px; }
.harvest-cell-row {
grid-template-columns: 50px 14px;
column-gap: 2px;
margin-bottom: 3px;
}
.harvest-cell-input {
width: 50px;
padding: 2px 4px;
/* font-size перебит global'ом «input { font-size: 16px !important }»,
ничего не делаем — 16px нужен для предотвращения зума на iOS. */
}
/* Колонка стадий — поплотнее */
.harvest-stage-labels { padding: 4px 8px 4px 1px; text-align: right; }
.harvest-stage-row {
font-size: 10px;
height: 26px;
line-height: 26px;
letter-spacing: -0.2px;
}
/* Кнопка «Сохранить» удалена — есть автосохранение. */
/* ── Премия ─────────────────────────────────────────────────────────────── */
.bonus-header { flex-wrap: wrap; gap: 8px; font-size: 13px; }
.bonus-header strong { font-size: 15px; }
/* ── Аналитика ──────────────────────────────────────────────────────────── */
.analytics-header { flex-direction: column; gap: 8px; }
.analytics-period-row { flex-wrap: wrap; gap: 6px; }
.period-custom { flex-wrap: wrap; gap: 4px; width: 100%; }
.analytics-grid { grid-template-columns: 1fr !important; }
.analytics-card-wide { grid-column: auto !important; }
/* ── Обходы ─────────────────────────────────────────────────────────────── */
.rounds-tab-header { flex-direction: column; gap: 8px; align-items: flex-start; }
.rounds-start-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rounds-calendar { gap: 6px; }
.rcal-day { min-width: 38px; font-size: 11px; padding: 4px; }
#rounds-list { grid-template-columns: 1fr; }
/* ── Справочник культур ─────────────────────────────────────────────────── */
.ref-header h3 { font-size: 15px; }
.ref-subtitle { font-size: 12px; }
.ref-section-hd h4 { font-size: 14px; }
.ref-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ref-table th, .ref-table td { padding: 8px 9px; font-size: 13px; }
.norm-input { width: 60px; font-size: 14px !important; }
/* ── Панель управления ──────────────────────────────────────────────────── */
.dashboard-grid { grid-template-columns: 1fr; }
.dash-card-wide, .dash-card-tall { grid-column: auto; grid-row: auto; }
.dash-chart-wrap { height: 240px; }
.dash-card-hd { flex-wrap: wrap; gap: 6px; }
}
/* ── Панель управления ──────────────────────────────────────────────────────── */
.dashboard-header { margin-bottom: 14px; }
.dashboard-header h3 { margin: 0; }
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.dash-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dash-card-wide { grid-column: 1 / -1; }
.dash-card-tall { grid-row: span 2; }
.dash-card-hd {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14px;
color: #2e3a2e;
margin-bottom: 10px;
}
.dash-hint {
font-weight: 400;
font-size: 12px;
color: #888;
}
.dash-mode-toggle { margin-left: auto; display: inline-flex; gap: 4px; }
.dash-mode-btn {
border: 1px solid #c8c8c8;
background: #f5f5f5;
color: #555;
border-radius: 5px;
padding: 3px 10px;
font-size: 12px;
cursor: pointer;
}
.dash-mode-btn.active {
background: #66BB6A;
border-color: #66BB6A;
color: #fff;
}
.dash-chart-wrap { position: relative; height: 280px; }
.dash-empty {
color: #999;
font-size: 13px;
text-align: center;
padding: 40px 0;
}
/* Блок «Обходы» */
.dash-round-group { padding: 6px 0 10px; }
.dash-round-group + .dash-round-group { border-top: 1px solid #eee; padding-top: 10px; }
.dash-round-title { font-size: 13px; color: #555; font-weight: 600; margin-bottom: 4px; }
.dash-round-since {
font-size: 16px;
font-weight: 700;
color: #2e7d32;
margin-bottom: 6px;
}
.dash-round-since.warn { color: #d32f2f; }
.dash-round-empty { font-size: 13px; color: #999; padding: 2px 0; }
.dash-round-item {
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s;
}
.dash-round-item:hover { background: #f0f7f1; }
.dash-round-item-date { font-size: 14px; font-weight: 600; color: #2e3a2e; }
.dash-round-item-sub { font-size: 12px; color: #999; margin-top: 1px; }
.dash-round-ago { font-weight: 600; color: #2e7d32; }
.dash-round-ago.warn { color: #d32f2f; }
/* Список инцидентов на дашборде. По одной строке на инцидент. */
.dash-incidents-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.dash-incident {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
background: #fff5f5;
border: 1px solid #ffcdd2;
cursor: pointer;
transition: background 0.12s, transform 0.1s;
}
.dash-incident:hover { background: #ffebee; }
.dash-incident:active { transform: scale(0.99); }
.dash-incident-icon {
font-size: 16px;
color: #d32f2f;
flex-shrink: 0;
}
.dash-incident-text {
flex: 1;
font-size: 13px;
color: #37474f;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-incident-text b { color: #b71c1c; }
.dash-incident-meta {
font-size: 11px;
color: #888;
white-space: nowrap;
flex-shrink: 0;
}
.dash-incidents-empty {
color: #888;
font-style: italic;
}
/* Заглушки «в разработке» */
.dash-stub { color: #888; font-size: 13px; }
.dash-stub p { margin: 8px 0; }
.dash-stub ul { margin: 6px 0 0; padding-left: 18px; }
.dash-stub li { margin: 3px 0; }
.dash-stub-badge {
display: inline-block;
background: #fff3e0;
color: #e65100;
border: 1px solid #ffcc80;
border-radius: 4px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
}
/* ══ Задачи на основной карте (под map-content) ═══════════════════════════ */
.map-tasks-section {
margin: 16px 12px 24px;
border: 1px solid #cfd8dc;
border-radius: 8px;
background: #fafbfc;
overflow: hidden;
}
.map-tasks-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #eceff1;
border-bottom: 1px solid #cfd8dc;
}
.map-tasks-title {
font-weight: 700;
color: #37474f;
font-size: 14px;
}
.map-tasks-actions {
display: flex;
align-items: center;
gap: 8px;
}
.map-tasks-archive-btn,
.map-tasks-new-btn {
font-size: 12px;
padding: 5px 12px;
}
.map-tasks-list {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 420px;
overflow-y: auto;
}
.map-tasks-list .placeholder { padding: 16px; text-align: center; color: #888; }
/* Карточка задачи в списке под картой. Класс .task-card в файле выше уже
занят kanban-стилем; здесь — самостоятельный лейаут «строка-полоса».
flex-shrink: 0 обязателен: без него при большом числе карточек (40+) в
родительском flex-контейнере с max-height каждая сжимается до ~10px,
и список выглядит как набор тонких красных полосок вместо прокрутки. */
.map-tasks-list .task-card {
display: flex;
align-items: stretch;
flex-shrink: 0;
background: #fff;
border: 1px solid #cfd8dc;
border-left-width: 4px;
border-left-color: #90a4ae;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.15s, transform 0.1s;
padding: 0;
}
.map-tasks-list .task-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
.task-card-overdue { border-left-color: #d32f2f; background: #fff5f5; }
.task-card-today { border-left-color: #f9a825; background: #fffbf2; }
.task-card-future { border-left-color: #1976d2; }
.task-card-main {
flex: 1;
padding: 8px 12px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.task-card-actions {
display: flex;
align-items: center;
padding: 6px 10px;
border-left: 1px dashed #eceff1;
}
.map-tasks-list .task-card-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0;
}
.map-tasks-list .task-op-badge {
background: #eceff1;
color: #37474f;
border-radius: 4px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
}
.task-due {
font-size: 11px;
color: #555;
font-weight: 600;
}
.task-due-overdue { color: #c62828; }
.task-due-today { color: #ef6c00; }
.task-due-future { color: #455a64; }
.task-status {
font-size: 11px;
color: #777;
margin-left: auto;
font-style: italic;
}
.map-tasks-list .task-card-title {
font-size: 13px;
font-weight: 600;
color: #263238;
white-space: normal;
margin: 0;
overflow: hidden;
}
.map-tasks-list .task-card-location {
font-size: 11px;
color: #555;
}
.task-card-assignee {
font-size: 11px;
color: #555;
}
.task-tray-more {
color: #999;
font-style: italic;
}
.task-done-btn {
background: #2e7d32;
color: #fff;
border: none;
border-radius: 6px;
padding: 7px 14px;
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.task-done-btn:hover { background: #1b5e20; }
.task-delete-btn {
background: transparent;
color: #b71c1c;
border: 1px solid #ffcdd2;
border-radius: 6px;
padding: 5px 8px;
font-size: 13px;
cursor: pointer;
}
.task-delete-btn:hover { background: #ffebee; }
/* ══ Секция «Задачи на этом поддоне» внутри карточки поддона ══════════════ */
.tray-tasks-section {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #cfd8dc;
}
.tray-tasks-hd {
font-size: 13px;
font-weight: 700;
color: #37474f;
margin-bottom: 6px;
}
.tray-tasks-count {
display: inline-block;
background: #eceff1;
color: #455a64;
border-radius: 10px;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
margin-left: 4px;
}
.tray-tasks-empty {
color: #999;
font-size: 12px;
font-style: italic;
margin-bottom: 10px;
}
.tray-tasks-mini {
list-style: none;
margin: 0 0 10px;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.tray-tasks-mini li {
display: flex;
align-items: center;
gap: 6px;
background: #f5f7f8;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 5px 8px;
font-size: 12px;
color: #333;
}
.tray-tasks-mini-op {
font-weight: 700;
color: #37474f;
}
.tray-tasks-mini-due { color: #666; }
.tray-tasks-mini-assignee { color: #455a64; font-weight: 600; }
.tray-tasks-mini-del {
margin-left: auto;
background: transparent;
color: #b71c1c;
border: none;
font-size: 14px;
cursor: pointer;
padding: 0 4px;
}
.tray-tasks-mini-del:hover { color: #d32f2f; }
.tray-tasks-mini-done {
margin-left: auto;
background: #2e7d32;
color: #fff;
border: none;
border-radius: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.tray-tasks-mini-done:hover { background: #1b5e20; }
/* Пометка «🌱 Партии» — для системных задач-реминдеров стадий партии.
Закрываются только подтверждением действия на вкладке «Партии», поэтому
у них нет ни «Выполнил», ни «Удалить» в UI. */
.task-batch-pill, .tray-tasks-mini-pill {
display: inline-block;
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
border-radius: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.tray-tasks-mini-pill { margin-left: auto; padding: 2px 7px; }
.tray-tasks-add-btn {
width: 100%;
margin-top: 4px;
}
/* ══ Создание задачи: форма ═══════════════════════════════════════════════ */
.task-form-title-row {
display: contents;
}
.task-form-title-row.hidden { display: none; }
/* ══ Модалка деталей задачи ═══════════════════════════════════════════════ */
.task-detail-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.task-detail-row:last-child { border-bottom: none; }
.task-detail-label { color: #666; font-weight: 600; }
.task-detail-value { color: #263238; text-align: right; max-width: 70%; }
.task-detail-desc {
margin-top: 10px;
padding: 10px 12px;
background: #f5f7f8;
border-radius: 6px;
font-size: 13px;
color: #333;
white-space: pre-wrap;
}
/* ══ Архив задач ══════════════════════════════════════════════════════════ */
.tasks-archive-filters {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: 6px 0 12px;
border-bottom: 1px solid #eceff1;
margin-bottom: 12px;
align-items: center;
font-size: 13px;
}
.tasks-archive-filters label {
display: flex;
align-items: center;
gap: 6px;
color: #455a64;
font-weight: 600;
}
.tasks-archive-filters input,
.tasks-archive-filters select {
padding: 4px 8px;
border: 1px solid #cfd8dc;
border-radius: 5px;
font-size: 13px;
}
.tasks-archive-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.tasks-archive-table th {
background: #eceff1;
color: #37474f;
text-align: left;
padding: 7px 10px;
border-bottom: 1px solid #cfd8dc;
font-weight: 700;
font-size: 12px;
position: sticky;
top: 0;
}
.tasks-archive-table td {
padding: 7px 10px;
border-bottom: 1px solid #f0f0f0;
color: #333;
}
.archive-row-done { }
.archive-row-verified { background: #f1f8e9; }
.archive-row-rejected { background: #ffebee; color: #555; }
/* Мобильная адаптация для списка задач */
@media (max-width: 600px) {
.map-tasks-section { margin: 12px 6px; }
.map-tasks-list { max-height: none; }
.map-tasks-list .task-card {
flex-direction: column;
align-items: stretch;
}
.task-card-actions {
border-left: none;
border-top: 1px dashed #eceff1;
justify-content: flex-end;
padding: 6px 10px;
}
.task-done-btn { width: 100%; padding: 10px; font-size: 14px; }
.task-status { margin-left: 0; }
.tasks-archive-table { font-size: 12px; }
.tasks-archive-table th, .tasks-archive-table td { padding: 5px 6px; }
}
/* ── Эксперименты ─────────────────────────────────────────────────────── */
.exp-page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 4px;
}
.exp-page-header h3 { margin: 0; }
.exp-carousel-wrap {
position: relative;
margin: 8px 16px 16px;
overflow: hidden;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fafafa;
}
.exp-carousel {
display: flex;
gap: 12px;
padding: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* scroll-snap отключён, чтобы он не цеплялся за виртуальный wrap-around */
scrollbar-width: thin;
}
.exp-carousel::-webkit-scrollbar { height: 8px; }
.exp-carousel::-webkit-scrollbar-thumb { background: #c8d0d6; border-radius: 4px; }
.exp-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
border: 1px solid #b0bec5;
color: #455a64;
font-size: 13px;
line-height: 1;
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.exp-carousel-arrow:hover { background: #fff; border-color: #78909c; }
.exp-carousel-arrow:active { transform: translateY(-50%) scale(0.95); }
.exp-carousel-arrow-prev { left: 6px; }
.exp-carousel-arrow-next { right: 6px; }
@media (max-width: 600px) {
.exp-carousel-arrow { width: 32px; height: 32px; font-size: 12px; }
}
.exp-carousel .placeholder {
padding: 24px;
color: #888;
margin: 0 auto;
}
.exp-card {
flex: 0 0 auto;
width: 180px;
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.exp-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.exp-card-date {
text-align: center;
font-size: 12px;
color: #555;
padding: 6px 8px;
background: #f0f4f7;
border-bottom: 1px solid #e0e6ea;
}
.exp-card-photo {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #eef2f5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.exp-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
.exp-card-no-photo {
font-size: 36px;
opacity: 0.35;
}
.exp-card-pending {
position: absolute;
top: 6px;
right: 6px;
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
border-radius: 50%;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* Эксперимент «забыт» — нет правок > 3 календарных дней. Красная рамка. */
.exp-card.exp-card-stale {
border-color: #d32f2f;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}
.exp-card.exp-card-stale:hover {
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
}
.exp-card-label {
text-align: center;
font-size: 13px;
font-weight: 600;
color: #333;
padding: 8px;
border-top: 1px solid #eee;
word-break: break-word;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.exp-actions {
display: flex;
gap: 12px;
padding: 0 16px 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.exp-carousel-wrap { margin: 8px 8px 12px; }
.exp-card { width: 150px; }
.exp-card-date { font-size: 11px; padding: 5px 6px; }
.exp-card-label { font-size: 12px; padding: 6px; }
.exp-actions { padding: 0 8px 16px; }
}
/* ── Выбор типа эксперимента ──────────────────────────────────────────── */
.exp-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
.exp-type-btn {
padding: 18px 12px;
font-size: 15px;
background: #f6f9fc;
border: 1px solid #d0d8e0;
border-radius: 10px;
cursor: pointer;
text-align: center;
transition: background 0.15s, transform 0.1s;
}
.exp-type-btn:hover { background: #e8f1f9; }
.exp-type-btn:active { transform: scale(0.97); }
@media (max-width: 500px) {
.exp-type-grid { grid-template-columns: 1fr; }
.exp-type-btn { padding: 14px 12px; font-size: 14px; }
}
/* ── Модалка карточки эксперимента ─────────────────────────────────────── */
.exp-card-modal-box {
position: relative;
width: 100%;
max-width: 880px;
max-height: 92vh;
display: flex;
flex-direction: column;
}
.exp-card-modal-box .modal-header {
/* Шапка приклеена к верху — кнопка ✕ всегда под рукой даже при скролле. */
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.exp-card-modal-box .modal-body {
overflow-y: auto;
flex: 1;
}
.exp-card-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.exp-card-header-actions .btn-secondary,
.exp-card-header-actions .btn-danger {
padding: 6px 12px;
font-size: 13px;
}
.exp-card-modal-box .modal-close {
width: 36px;
height: 36px;
border-radius: 8px;
font-size: 22px;
line-height: 1;
color: #555;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.exp-card-modal-box .modal-close:hover { background: #f3f3f3; }
.exp-pending-banner {
background: #fff8e1;
border: 1px solid #ffd54f;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 14px;
color: #6f5300;
display: flex;
flex-direction: column;
gap: 8px;
}
.exp-pending-banner .exp-pending-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ── Форма эксперимента ───────────────────────────────────────────────── */
.exp-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
}
.exp-form-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.exp-form-row label {
font-size: 12px;
font-weight: 600;
color: #555;
line-height: 1.2;
}
.exp-form-row-full {
grid-column: 1 / -1;
}
.exp-field {
padding: 7px 9px;
border: 1px solid #c8d0d6;
border-radius: 6px;
font-size: 14px;
background: #fff;
transition: border-color 0.15s, background 0.2s;
font-family: inherit;
}
.exp-field:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 0 2px rgba(74,144,226,0.15);
}
.exp-field[readonly] {
background: #f5f5f5;
color: #555;
cursor: not-allowed;
}
.exp-field-textarea { min-height: 64px; resize: vertical; }
.exp-field-saving { background: #fffdf0; border-color: #f0c350; }
.exp-field-saved { background: #ecfdf3; border-color: #5db075; }
.exp-field-error { background: #fff0f0; border-color: #d32f2f; }
.exp-children-placeholder {
grid-column: 1 / -1;
margin-top: 4px;
padding: 14px;
background: #f6f9fc;
border: 1px dashed #c8d0d6;
border-radius: 8px;
color: #888;
font-size: 13px;
text-align: center;
}
@media (max-width: 600px) {
.exp-form { grid-template-columns: 1fr; }
/* На мобиле снимаем центрирование overlay'а — иначе модалка высотой
в полный экран съезжает выше viewport (адресная строка браузера
сокращает фактический 100vh), и шапка с ✕ уходит за верх. */
#exp-card-modal { align-items: stretch; justify-content: stretch; padding: 0; }
.exp-card-modal-box {
width: 100vw;
max-width: 100vw;
/* 100dvh — динамический viewport height, учитывает скрытие/появление
адресной строки и нижней панели мобильного браузера. */
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
.exp-card-modal-box .modal-header {
/* На мобиле — title слева, ✕ всегда виден в правом верхнем углу,
кнопки Завершить/Удалить переносятся на отдельную строку под title. */
flex-wrap: wrap;
padding-right: 56px;
row-gap: 8px;
}
.exp-card-modal-box .modal-close {
/* fixed относительно viewport — гарантирует видимость даже если
overlay/модалка съедут или layout сломается. */
position: fixed;
top: 8px;
right: 8px;
width: 44px;
height: 44px;
font-size: 24px;
background: #fff;
border: 1px solid #d0d8e0;
z-index: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.exp-card-header-actions {
order: 2;
width: 100%;
gap: 6px;
flex-wrap: wrap;
}
.exp-card-header-actions .btn-secondary,
.exp-card-header-actions .btn-danger { padding: 6px 10px; font-size: 13px; }
}
/* ── Варианты и наблюдения внутри карточки эксперимента ──────────────── */
.exp-add-btn {
align-self: flex-start;
padding: 8px 14px;
background: #f0f4f7;
border: 1px dashed #b0bec5;
border-radius: 6px;
color: #455a64;
cursor: pointer;
font-size: 13px;
margin-top: 8px;
}
.exp-add-btn:hover { background: #e1e8ed; border-color: #78909c; }
.exp-add-btn-sm { padding: 6px 10px; font-size: 12px; }
.exp-row-del {
background: transparent;
border: 1px solid transparent;
color: #b71c1c;
border-radius: 50%;
width: 26px;
height: 26px;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.exp-row-del:hover { background: #fdecea; border-color: #ef9a9a; }
.exp-variants-section {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.exp-variant-card {
background: #fbfbfc;
border: 1px solid #d8d8d8;
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.exp-variant-head {
display: flex;
align-items: center;
gap: 8px;
}
.exp-variant-name-input {
flex: 1;
font-weight: 600;
font-size: 15px;
padding: 7px 9px;
}
.exp-variant-name-ro {
flex: 1;
font-weight: 600;
font-size: 15px;
color: #333;
padding: 7px 9px;
}
.exp-variant-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.exp-variant-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.exp-variant-field label {
font-size: 11px;
font-weight: 600;
color: #666;
line-height: 1.2;
}
.exp-observations-section {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.exp-observations-hd {
font-size: 12px;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: 0.05em;
padding-top: 4px;
}
.exp-form > .exp-observations-section {
grid-column: 1 / -1;
}
.exp-obs-card {
background: #fff;
border: 1px solid #e0e6ea;
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.exp-obs-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.exp-obs-title {
font-weight: 600;
color: #455a64;
font-size: 13px;
}
.exp-obs-text-input { min-height: 56px; resize: vertical; }
.exp-obs-text-ro {
white-space: pre-wrap;
color: #333;
font-size: 14px;
}
.exp-children-placeholder-sm {
padding: 8px;
font-size: 12px;
margin-top: 4px;
}
@media (max-width: 600px) {
.exp-variant-fields { grid-template-columns: 1fr; }
}
/* ── Галереи фото ───────────────────────────────────────────────────── */
.exp-main-gallery-wrap {
grid-column: 1 / -1;
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 6px;
}
.exp-gallery-label {
font-size: 12px;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.exp-gallery {
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: max-content;
}
.exp-gallery-frame {
position: relative;
background: #eef2f5;
border: 1px solid #c8d0d6;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.exp-gallery-lg .exp-gallery-frame { width: 280px; height: 230px; }
.exp-gallery-sm .exp-gallery-frame { width: 200px; height: 160px; }
.exp-gallery-viewport {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.exp-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
.exp-gallery-empty {
font-size: 56px;
opacity: 0.3;
}
.exp-gallery-add {
position: absolute;
top: 6px;
right: 6px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
border: 1px solid #b0bec5;
color: #2e7d32;
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
z-index: 2;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.exp-gallery-add:hover { background: #f1f8e9; border-color: #2e7d32; }
.exp-gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
border: 1px solid #b0bec5;
color: #455a64;
font-size: 13px;
line-height: 1;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.exp-gallery-nav:hover { background: #fff; }
.exp-gallery-prev { left: 6px; }
.exp-gallery-next { right: 6px; }
.exp-gallery-footer {
margin-top: 4px;
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
font-size: 11px;
color: #666;
min-height: 22px;
}
.exp-gallery-counter { font-weight: 600; color: #455a64; }
.exp-gallery-date { flex: 1; text-align: center; }
.exp-gallery-del {
background: transparent;
border: 1px solid transparent;
color: #b71c1c;
width: 24px;
height: 22px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
line-height: 1;
}
.exp-gallery-del:hover { background: #fdecea; border-color: #ef9a9a; }
/* Тело наблюдения: текст слева, мини-галерея справа */
.exp-obs-body {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: start;
}
.exp-obs-text-col { display: flex; flex-direction: column; gap: 4px; }
.exp-obs-gallery-col { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
.exp-gallery-lg .exp-gallery-frame { width: 100%; max-width: 320px; height: 220px; }
.exp-gallery-sm .exp-gallery-frame { width: 100%; max-width: 280px; height: 200px; }
.exp-gallery { width: 100%; }
.exp-obs-body { grid-template-columns: 1fr; }
}
/* ── Режим чтения эксперимента (read-only «статья») ─────────────────────── */
.exp-read {
max-width: 760px;
margin: 0 auto;
padding: 8px 4px 24px;
color: #222;
line-height: 1.5;
font-size: 15px;
}
.exp-read-head { margin-bottom: 18px; }
.exp-read-head h2 { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: #1a1a1a; }
.exp-read-type { color: #2d8a4e; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.exp-read-title { margin-top: 6px; font-size: 18px; color: #455a64; }
.exp-read-h3 {
margin: 24px 0 10px;
font-size: 18px; font-weight: 700;
color: #2d8a4e;
padding-bottom: 4px;
border-bottom: 1px solid #e0e0e0;
}
.exp-read-meta {
display: grid;
grid-template-columns: minmax(140px, auto) 1fr;
column-gap: 16px; row-gap: 6px;
margin: 0 0 12px;
}
.exp-read-meta dt { color: #777; font-weight: 600; }
.exp-read-meta dd { margin: 0; color: #1a1a1a; }
.exp-read-block { margin: 14px 0; }
.exp-read-block-label { color: #777; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.exp-read-text { white-space: normal; word-wrap: break-word; }
.exp-read-photo {
margin: 14px 0;
text-align: center;
}
.exp-read-photo img {
max-width: 100%; height: auto;
border-radius: 6px;
border: 1px solid #e8e8e8;
cursor: zoom-in;
display: block;
margin: 0 auto;
}
.exp-read-photo figcaption {
color: #888; font-size: 12px; margin-top: 4px;
}
.exp-read-obs {
margin: 14px 0 18px;
padding-left: 12px;
border-left: 3px solid #e0e0e0;
}
.exp-read-obs-hd {
font-weight: 700; color: #37474f; font-size: 14px; margin-bottom: 4px;
}
.exp-read-variant {
margin-top: 20px;
}
.exp-read-muted { color: #999; font-style: italic; }
@media (max-width: 600px) {
.exp-read { font-size: 14px; padding: 6px 2px 20px; }
.exp-read-head h2 { font-size: 22px; }
.exp-read-meta { grid-template-columns: 1fr; row-gap: 2px; }
.exp-read-meta dt { margin-top: 6px; }
}
/* ── Лайтбокс просмотра фото ─────────────────────────────────────────── */
.photo-lightbox {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.photo-lightbox-img {
max-width: 95vw;
max-height: 95vh;
object-fit: contain;
display: block;
user-select: none;
}
.photo-lightbox-close {
position: absolute;
top: 16px; right: 16px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #333;
}
.photo-lightbox-close:hover { background: #fff; }
.photo-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
border: none;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #333;
}
.photo-lightbox-nav:hover { background: #fff; }
.photo-lightbox-prev { left: 16px; }
.photo-lightbox-next { right: 16px; }
.photo-lightbox-counter {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 4px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
}
@media (max-width: 600px) {
.photo-lightbox-nav { width: 40px; height: 40px; }
.photo-lightbox-prev { left: 8px; }
.photo-lightbox-next { right: 8px; }
.photo-lightbox-close { top: 10px; right: 10px; }
}
/* ── Мониторинг микроклимата ──────────────────────────────────────────────── */
.mon-refresh { margin-left: auto; }
.mon-cards {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.mon-empty { width: 100%; }
.mon-card {
flex: 1 1 200px;
max-width: 280px;
background: #fff;
border: 1px solid #e3e7ea;
border-radius: 10px;
padding: 14px 16px;
cursor: pointer;
transition: border-color .15s, box-shadow .15s, transform .05s;
}
.mon-card:hover { border-color: #b9c2c9; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mon-card:active { transform: translateY(1px); }
.mon-card-active {
border-color: #66BB6A;
box-shadow: 0 0 0 2px rgba(102,187,106,.25);
}
.mon-card-hd {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.mon-card-name { font-weight: 600; font-size: 14px; flex: 1 1 auto; }
.mon-edit-btn {
flex: 0 0 auto;
background: none;
border: none;
color: #8a949b;
font-size: 14px;
cursor: pointer;
padding: 2px 4px;
border-radius: 5px;
line-height: 1;
}
.mon-edit-btn:hover { color: #2c3338; background: #eef1f3; }
.mon-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex: 0 0 auto;
}
.mon-dot.online { background: #66BB6A; box-shadow: 0 0 0 3px rgba(102,187,106,.18); }
.mon-dot.offline { background: #c2c9ce; }
.mon-metrics {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.mon-metric { display: flex; align-items: baseline; gap: 5px; }
.mon-metric-icon { font-size: 13px; }
.mon-metric-val { font-size: 17px; font-weight: 600; color: #2c3338; }
.mon-card-seen {
margin-top: 10px;
font-size: 11px;
color: #8a949b;
}
.mon-chart-card { margin-top: 4px; }
@media (max-width: 600px) {
.mon-card { max-width: none; flex-basis: 100%; }
}
|