:root {
  --c-arm: #0a84ff; --tc-arm: #ffffff;
  --c-zhest: #ff453a; --tc-zhest: #ffffff;
  --c-mal: #ffd60a; --tc-mal: #000000;
  --c-podg: #32d74b; --tc-podg: #000000;
  --c-anti: #f59e0b; --tc-anti: #000000;
  --c-sdacha: #bf5af2; --tc-sdacha: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, sans-serif; }
body { background-color: #000000; color: #f5f5f7; padding: 12px; user-select: none; -webkit-user-select: none; }

header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: rgba(28, 28, 30, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: 10px; position: relative; z-index: 10 !important; }
.btn { background: #0a84ff; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s ease; }
.btn:hover { background: #0071e3; transform: scale(0.98); }
.btn-secondary { background: rgba(255,255,255,0.1); color: #f5f5f7; }
.btn-secondary:hover { background: rgba(255,255,255,0.15); }

.dropdown { position: relative; display: inline-block; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 8px; background: #2c2c2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 1000 !important; flex-direction: column; overflow: hidden; width: 180px; }
.dropdown-menu.show { display: flex; }
.menu-item { background: none; border: none; color: #fff; padding: 12px 16px; text-align: left; cursor: pointer; font-size: 13px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.05); }
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: rgba(255,255,255,0.1); color: #0a84ff; }

.controls-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
.legend-bar { display: flex; gap: 12px; background: rgba(28, 28, 30, 0.7); padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap; align-items: center; font-size: 12px; font-weight: 500; }
.legend-item { display: flex; align-items: center; gap: 6px; color: #a1a1a6; }
.legend-box { width: 14px; height: 14px; border-radius: 4px; }

.grid-wrapper { border-radius: 12px; background: #1c1c1e; border: 1px solid rgba(255,255,255,0.1); width: 100%; }
.grid-container { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; -webkit-overflow-scrolling: touch; padding-bottom: 8px; width: 100%; }
.grid-container::-webkit-scrollbar { display: none; }

table { border-collapse: separate; border-spacing: 2px; width: max-content; padding: 8px; }
th, td { text-align: center; padding: 0; border-radius: 6px; }

.car-col { min-width: 200px; max-width: 200px; padding: 0; background: #2c2c2e; position: -webkit-sticky; position: sticky; left: 0; z-index: 5; box-shadow: 2px 0 5px rgba(0,0,0,0.3); vertical-align: middle; background-clip: padding-box; }
.car-col-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 34px; padding: 0 8px; font-weight: 600; color: #fff; font-size: 13px; text-align: left; }
.car-name-link { cursor: pointer; border-bottom: 1px dashed rgba(255,255,255,0.3); transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; display: inline-flex; align-items: center; gap: 6px; flex-grow: 1; }
.car-name-link:hover { color: #0a84ff; border-color: #0a84ff; }

/* Компактная строка машины в сетке (иконка + название вплотную) */
.car-col-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; cursor: pointer; transition: 0.2s; }
.car-col-link:hover { color: #0a84ff; }
.car-col-link:hover .car-col-name { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 2px; }
.car-col-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.delete-btn { border: none; background: transparent; cursor: pointer; font-size: 14px; padding: 4px; border-radius: 4px; transition: 0.2s; }
.manage-btn { color: #a1a1a6; font-size: 16px; margin-top: 4px; flex-shrink: 0; }
.manage-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.remove-worker-btn { color: #ff453a; font-size: 14px; }
.remove-worker-btn:hover { background: rgba(255,69,58,0.2); }

.day-header { width: 34px; min-width: 34px; max-width: 34px; font-size: 11px; color: #86868b; background: #2c2c2e; padding: 6px 0; font-weight: 500; line-height: 1.2; }
.day-cell { width: 34px; min-width: 34px; max-width: 34px; height: 34px; cursor: pointer; font-size: 12px; font-weight: 700; color: #fff; position: relative; transition: opacity 0.1s; }
.day-cell:hover { opacity: 0.8; z-index: 2; transform: scale(1.05); }

.day-header.is-weekend { background-color: #3a2224; color: #ff6961; }
.day-cell.st-empty.is-weekend { background-color: #241618; }
.day-header.is-today { background-color: #0a84ff; color: #fff; }

/* Затухание прошедших дней на таймлайне (машины) */
.day-header.is-past-day,
.day-cell.is-past-day { opacity: 0.7; filter: saturate(0.85); transition: opacity 0.2s; }
.day-header.is-past-day:hover,
.day-cell.is-past-day:hover { opacity: 0.95; filter: none; }

/* График смен (строки сотрудников) — без затемнения прошедших дней */
.worker-row .day-cell { opacity: 1; filter: none; }

/* Деликатная неоновая вертикальная черта слева для текущего дня */
.day-cell.is-today { box-shadow: inset 3px 0 0 0 #0a84ff; }
.day-header.is-today { box-shadow: inset 0 -3px 0 0 #0a84ff; }

/* Индикатор «есть запись работ»: цветная чёрточка в цвет дня + свечение,
   на hover — тонкая внутренняя рамка со свечением внутрь. */
.cell-has-task::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  opacity: 0.9;
  box-shadow: 0 0 4px currentColor;
}
.cell-has-task:hover::after { width: 14px; }

.cell-has-task:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), inset 0 0 8px rgba(0,0,0,0.35);
}

.month-separator-header { background-color: #111 !important; border-left: 1px solid rgba(245,158,11,0.3); border-right: 1px solid rgba(245,158,11,0.3); }
.shifts-cell { background-color: #1c1c1e; color: #f59e0b; font-weight: 700; font-size: 12px; border-left: 1px solid rgba(245,158,11,0.3); border-right: 1px solid rgba(245,158,11,0.3); }
.month-separator { background-color: #111; border-left: 1px solid rgba(245,158,11,0.3); border-right: 1px solid rgba(245,158,11,0.3); pointer-events: none; }

/* Динамические цвета */
.st-арматурка { background-color: var(--c-arm) !important; color: var(--tc-arm) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.st-жестянка { background-color: var(--c-zhest) !important; color: var(--tc-zhest) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.st-малярка { background-color: var(--c-mal) !important; color: var(--tc-mal) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.st-подготовка { background-color: var(--c-podg) !important; color: var(--tc-podg) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.st-сдача, .st-приём\/сдача { background-color: var(--c-sdacha) !important; color: var(--tc-sdacha) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.st-антикор { background-color: var(--c-anti) !important; color: var(--tc-anti) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.st-выходной { background-color: #636366; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); color: #fff; }
.st-empty { background-color: #2c2c2e; }

.w-border-арматурка { outline: 2px solid var(--c-arm); outline-offset: -2px; }
.w-border-жестянка { outline: 2px solid var(--c-zhest); outline-offset: -2px; }
.w-border-малярка { outline: 2px solid var(--c-mal); outline-offset: -2px; }
.w-border-подготовка { outline: 2px solid var(--c-podg); outline-offset: -2px; }
.w-border-антикор { outline: 2px solid var(--c-anti); outline-offset: -2px; }
.w-border-сдача { outline: 2px solid var(--c-sdacha); outline-offset: -2px; }

.day-cell.cell-selected { background-color: #0a84ff !important; box-shadow: inset 0 0 0 2px #fff !important; color: #ffffff !important; z-index: 10 !important; transform: scale(1.05); }

/* Мобильный контейнер карточек «Только сегодня» */
.today-focus-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.today-card {
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.today-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.today-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.today-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  width: fit-content;
}
.today-tasks-box {
  background: #242426;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.today-tasks-box:hover {
  border-color: rgba(255,255,255,0.2);
}
.today-tasks-list {
  font-size: 13px;
  color: #f5f5f7;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popover-palette { position: fixed; display: none; background: rgba(40, 40, 42, 0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); padding: 16px; border-radius: 14px; width: 300px; color: #fff; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 20px 40px rgba(0,0,0,0.5); z-index: 3000 !important; max-height: 85vh; overflow-y: auto; }
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.palette-item { padding: 10px; border-radius: 8px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); transition: 0.2s; }
.palette-item:hover { transform: translateY(-2px); filter: brightness(1.2); }

.worker-input { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); color: #fff; text-align: left; font-size: 14px; font-weight: 500; outline: none; transition: border 0.2s; }
.worker-input:disabled { opacity: 0.5; cursor: not-allowed; }

.color-picker-input { width: 100%; height: 34px; padding: 0; border: none; border-radius: 6px; cursor: pointer; background: transparent; }
.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; }

.modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 2000; padding: 16px; }
.modal { background: #1c1c1e; padding: 20px; border-radius: 16px; width: 100%; max-width: 460px; color: #fff; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 48px rgba(0,0,0,0.5); max-height: 90vh; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
.divider { height: 1px; background: rgba(255,255,255,0.1); margin: 12px 0; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; }
.filter-tag { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0.5; transition: 0.2s; white-space: nowrap; border: 1px solid transparent; }
.filter-tag.active { opacity: 1; border-color: rgba(255,255,255,0.3); transform: scale(1.05); }

.tasks-list { flex-grow: 1; overflow-y: auto; margin-bottom: 8px; padding-right: 4px; }
.task-item { display: flex; align-items: flex-start; gap: 10px; background: #2c2c2e; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.05); }
.task-item.done { opacity: 0.5; }
.task-item.done .task-text { text-decoration: line-through; }
.task-checkbox { min-width: 20px; width: 20px; height: 20px; cursor: pointer; accent-color: #0a84ff; margin-top: 2px; }
.task-content { flex-grow: 1; }
.task-text { font-size: 13px; line-height: 1.4; color: #f5f5f7; margin-bottom: 4px; }
.task-cat-select { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); outline: none; cursor: pointer; color: #fff; text-align: center; }
.task-cat-select option { background: #2c2c2e; color: #fff; }
.task-cat-select:disabled { opacity: 0.7; cursor: not-allowed; }

.add-task-form { display: flex; gap: 8px; background: #2c2c2e; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.add-task-form select, .add-task-form input { background: #1c1c1e; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 8px; border-radius: 6px; outline: none; font-size: 13px; }
.add-task-form select { width: 110px; }
.add-task-form input { flex-grow: 1; }

.waiting-list-section { margin-top: 24px; display: none; }
.waiting-list-container { display: flex; gap: 12px; flex-wrap: wrap; }
.waiting-card { background: #1c1c1e; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: 0.2s; }
.waiting-card-title { font-weight: 600; font-size: 15px; color: #fff; word-break: break-word; display: flex; align-items: center; gap: 6px; }
.waiting-detail { font-size: 13px; color: #a1a1a6; display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 4px; }
.waiting-detail span { color: #f5f5f7; font-weight: 500; text-align: right; }
.waiting-comment { font-size: 12px; color: #f59e0b; background: rgba(245,158,11,0.1); padding: 8px; border-radius: 6px; border: 1px solid rgba(245,158,11,0.2); margin-top: 4px; line-height: 1.4; }
.waiting-actions { display: flex; gap: 8px; margin-top: 8px; }

.wait-warn-1 { box-shadow: 0 0 0 2px #ffd60a; }
.wait-warn-2 { box-shadow: 0 0 0 2px #ff453a; }
.wait-error-3 { background: rgba(255,69,58,0.2); box-shadow: 0 0 0 2px #ff453a; }
.wait-error-3 .waiting-card-title, .wait-error-3 .waiting-detail, .wait-error-3 .waiting-detail span { color: #fff; }

.radio-group { display: flex; gap: 12px; margin-bottom: 16px; background: #2c2c2e; padding: 4px; border-radius: 8px; }
.radio-label { flex: 1; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; position: relative; }
.radio-label input { display: none; }
.radio-label span { display: block; padding: 8px 0; border-radius: 6px; transition: 0.2s; color: #a1a1a6; }
.radio-label input:checked + span { background: #0a84ff; color: #fff; }

.worker-row .car-col { background: #161618; border-bottom: 1px solid rgba(255,255,255,0.05); box-shadow: none; }
.worker-row .car-col-inner { height: 26px; }
.worker-row .day-cell { height: 26px !important; border-bottom: 1px solid rgba(255,255,255,0.05); }
.grid-separator { height: 12px; background: #000; }
.grid-separator td { border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }

.dict-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.dict-row label { font-size: 11px; color: #a1a1a6; font-weight: 600; text-transform: uppercase; }

.planner-tabs { display: flex; margin-bottom: 12px; background: #2c2c2e; border-radius: 8px; padding: 4px; gap: 4px; }
.planner-tab { flex: 1; padding: 8px; text-align: center; font-size: 13px; font-weight: 600; color: #a1a1a6; background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.planner-tab.active { background: #0a84ff; color: #fff; }

.doc-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.doc-thumbnail { position: relative; width: 60px; height: 80px; }
.doc-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: 0.2s; }
.doc-thumbnail img:hover { transform: scale(1.05); border-color: #0a84ff; }
.doc-delete-btn { position: absolute; top: -6px; right: -6px; background: #ff453a; color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 2; transition: 0.2s; }
.doc-delete-btn:hover { background: #ff6961; transform: scale(1.1); }

.modal-body-split { display: flex; gap: 16px; margin-bottom: 12px; }
.modal-fields { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.field-label { font-size: 11px; color: #86868b; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; margin-bottom: -8px; }
.modal-map { width: 110px; flex-shrink: 0; text-align: center; }
.map-title { font-size: 11px; color: #a1a1a6; margin-bottom: 8px; font-weight: bold; text-transform: uppercase; }

@media (max-width: 600px) {
  .modal-body-split { flex-direction: column; }
  .modal-map { width: 100%; max-width: 140px; margin: 0 auto; }
}

/* СТИЛИ КАРТЫ */
.car-damage-map { width: 100%; height: auto; max-height: 240px; }
.car-part { fill: #1c1c1e; stroke: #86868b; stroke-width: 1.5; cursor: pointer; transition: fill 0.2s, stroke 0.2s; }
.car-part:hover { fill: #3a3a3c; }

.car-part.part-арматурка { fill: var(--c-arm) !important; stroke: var(--tc-arm) !important; }
.car-part.part-жестянка { fill: var(--c-zhest) !important; stroke: var(--tc-zhest) !important; }
.car-part.part-малярка { fill: var(--c-mal) !important; stroke: var(--tc-mal) !important; }

.car-damage-map.readonly .car-part { cursor: default; }
.car-damage-map.readonly .car-part:hover { fill: #1c1c1e; }

/* Плашка обновления PWA */
.update-toast { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); background: #32d74b; color: #000; padding: 10px 16px; border-radius: 30px; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 5000; }
.update-toast.show { bottom: 24px; }

/* ЗАКАЗ-НАРЯД: плотная таблица работ (Excel-стиль) */
.task-table-wrap { margin-bottom: 8px; }
.task-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.task-table thead th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #86868b; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.12); letter-spacing: 0.4px; background: #1c1c1e; }
.task-table .c-chk { width: 26px; }
.task-table .c-worker { width: 92px; }
.task-table .c-price { width: 64px; text-align: right; }
.task-table .c-del { width: 28px; text-align: center; }
.task-table .c-name { text-align: left; }

.task-row { border-left: 3px solid transparent; border-bottom: 1px solid rgba(255,255,255,0.06); min-height: 38px; height: 38px; }
.task-row:hover { background: rgba(255,255,255,0.03); }
.task-row.done { opacity: 0.45; }
.task-row.done .task-text { text-decoration: line-through; }
.task-row[data-cat="арматурка"] { border-left-color: var(--c-arm); }
.task-row[data-cat="жестянка"] { border-left-color: var(--c-zhest); }
.task-row[data-cat="малярка"] { border-left-color: var(--c-mal); }
.task-row[data-cat="подготовка"] { border-left-color: var(--c-podg); }
.task-row[data-cat="антикор"] { border-left-color: var(--c-anti); }
.task-row[data-cat="сдача"] { border-left-color: var(--c-sdacha); }

/* Сквозная «Радуга» (мультицех): радужная полоска категории слева */
.task-row.is-rainbow { border-left: 3px solid transparent; border-image: linear-gradient(to bottom, var(--c-arm), var(--c-zhest), var(--c-mal), var(--c-podg)) 1; }

.task-row td { padding: 2px 6px; vertical-align: middle; overflow: hidden; white-space: nowrap; }
.task-row .task-checkbox { width: 22px; height: 22px; min-width: 22px; accent-color: #0a84ff; cursor: pointer; vertical-align: middle; margin: 2px 2px; }
.task-row td.c-name { overflow: hidden; white-space: nowrap; }
.task-row .task-text { color: #f5f5f7; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; max-width: calc(100% - 30px); vertical-align: middle; }
.task-row .task-excel-badge { font-size: 9px; color: #a1a1a6; background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }

.cat-chip { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 4px; font-size: 10px; font-weight: 800; padding: 0 3px; margin-right: 5px; vertical-align: middle; cursor: pointer; position: relative; }
.cat-chip:hover { filter: brightness(1.2); }
.arm-chip-r { background: linear-gradient(to right, var(--c-arm) 0 50%, #3a3a3c 50% 100%); color: #fff; }
.arm-chip-s { background: #32d74b; color: #000; }

/* Вся строка задачи — большая тач-зона для открытия шторки */
.task-row { cursor: pointer; }

/* Отступ между чекбоксом и плашкой категории, чтобы не задеть галочку */
.task-row td.c-name .cat-chip { margin-left: 2px; }

.task-worker-select { width: 100%; height: 32px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18); color: #f5f5f7; border-radius: 4px; font-size: 12px; outline: none; }
.task-worker-select option { background: #2c2c2e; color: #fff; }

.task-price-input { width: 100%; height: 32px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18); color: #f5f5f7; border-radius: 4px; font-size: 12px; outline: none; text-align: right; padding: 0 6px; }
.task-price-input:disabled { opacity: 0.6; }

/* Просмотр цены/исполнителя в строке (вместо мелких инпутов/селектов) */
.task-price-view { font-size: 13px; color: #32d74b; font-weight: 600; white-space: nowrap; }
.worker-summary-chip { display: inline-block; font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

.task-del { border: none; background: transparent; color: #636366; cursor: pointer; font-size: 14px; min-width: 32px; min-height: 32px; width: 32px; height: 32px; padding: 0; border-radius: 4px; }
.task-row:hover .task-del { color: #ff453a; }
.task-del:hover { background: rgba(255,69,58,0.2); }

/* Переключатель «Радуга» */
.rainbow-toggle { border: 1px solid rgba(255,255,255,0.12); background: transparent; color: #636366; cursor: pointer; font-size: 13px; width: 26px; height: 22px; padding: 0; border-radius: 5px; vertical-align: middle; margin-left: 6px; line-height: 1; opacity: 0.4; transition: opacity 0.15s; }
.rainbow-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; opacity: 0.8; }
.rainbow-toggle.active { background: linear-gradient(135deg, rgba(10,132,255,0.55), rgba(255,69,58,0.55), rgba(255,214,10,0.55), rgba(50,215,75,0.55)); border-color: rgba(255,255,255,0.6); color: #fff; opacity: 1; }

/* Quick Category Picker / Bottom Sheet (выезжающая шторка редактирования задачи) */
#taskCategoryPicker {
  position: fixed;
  display: none;
  z-index: 4500;
  background: #2c2c2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  padding: 8px;
  min-width: 200px;
  max-width: min(92vw, 280px);
  box-sizing: border-box;
}

/* ===== Bottom Sheet: редактирование задачи (шторка) ===== */
.task-sheet-backdrop {
  position: fixed; inset: 0; z-index: 4600;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.task-sheet {
  background: #1c1c1e;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 16px 16px 24px;
  animation: sheet-up 0.22s ease;
  -webkit-overflow-scrolling: touch;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.task-sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); margin: 0 auto 14px; }
.task-sheet-title { font-size: 15px; font-weight: 700; color: #f5f5f7; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.task-sheet-close { flex-shrink: 0; width: 36px; height: 36px; border: none; background: rgba(255,255,255,0.08); color: #a1a1a6; border-radius: 8px; cursor: pointer; font-size: 16px; }

.task-sheet-label { font-size: 12px; font-weight: 600; color: #a1a1a6; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.task-sheet-label:first-child { margin-top: 0; }

.task-sheet-input {
  width: 100%;
  background: #2c2c2e;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: #f5f5f7;
  font-size: 16px;
  padding: 14px 12px;
  outline: none;
}
.task-sheet-input:focus { border-color: #0a84ff; }

.task-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.task-sheet-cat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  padding: 8px;
  transition: transform 0.1s, border-color 0.15s;
  color: #fff;
  background: #2c2c2e;
}
.task-sheet-cat:active { transform: scale(0.97); }
.task-sheet-cat.active { border-color: #fff; }
.task-sheet-cat .dot { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }

.task-sheet-cat.st-арматурка { background: rgba(10,132,255,0.16); }
.task-sheet-cat.st-арматурка .dot { background: var(--c-arm); }
.task-sheet-cat.st-жестянка { background: rgba(255,69,58,0.16); }
.task-sheet-cat.st-жестянка .dot { background: var(--c-zhest); }
.task-sheet-cat.st-малярка { background: rgba(255,214,10,0.16); color: #fff; }
.task-sheet-cat.st-малярка .dot { background: var(--c-mal); }
.task-sheet-cat.st-подготовка { background: rgba(50,215,75,0.16); }
.task-sheet-cat.st-подготовка .dot { background: var(--c-podg); }
.task-sheet-cat.st-антикор { background: rgba(245,158,11,0.16); }
.task-sheet-cat.st-антикор .dot { background: var(--c-anti); }

.task-sheet-cat.rainbow {
  background: linear-gradient(135deg, rgba(10,132,255,0.35), rgba(255,69,58,0.35), rgba(255,214,10,0.35), rgba(50,215,75,0.35));
  color: #fff;
}
.task-sheet-cat.rainbow .dot { background: linear-gradient(135deg, #0a84ff, #ff453a, #ffd60a, #32d74b); }
.task-sheet-cat.rainbow.active { border-color: #fff; }

/* этапы арматурки */
.task-sheet-arm { display: flex; gap: 8px; flex-wrap: wrap; }
.task-sheet-arm .arm-btn {
  flex: 1; min-height: 46px; border-radius: 10px; border: 2px solid transparent;
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 8px;
}
.arm-btn.arm-r { background: rgba(10,132,255,0.16); color: #fff; }
.arm-btn.arm-r.active { border-color: #0a84ff; }
.arm-btn.arm-s { background: rgba(50,215,75,0.16); color: #fff; }
.arm-btn.arm-s.active { border-color: #32d74b; }
.arm-btn.arm-reset { background: rgba(255,255,255,0.08); color: #a1a1a6; }

/* исполнители */
.task-sheet-workers { display: flex; flex-direction: column; gap: 6px; }
.task-sheet-worker {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: #f5f5f7;
  font-size: 15px; font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}
.task-sheet-worker.active { border-color: #0a84ff; background: rgba(10,132,255,0.12); }
.task-sheet-worker .w-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

/* кнопка Готово */
.task-sheet-done {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  background: #32d74b;
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.task-sheet-done:active { transform: scale(0.98); }

/* Десктоп: шторка по центру как модалка */
@media (min-width: 768px) {
  .task-sheet-backdrop { align-items: center; padding: 20px; }
  .task-sheet { border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); }
  .task-sheet-handle { display: none; }
}

/* Мобильный: поля крупнее */
@media (max-width: 560px) {
  .task-sheet { padding: 14px 12px 20px; }
  .task-sheet-cat { min-height: 52px; font-size: 15px; }
  .task-sheet-worker { min-height: 50px; }
  .task-sheet-done { min-height: 54px; }
}

/* цветная точка по цеху (для старого попапа) */
.cat-picker-option.st-арматурка .cat-picker-dot { background: var(--c-arm); color: var(--tc-arm); }
.cat-picker-option.st-жестянка .cat-picker-dot { background: var(--c-zhest); color: var(--tc-zhest); }
.cat-picker-option.st-малярка .cat-picker-dot { background: var(--c-mal); color: var(--tc-mal); }
.cat-picker-option.st-подготовка .cat-picker-dot { background: var(--c-podg); color: var(--tc-podg); }
.cat-picker-option.st-антикор .cat-picker-dot { background: var(--c-anti); color: var(--tc-anti); }

.inline-edit-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px; margin-bottom: 10px; }

.add-task-form input[type="number"] { width: 90px; flex-grow: 0; }

/* Просмотр фото: pinch-zoom только картинки */
.image-viewer { touch-action: none; -webkit-user-select: none; user-select: none; overflow: hidden; }
.image-viewer img { touch-action: none; cursor: grab; }

/* Финансы */
.expense-cat-btn { padding: 18px 8px; font-size: 15px; }
.finance-account-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; }
.finance-account-row span:first-child { flex: 1; }
.finance-balance { font-weight: 700; }
.finance-balance.neg { color: #ff453a; }
.expense-row { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 6px 2px; font-size: 13px; }
.expense-amt { color: #ff453a; font-weight: 700; white-space: nowrap; }
.payment-amt { color: #32d74b; font-weight: 700; white-space: nowrap; }
.expense-comment { font-size: 11px; color: #86868b; }
.tag-chip { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); padding: 3px 8px; border-radius: 12px; font-size: 11px; cursor: pointer; color: #f5f5f7; }
.tag-chip:hover { background: rgba(255,255,255,0.15); }
.tag-chip-del { margin-left: 4px; color: #ff453a; font-weight: 800; }
.tag-chip-del:hover { color: #fff; }
.tag-chip-add { background: rgba(50,215,75,0.15); border-color: rgba(50,215,75,0.4); color: #32d74b; }

/* Клиенты */
.client-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; cursor: pointer; flex-wrap: wrap; }
.client-row:hover { background: rgba(255,255,255,0.1); }
.client-name { font-weight: 600; flex: 1; }
.client-phone { color: #0a84ff; font-size: 13px; text-decoration: none; }
.client-phone:hover { text-decoration: underline; }
.client-total { color: #a1a1a6; font-size: 12px; }

/* Паспорт заказ-наряда */
.passport-item { display: flex; flex-direction: column; gap: 2px; }
.passport-label { font-size: 10px; color: #86868b; text-transform: uppercase; letter-spacing: 0.3px; }
.passport-value { font-size: 13px; color: #f5f5f7; }

/* Связка задач: в процессе */
.task-row.in-progress { background: rgba(245,158,11,0.07); }
.task-progress-badge { color: #f59e0b; font-size: 10px; margin-right: 4px; vertical-align: middle; }
.shift-task { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 6px; }
.shift-task.in-progress { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.4); }
.shift-task-text { flex: 1; font-size: 12px; }

/* Мультизадачная смена */
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.worker-car-block { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
#workerDayoffBtn.active { background: #ff453a; color: #fff; }

/* Ручной выбор цвета смены (разнорабочие) */
.worker-color-chip {
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  color: #fff;
  transition: transform 0.1s, border-color 0.15s;
  opacity: 0.55;
}
.worker-color-chip:active { transform: scale(0.95); }
.worker-color-chip.active { border-color: #fff; opacity: 1; }
.worker-color-chip .wchip-dot { width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; flex-shrink: 0; }

/* Двухтактная арматурка: плашки «Занимался» / «Разобрал» / «Собрал» */
.arm-btn { border: none; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 600; padding: 4px 8px; white-space: nowrap; }
.arm-btn-work { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
.arm-btn-work.active { background: #f59e0b; color: #000; }
.arm-btn-r { background: rgba(10,132,255,0.15); color: #0a84ff; border: 1px solid rgba(10,132,255,0.4); }
.arm-btn-r.active { background: var(--c-arm); color: #fff; }
.arm-btn-s { background: rgba(50,215,75,0.15); color: #32d74b; border: 1px solid rgba(50,215,75,0.4); }
.arm-btn-s.active { background: #32d74b; color: #000; }

/* Детальный список выполненных работ за смену */
.worker-done-title { font-size: 12px; font-weight: 700; color: #32d74b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.worker-done-car { margin-bottom: 10px; }
.worker-done-car-name { font-size: 14px; font-weight: 600; color: #f5f5f7; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.worker-done-tasks { padding-left: 14px; display: flex; flex-direction: column; }
.worker-done-task { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 26px; color: #f5f5f7; }
.done-check { color: #32d74b; font-weight: 700; flex-shrink: 0; }
.done-check.in-progress { color: #f59e0b; }
.done-task-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-done-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.arm-state-tag { font-size: 11px; color: #a1a1a6; background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.done-price { font-size: 12px; color: #0a84ff; white-space: nowrap; flex-shrink: 0; }
.done-del { flex-shrink: 0; width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0; font-size: 11px; line-height: 1; border: none; background: transparent; color: #636366; cursor: pointer; border-radius: 4px; }
.done-del:hover { color: #ff453a; background: rgba(255,69,58,0.15); }
.rainbow-dot { background: linear-gradient(135deg, var(--c-arm), var(--c-zhest), var(--c-mal), var(--c-podg)); }

/* Запчасти: теги ОЕМ и статус Куплено / НАДО */
.part-oem-tag { font-size: 10px; color: #86868b; background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 4px; margin-right: 2px; vertical-align: middle; }
.part-status-tag { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-right: 6px; white-space: nowrap; }
.part-status-tag.bought { color: #32d74b; background: rgba(50,215,75,0.12); border: 1px solid rgba(50,215,75,0.35); }
.part-status-tag.need { color: #ff9f0a; background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.30); }

/* Ширина колонки «Кол-во» в таблице запчастей */
.task-table .p-qty { width: 48px; text-align: center; }

/* Имя сотрудника в табеле — кликабельная зона (открыть зарплату) */
.worker-name-link { cursor: pointer; border-bottom: 1px dashed rgba(255,255,255,0.3); transition: 0.2s; }
.worker-name-link:hover { color: #0a84ff; border-color: #0a84ff; }

/* Зарплата (v9.7) */
.salary-summary { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.salary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #f5f5f7; padding: 4px 0; }
.salary-row span { color: #a1a1a6; }
.salary-dim { font-size: 11px; color: #86868b; margin-left: 6px; }
.salary-row.balance b { color: #32d74b; font-size: 16px; }
.salary-progress { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.salary-progress-fill { height: 100%; background: linear-gradient(90deg, #32d74b, #0a84ff); border-radius: 4px; transition: width 0.3s; }
.salary-detail { font-size: 13px; color: #f5f5f7; padding: 4px 0; }
.salary-detail b { color: #0a84ff; }
.salary-edit { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.salary-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #f5f5f7; min-height: 38px; cursor: pointer; }
.salary-check input { width: 20px; height: 20px; accent-color: #0a84ff; }
.salary-rate-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #f5f5f7; padding: 2px 0; }
.salary-rate-row > span { flex: 1; }
.rate-input { width: 90px !important; text-align: right; }
.salary-pay { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
.salary-tasks-list { margin: 6px 0 10px; padding-left: 4px; }
.salary-car-header { font-size: 13px; font-weight: 600; color: #f5f5f7; margin: 8px 0 3px; padding-left: 2px; }
.salary-task-row { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 24px; color: #f5f5f7; padding-left: 8px; }
.salary-task-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salary-task-base { white-space: nowrap; color: #a1a1a6; flex-shrink: 0; }
.salary-task-rate { white-space: nowrap; color: #86868b; font-size: 12px; flex-shrink: 0; }
.salary-task-amt { white-space: nowrap; color: #0a84ff; font-weight: 600; flex-shrink: 0; }

/* Подсказки задач в попапе сетки */
.popover-task-item { padding: 5px 8px; font-size: 12px; cursor: pointer; border-left: 3px solid transparent; border-bottom: 1px solid rgba(255,255,255,0.05); color: #f5f5f7; }
.popover-task-item:hover { background: rgba(255,255,255,0.06); }
.popover-task-item[data-cat="арматурка"] { border-left-color: var(--c-arm); }
.popover-task-item[data-cat="жестянка"] { border-left-color: var(--c-zhest); }
.popover-task-item[data-cat="малярка"] { border-left-color: var(--c-mal); }
.popover-task-item[data-cat="подготовка"] { border-left-color: var(--c-podg); }
.popover-task-item[data-cat="антикор"] { border-left-color: var(--c-anti); }

/* Подсветка выбранного статуса в попапе */
.palette-item.selected { outline: 2px solid #fff; outline-offset: 1px; transform: scale(0.96); }

/* Мобильная вёрстка заказ-наряда */
@media (max-width: 560px) {
  .modal { padding: 12px; }
  .modal-backdrop { padding: 8px; }
  .task-table { font-size: 11.5px; }
  .task-table thead th { padding: 3px 4px; font-size: 9px; }
  .task-row td { padding: 1px 4px; }
  .task-table .c-worker { width: 84px; }
  .task-table .c-price { width: 58px; }
  .task-table .c-chk { width: 24px; }
  .task-table .c-del { width: 24px; }
  .add-task-form { flex-wrap: wrap; }
  .add-task-form select { width: 96px; }
  .add-task-form input[type="number"] { width: 74px; }
}

/* Мобильная вёрстка сетки: компактная колонка машин */
@media (max-width: 560px) {
  .car-col { min-width: 150px; max-width: 150px; }
  .car-col-inner { height: 30px; font-size: 12px; padding: 0 6px; }
  .car-col-link { gap: 5px; }
  #headerRow .car-col-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Увеличенные тач-зоны под пальцы на мобильных */
@media (max-width: 768px) {
  .task-row { min-height: 42px; height: 42px; }
}

/* ============ КАРТА ЦЕХА ============ */
.shop-box { margin-bottom: 14px; }
.shop-box-title {
  font-size: 14px; font-weight: 700; color: #f5f5f7;
  padding: 8px 12px; background: rgba(255,255,255,0.06);
  border-radius: 8px; margin-bottom: 8px;
}
.shop-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.shop-slot {
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 10px; padding: 10px; min-height: 90px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.03);
}
.shop-slot.occupied { border-style: solid; border-color: rgba(255,255,255,0.12); }
.shop-slot-name { font-size: 12px; font-weight: 600; color: #a1a1a6; margin-bottom: 8px; }
.shop-slot-add {
  margin-top: auto; background: #0a84ff; color: #fff; border: none;
  border-radius: 8px; padding: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.shop-slot-free { margin-top: auto; color: #86868b; font-size: 12px; text-align: center; padding: 8px; }
.shop-car-card {
  display: flex; align-items: center; gap: 8px;
  background: #2c2c2e; border-left: 4px solid #a1a1a6;
  border-radius: 8px; padding: 8px; margin-top: auto;
}
.shop-car-icon { flex-shrink: 0; }
.shop-car-info { flex: 1; min-width: 0; }
.shop-car-name { font-size: 13px; font-weight: 600; color: #f5f5f7; cursor: pointer; }
.shop-car-name:hover { color: #0a84ff; text-decoration: underline; }
.shop-car-gos { font-size: 11px; color: #86868b; }
.shop-stage-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  color: #000; white-space: nowrap; flex-shrink: 0;
}
.shop-slot-del {
  flex-shrink: 0; width: 28px; height: 28px; border: none; background: transparent;
  color: #ff453a; cursor: pointer; border-radius: 6px; font-size: 15px;
}
.shop-slot-del:hover { background: rgba(255,69,58,0.2); }
.shop-car-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 560px) {
  .shop-slots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .shop-slots { grid-template-columns: 1fr; }
}