/* ===== Navigatie ===== */
.handover-steps {
   display: flex;
   flex-wrap: nowrap;
   gap: 0;
   padding: 0;
   background: transparent;
   margin-bottom: var(--spacing-lg);
   overflow-x: auto;
}

.step-number {
   font-weight: 600;
   flex-shrink: 0;
}

.handover-step-btn {
   flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 9px 22px 9px 30px;
   border: none;
   background: var(--color-lightgrey);
   color: var(--color-black);
   font-size: var(--font-size-base-sm);
   cursor: pointer;
   white-space: nowrap;
   user-select: none;
   position: relative;
   transition: background-color 0.15s, color 0.15s;
   clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
   margin-right: -14px;
}

   .handover-step-btn:first-child {
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
      padding-left: 16px;
   }

   .handover-step-btn:last-child {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
      margin-right: 0;
   }

   .handover-step-btn:nth-child(1) { z-index: 5; }
   .handover-step-btn:nth-child(2) { z-index: 4; }
   .handover-step-btn:nth-child(3) { z-index: 3; }
   .handover-step-btn:nth-child(4) { z-index: 2; }
   .handover-step-btn:nth-child(5) { z-index: 1; }

   .handover-step-btn.step-done {
      background: var(--color-primary);
      color: var(--color-white);
      opacity: 0.5;
   }

   .handover-step-btn.step-locked {
      cursor: not-allowed;
   }

      .handover-step-btn.step-locked:hover {
         background: var(--color-lightgrey);
         color: var(--color-black);
      }

   .handover-step-btn.step-active {
      background: var(--color-primary);
      color: var(--color-white);
   }

   .handover-step-btn:hover:not(.step-active) {
      background: var(--color-grey);
      color: var(--color-black);
   }

/*----------Media queries----------*/

@media (max-width: 1280px) {
   .handover-step-btn {
      padding: 9px 16px 9px 22px;
      font-size: var(--font-size-base-sm);
      gap: 4px;
   }
}

.handover-current-step {
   display: none;
}

@media (max-width: 1024px) {
   .handover-step-btn {
      padding: 8px 10px 8px 16px;
      font-size: 0.75rem;
   }

   .handover-step-btn .step-label {
      display: none;
   }

   .handover-current-step {
      display: flex;
      align-items: center;
      margin: -8px 0 var(--spacing-lg);
      padding-left: 12px;
      border-left: 3px solid var(--color-primary);
      color: var(--color-black);
   }

   .handover-current-step-name {
      font-size: var(--font-size-base-md, 1rem);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
   }
}

.step-content {
   min-height: 120px;
}

   .step-content > * {
      animation: step-fade-in 0.2s ease;
   }

@keyframes step-fade-in {
   from {
      opacity: 0;
      transform: translateY(6px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.step-nav {
   display: flex;
   align-items: center;
   padding: var(--spacing-md) 0 var(--spacing-sm);
   margin-top: var(--spacing-lg);
}

/* ===== Stap 1 — Basisgegevens ===== */

/* ===== Stap 2 — Beoordeling oplevering ===== */
.assessment-btn-all-agree {
   display: inline-flex;
   align-items: center;
   padding: 2px 10px;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background: transparent;
   color: var(--color-white);
   font-size: var(--font-size-base-sm);
   cursor: pointer;
   white-space: nowrap;
   transition: background 0.15s, border-color 0.15s;
}

   @media (hover: hover) {
      .assessment-btn-all-agree:hover {
         background: rgba(255, 255, 255, 0.15);
         border-color: rgba(255, 255, 255, 0.7);
      }
   }

   .assessment-btn-all-agree.active {
      background: transparent;
      border-color: #4caf50;
      color: #4caf50;
   }

.assessment-section-divider {
   padding: 6px var(--spacing-md);
   font-weight: 600;
   font-size: var(--font-size-base-sm);
   border-top: 1px solid var(--color-lightgrey);
   background: var(--color-lightgrey);
   color: var(--color-black);
}

.assessment-row {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-md);
   border-top: 1px solid var(--color-lightgrey);
   flex-wrap: wrap;
}

.assessment-row--child {
   padding-left: calc(var(--spacing-md) + 20px);
   border-left: 3px solid var(--color-primary);
}

.assessment-row--issue {
   background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
}

.assessment-content {
   flex: 1;
   min-width: 0;
}

.assessment-desc {
   font-size: var(--font-size-base-sm);
   line-height: 1.4;
}

.assessment-qty {
   font-size: var(--font-size-base-sm);
   font-weight: 700;
   white-space: nowrap;
   min-width: 90px;
   flex-shrink: 0;
   line-height: 1.4;
}

.assessment-btns {
   display: flex;
   gap: 6px;
   flex-shrink: 0;
   align-items: flex-start;
}

.assessment-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   padding: var(--spacing-xs) 12px;
   border-radius: 0;
   border: 1.5px solid var(--color-lightgrey);
   background: transparent;
   font-size: var(--font-size-base-sm);
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
   white-space: nowrap;
   line-height: 1.4;
}

.assessment-btn-agree.active {
   background: #4caf50;
   border-color: #4caf50;
   color: var(--color-white);
}

.assessment-btn--issue.active {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white);
}

/* :hover apart van .active gehouden en achter (hover: hover) gezet: op
   touchscreens blijft :hover na een tik "hangen" totdat je ergens anders
   tikt, waardoor een knop na het uitzetten van de beoordeling toch rood/
   groen bleef staan. */
@media (hover: hover) {
   .assessment-btn-agree:hover {
      background: #4caf50;
      border-color: #4caf50;
      color: var(--color-white);
   }

   .assessment-btn--issue:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
   }
}

.assessment-remark {
   border-radius: 0;
   font-size: var(--font-size-base-sm);
   resize: none;
   border-color: var(--color-lightgrey);
}

.assessment-summary {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) 0;
   font-size: var(--font-size-base);
}

.assessment-issue-count {
   color: var(--color-primary);
   font-weight: 600;
}

.assessment-photo-section {
   width: 100%;
   margin-top: var(--spacing-xs);
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.room-photo-section {
   padding: var(--spacing-sm) var(--spacing-md);
   border-top: 2px solid var(--color-lightgrey);
   background: var(--color-lightgrey);
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.assessment-photo-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: var(--font-size-base-sm);
   cursor: pointer;
   padding: var(--spacing-xs) 10px;
   border-radius: 0;
   border: 1.5px solid var(--color-primary);
   color: var(--color-primary);
   background: transparent;
   transition: background 0.15s;
}

   .assessment-photo-btn:hover {
      background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white));
   }

.assessment-photo-btn--required {
   border-style: dashed;
}

.assessment-add-photo-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: var(--font-size-base-sm);
   cursor: pointer;
   padding: var(--spacing-xs) 10px;
   border-radius: 0;
   border: 1.5px solid var(--color-lightgrey);
   color: var(--color-grey);
   background: transparent;
   transition: background 0.15s, border-color 0.15s;
}

   .assessment-add-photo-btn:hover {
      border-color: #aaa;
      background: rgba(0, 0, 0, 0.04);
   }

/* ===== Stap 3 — Algemene eindbeoordeling ===== */

/* ===== Stap 4 — Opvolging opleverpunten ===== */
.acknowledge-block {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-md);
   margin-top: var(--spacing-sm);
   border: 1.5px solid var(--color-lightgrey);
   background: var(--color-white);
   cursor: pointer;
   transition: border-color 0.15s, background 0.15s;
}

   .acknowledge-block:hover {
      border-color: var(--color-grey);
   }

   .acknowledge-block.acknowledged {
      border-color: var(--color-primary);
      background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
   }

   .acknowledge-block .acknowledge-label {
      font-size: var(--font-size-base-sm);
      font-weight: 500;
      user-select: none;
   }

/* ===== Stap 5 — Samenvatting ===== */
.summary-location-group {
   border-top: 1px solid var(--color-lightgrey);
}

.summary-location-header {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-md);
   font-weight: 600;
   font-size: var(--font-size-base-sm);
   background: var(--color-lightgrey);
   color: var(--color-black);
}

.summary-location-count {
   font-weight: 400;
   font-size: var(--font-size-base-sm);
   color: var(--color-grey);
}

.summary-line-list {
   margin: 0;
   padding: var(--spacing-xs) var(--spacing-md);
   font-size: var(--font-size-base-sm);
   line-height: 1.6;
}

.summary-line-item {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-sm);
   padding: 2px 0;
}

.summary-issue-item {
   padding: var(--spacing-sm) var(--spacing-md);
   border-top: 1px solid var(--color-lightgrey);
   font-size: var(--font-size-base-sm);
   line-height: 1.4;
}

.signature-placeholder {
   width: 100%;
   height: 120px;
   background: var(--color-white);
   border: 1.5px dashed var(--color-lightgrey);
   margin-bottom: var(--spacing-xs);
}

/* ===== Gedeeld — Foto's & lightbox ===== */
.photo-thumbs {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
}

.photo-thumb {
   position: relative;
   width: 72px;
   height: 72px;
   border-radius: 0;
   overflow: hidden;
   flex-shrink: 0;
}

   .photo-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
   }

   .photo-thumb .photo-remove {
      position: absolute;
      top: var(--spacing-xxs);
      right: var(--spacing-xxs);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      color: var(--color-white);
      border: none;
      font-size: var(--font-size-base-sm);
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
   }

.photo-lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(0, 0, 0, 0.85);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: zoom-out;
}

   .photo-lightbox img {
      max-width: 90vw;
      max-height: 90vh;
      object-fit: contain;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
   }

.photo-lightbox-close {
   position: absolute;
   top: var(--spacing-md);
   right: 20px;
   background: none;
   border: none;
   color: var(--color-white);
   font-size: 32px;
   line-height: 1;
   cursor: pointer;
   opacity: 0.8;
}

   .photo-lightbox-close:hover {
      opacity: 1;
   }