/* Раздел сотрудников IT MEGION */
body { background: #f3f6fb; }
.staff-wrap { max-width: 960px; }
.navbar .nav-link.active { color: #0d6efd; }

.act-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.act-tile { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid #e3e8ef;
  border-radius: 12px; color: #1f2937; text-decoration: none; font-weight: 500; line-height: 1.25;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.act-tile i { font-size: 1.6rem; color: #0d6efd; flex-shrink: 0; }
.act-tile:hover { border-color: #0d6efd; box-shadow: 0 6px 18px rgba(13,110,253,.12); transform: translateY(-1px); }
.act-tile-danger i { color: #dc3545; }
.act-tile-danger:hover { border-color: #dc3545; box-shadow: 0 6px 18px rgba(220,53,69,.12); }

.card { border-radius: 12px; }
.stepper .form-control { max-width: none; font-weight: 600; }
.stepper .btn { width: 44px; }
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input { -moz-appearance: textfield; }

.save-bar { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; align-items: center;
  padding: 12px 0; margin-top: 8px; background: linear-gradient(to top, #f3f6fb 70%, rgba(243,246,251,0)); }
.photo-preview { max-width: 100%; max-height: 260px; }
.min-w-0 { min-width: 0; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

@media (max-width: 575px) {
  .save-bar .btn { width: 100%; }
  .act-grid { grid-template-columns: 1fr 1fr; }
  .act-tile { flex-direction: column; text-align: center; font-size: .9rem; }
}
.qr-box svg { width: 200px; height: 200px; display: block; }
/* Поиск заказчика: длинные названия переносятся, а не обрезаются */
.ts-dropdown .option, .ts-control .item { white-space: normal; line-height: 1.3; }
.ts-dropdown .option { padding: 8px 12px; }
.ts-dropdown-content { max-height: 320px; }
.ts-wrapper.form-select { padding: 0; }
.equip-fields.locked .stepper-input { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.signature-pad { position: relative; border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: #fff; touch-action: none; }
.signature-pad canvas { display: block; width: 100%; height: 180px; cursor: crosshair; }
.signature-pad .signature-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); pointer-events: none; }
.signature-pad.signed .signature-hint { display: none; }
.checklist-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .25rem; border-bottom: 1px solid var(--bs-border-color-translucent); cursor: pointer; }
.checklist-item .form-check-input { flex: 0 0 auto; width: 1.3em; height: 1.3em; margin-top: .1em; }
.checklist-item:has(input:checked) span { color: var(--bs-emphasis-color); }
.checklist-item:not(:has(input:checked)) span { color: var(--bs-secondary-color); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.photo-grid figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: .5rem; overflow: hidden; background: var(--bs-secondary-bg); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; padding: 0; border-radius: 50%; line-height: 1; }
.js-photos .photos-fallback { display: none; }