.shift-handover-view {
  display: block;
}

.shift-handover-root {
  display: grid;
  gap: 16px;
}

.shift-handover-head,
.shift-handover-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.shift-handover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.shift-handover-head h2,
.shift-handover-panel h3 {
  margin: 0;
  color: #ffffff;
  letter-spacing: 0;
  text-wrap: balance;
}

.shift-handover-pill,
.shift-handover-lock {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 9px;
  white-space: nowrap;
}

.shift-handover-top-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shift-handover-top-tabs button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
  cursor: pointer;
  transition-property: border-color, background-color, color, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.shift-handover-top-tabs button.active {
  border-color: rgba(56, 132, 255, 0.7);
  background: rgba(56, 132, 255, 0.2);
  color: #ffffff;
}

.shift-handover-top-tabs button:active:not(:disabled),
.shift-handover-actions button:active:not(:disabled),
.shift-qty-stepper button:active:not(:disabled),
.shift-link-button:active:not(:disabled) {
  scale: 0.96;
}

.shift-handover-grid,
.shift-handover-three,
.shift-handover-two {
  display: grid;
  gap: 16px;
  align-items: start;
}

.shift-handover-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.shift-handover-active-grid {
  grid-template-columns: minmax(480px, 1.35fr) minmax(340px, 0.75fr);
}

.shift-handover-three {
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 0.85fr) minmax(260px, 1fr);
}

.shift-handover-two {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
}

.shift-handover-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.shift-handover-main-panel,
.shift-event-create-panel {
  gap: 16px;
}

.shift-panel-title,
.shift-form-title,
.shift-section-title {
  display: grid;
  gap: 4px;
}

.shift-panel-title h3,
.shift-section-title h4 {
  margin: 0;
}

.shift-panel-title span,
.shift-form-title span,
.shift-section-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

.shift-handover-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.shift-event-list {
  display: grid;
  gap: 8px;
}

.shift-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.16);
  padding: 10px;
}

.shift-event-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  justify-content: flex-end;
}

.shift-event-edit {
  min-width: 180px;
}

.shift-event-edit summary {
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
}

.shift-mini-form.compact {
  margin-top: 8px;
  min-width: 0;
}

.shift-event-row span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.shift-event-row .positive {
  color: var(--green);
}

.shift-event-row .negative {
  color: var(--red);
}

.shift-mini-form {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.shift-draft-form {
  gap: 16px;
  padding: 18px;
}

.shift-mini-form strong {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.25;
}

.shift-field-readonly strong,
.shift-field-readonly span,
.shift-event-row strong,
.shift-counter-nominal,
.shift-counter-row input,
.shift-qty-stepper input,
.shift-formula strong,
.handover-kpi strong,
.shift-summary-table td,
.shift-stock-sync-summary span {
  font-variant-numeric: tabular-nums;
}

.shift-form-title strong {
  font-size: 22px;
  letter-spacing: 0;
}

.shift-draft-autosave {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
}

.shift-draft-autosave[data-state="saving"] {
  color: #ffffff;
}

.shift-draft-autosave[data-state="saved"] {
  color: #9fe0b6;
}

.shift-draft-autosave[data-state="error"] {
  color: #ffb2ab;
}

.shift-draft-section {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 12px;
}

.shift-draft-auto-band,
.shift-money-section,
.shift-fact-strip {
  padding: 14px;
}

.shift-draft-section h4 {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
}

.shift-draft-auto {
  background: rgba(56, 132, 255, 0.08);
}

.shift-draft-cash {
  background: rgba(255, 255, 255, 0.04);
}

.shift-draft-fact {
  background: rgba(90, 208, 144, 0.08);
}

.shift-auto-card-grid,
.shift-counter-manual,
.shift-fact-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shift-fact-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shift-field {
  display: grid;
  gap: 7px;
  width: 100%;
}

.shift-field-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.shift-money-field .shift-field-label,
.shift-fact-strip .shift-field-label,
.shift-auto-card-grid .shift-field-label {
  font-size: 14px;
}

.shift-mini-form.accent {
  border-color: rgba(243, 100, 88, 0.48);
  background: rgba(243, 100, 88, 0.08);
}

.shift-product-picker {
  display: grid;
  gap: 10px;
}

.shift-product-selected {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding: 9px 10px;
}

.shift-event-accordion {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.shift-event-accordion[open] {
  border-color: rgba(56, 132, 255, 0.48);
  background: rgba(56, 132, 255, 0.08);
}

.shift-event-accordion summary {
  display: grid;
  gap: 4px;
  min-height: 66px;
  cursor: pointer;
  list-style: none;
  padding: 13px 14px;
}

.shift-event-accordion summary::-webkit-details-marker {
  display: none;
}

.shift-event-accordion summary::after {
  content: "+";
  align-self: center;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.shift-event-accordion[open] summary::after {
  content: "−";
}

.shift-event-accordion summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.shift-event-accordion summary span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.shift-event-accordion summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.shift-event-accordion .shift-mini-form {
  margin: 0 12px 12px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.16);
}

.shift-link-button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #f0d58b;
  font-size: 13px;
  font-weight: 850;
  padding: 0;
  text-align: left;
}

.shift-mini-form input,
.shift-mini-form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: #ffffff;
  font-size: 16px;
  line-height: 1.3;
  padding: 0 14px;
}

.shift-money-field input {
  min-height: 60px;
  font-size: 20px;
  font-weight: 850;
}

.shift-mini-form .shift-product-picker select {
  min-height: 168px;
  padding-block: 8px;
}

.shift-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.shift-check input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
}

.shift-check-verbose {
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}

.shift-check-verbose span {
  display: grid;
  gap: 4px;
}

.shift-check-verbose b {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.shift-check-verbose small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.shift-accept-note {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 13px;
  padding: 10px 12px;
}

.shift-accept-note strong {
  color: #ffffff;
}

.shift-field-readonly {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 60px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  padding: 10px 14px;
  font-size: 15px;
}

.shift-field-readonly strong {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.15;
}

.shift-auto-card-grid .shift-field-readonly {
  min-height: 78px;
  border-color: rgba(56, 132, 255, 0.22);
  background: rgba(56, 132, 255, 0.12);
}

.shift-fact-strip .shift-field-readonly {
  min-height: 60px;
}

.shift-cash-mode {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.shift-mode-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 10px;
  transition-property: border-color, background-color, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.shift-mode-pill:active {
  scale: 0.96;
}

.shift-mode-pill input {
  width: 16px;
  min-height: 16px;
}

.shift-mode-pill input[type="radio"] {
  appearance: auto;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
}

.shift-counter-manual {
  display: grid;
  gap: 8px;
}

.shift-counter-calculator {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.shift-counter-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.shift-counter-column {
  display: grid;
  gap: 6px;
}

.shift-counter-column p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.shift-counter-row {
  display: grid;
  align-items: center;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 84px;
}

.shift-counter-nominal {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.shift-counter-row input {
  min-height: 36px;
  font-size: 13px;
  text-align: center;
  padding: 0 8px;
}

.shift-counter-row input:disabled,
.shift-counter-manual input:disabled {
  opacity: 0.55;
}

.shift-qty-stepper {
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.shift-qty-stepper button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.shift-qty-stepper input {
  text-align: center;
  font-weight: 800;
}

.shift-qty-hint {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 6px;
}

.shift-mini-form button,
.shift-handover-actions button {
  width: 100%;
  min-height: 44px;
  font-size: 14px;
}

.shift-primary-submit {
  min-height: 54px !important;
  font-size: 16px !important;
  font-weight: 900;
}

.shift-formula {
  display: grid;
  gap: 8px;
}

.shift-formula div,
.handover-kpi {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 8px;
}

.shift-formula strong,
.handover-kpi strong {
  color: #ffffff;
}

.shift-formula .total {
  border-bottom: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.shift-handover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shift-summary-grid {
  display: grid;
  gap: 10px;
}

.shift-summary-section h4 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.shift-summary-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.shift-summary-table th,
.shift-summary-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
}

.shift-summary-table th {
  color: var(--muted);
  font-weight: 800;
  background: rgba(255, 255, 255, 0.03);
}

.shift-summary-table td {
  color: #ffffff;
}

.shift-summary-table tbody tr:last-child td {
  border-bottom: 0;
}

.shift-stock-sync {
  display: grid;
  gap: 8px;
}

.shift-stock-sync-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shift-stock-sync-summary span,
.shift-stock-status {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 8px;
}

.shift-stock-status {
  display: inline-flex;
  width: fit-content;
}

.shift-stock-status.synced {
  border-color: rgba(90, 208, 144, 0.35);
  color: #9fe0b6;
}

.shift-stock-status.failed {
  border-color: rgba(243, 100, 88, 0.45);
  color: #ffb2ab;
}

.shift-stock-status.skipped {
  border-color: rgba(240, 213, 139, 0.38);
  color: #f0d58b;
}

.shift-summary-table small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 4px;
}

.shift-journal-list {
  display: grid;
  gap: 8px;
}

.shift-journal-row {
  display: grid;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  font-size: 13px;
  padding: 10px 12px;
  cursor: pointer;
}

.shift-journal-row span {
  color: var(--muted);
  font-size: 12px;
}

.shift-journal-row.active {
  border-color: rgba(56, 132, 255, 0.7);
  background: rgba(56, 132, 255, 0.18);
}

.shift-handover-empty,
.shift-handover-error {
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  padding: 12px;
}

.shift-handover-error {
  border-color: rgba(243, 100, 88, 0.65);
  background: rgba(243, 100, 88, 0.1);
  color: #ffffff;
}

@media (max-width: 1120px) {
  .shift-handover-grid,
  .shift-handover-three,
  .shift-handover-two {
    grid-template-columns: 1fr;
  }

  .shift-handover-active-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .shift-handover-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .shift-event-row {
    grid-template-columns: 1fr;
  }

  .shift-handover-actions {
    grid-template-columns: 1fr;
  }

  .shift-counter-grid {
    grid-template-columns: 1fr;
  }

  .shift-cash-mode {
    grid-template-columns: 1fr;
  }

  .shift-auto-card-grid,
  .shift-counter-manual,
  .shift-fact-strip {
    grid-template-columns: 1fr;
  }

  .shift-form-title strong {
    font-size: 20px;
  }

  .shift-money-field input,
  .shift-field-readonly strong {
    font-size: 18px;
  }
}