// ─── Variables ────────────────────────────────────────────────────────────────

$color-blocking:        #e24b4a;
$color-blocking-bg:     #fcebeb;
$color-blocking-text:   #a32d2d;
$color-blocking-border: #f09595;

$color-advisory:        #ef9f27;
$color-advisory-bg:     #faeeda;
$color-advisory-text:   #854f0b;
$color-advisory-border: #fac775;

$color-stage-bg:        #e6f1fb;
$color-stage-text:      #185fa5;
$color-stage-border:    #85b7eb;

$color-execute-bg:      #b85c00;
$color-execute-hover:   #934900;

$color-progress-red:    #e24b4a;
$color-progress-amber:  #ef9f27;
$color-progress-green:  #639922;
$color-progress-track:  #e8e8e8;

$color-section-chip-bg: #1a1a2e;
$color-section-chip-fg: #ffffff;

$color-border:          #e0e0e6;
$color-border-light:    #f0f0f4;
$color-text-primary:    #1a1a2e;
$color-text-secondary:  #6b6b80;
$color-text-hint:       #185fa5;
$color-bg-card:         #ffffff;
$color-bg-page:         #f5f5f8;

$radius-sm:  6px;
$radius-md:  10px;
$radius-lg:  14px;

$font-sans: 'Inter', 'Segoe UI', sans-serif;

// ─── Host ─────────────────────────────────────────────────────────────────────

:host {
  display: block;
  font-family: $font-sans;
  background: $color-bg-page;
  height: 100%;
}

// ─── Wrapper ──────────────────────────────────────────────────────────────────

.checklist-wrapper {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  // Scrollable content area — the wrapper scrolls internally once its
  // content (e.g. a long 89-item checklist) exceeds the viewport height,
  // instead of pushing the whole page down.
  height: calc(100vh - 140px); // adjust 140px to match your app's header/toolbar height
  overflow-y: auto;
  overflow-x: hidden;
}

// ─── Custom scrollbar (applied via the "scrollbar" class already on the wrapper in the template) ───

.scrollbar {
  scrollbar-width: thin; // Firefox
  scrollbar-color: #c7c7d1 transparent;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #c7c7d1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;

    &:hover {
      background-color: #a3a3b0;
    }
  }
}

// ─── Card ─────────────────────────────────────────────────────────────────────

.card {
  background: $color-bg-card;
  border: 1px solid $color-border;
  border-radius: $radius-lg;
  padding: 24px 28px;
}

// ─── Step header ──────────────────────────────────────────────────────────────

.step-title {
  font-size: 15px;
  font-weight: 600;
  color: $color-text-primary;
  margin: 0 0 4px;
}

.step-sub {
  font-size: 12.5px;
  color: $color-text-secondary;
  margin: 0 0 20px;
}

// ─── Step 1 fields ────────────────────────────────────────────────────────────

.fields-row {
  display: flex;
  gap: 20px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.field-label {
  font-size: 12px;
  font-weight: 500;
  color: $color-text-secondary;
  letter-spacing: 0.01em;
}

.gb-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 38px;
  padding: 0 32px 0 10px;
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  font-size: 13.5px;
  color: $color-text-primary;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color 0.15s;

  &:focus {
    outline: none;
    border-color: #378add;
    box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.12);
  }

  &:hover {
    border-color: #aaa;
  }
}

.btn-load {
  height: 38px;
  padding: 0 22px;
  background: var(--button-primary-bg-default);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: $radius-sm;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;

  &:active {
    transform: scale(0.98);
  }
}

// ─── Step 2 header ────────────────────────────────────────────────────────────

.step2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;

  .step-sub {
    margin-bottom: 0;
  }
}

.summary-badges {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

// ─── Badges ───────────────────────────────────────────────────────────────────

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;

  &--blocking {
    background: $color-blocking-bg;
    color: $color-blocking-text;
  }

  &--advisory {
    background: $color-advisory-bg;
    color: $color-advisory-text;
  }

  &--blocking-count {
    background: $color-blocking-bg;
    color: $color-blocking-text;
  }

  &--advisory-count {
    background: $color-advisory-bg;
    color: $color-advisory-text;
  }

  &--stage {
    background: $color-stage-bg;
    color: $color-stage-text;
  }
}

// ─── Checklist list rows ──────────────────────────────────────────────────────

.checklist-list {
  border: 1px solid $color-border-light;
  border-radius: $radius-md;
  overflow: hidden;
}

.checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-left: 4px solid transparent;
  background: #fff;
  transition: background 0.12s;

  & + & {
    border-top: 1px solid $color-border-light;
  }

  &:hover {
    background: #fafafa;
  }

  &--blocking {
    border-left-color: $color-blocking;
  }

  &--advisory {
    border-left-color: $color-advisory;
  }
}

.row-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.row-icon {
  width: 40px;
  height: 40px;
  border-radius: $radius-sm;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &--blocking {
    background: $color-blocking-bg;

    svg, .icon-svg {
      color: $color-blocking-text;
    }
  }

  &--advisory {
    background: $color-advisory-bg;

    svg, .icon-svg {
      color: $color-advisory-text;
    }
  }
}

.icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;

  svg {
    width: 20px;
    height: 20px;
  }
}

.row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.row-title {
  font-size: 14px;
  font-weight: 600;
  color: $color-text-primary;
}

.row-meta {
  font-size: 12px;
  color: $color-text-secondary;
}

.row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-execute {
  padding: 7px 18px;
  background: $color-execute-bg;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: $radius-sm;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;

  &:hover {
    background: $color-execute-hover;
  }

  &:active {
    transform: scale(0.98);
  }
}

// ─── Execute view ─────────────────────────────────────────────────────────────

.exec-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.exec-title {
  font-size: 16px;
  font-weight: 700;
  color: $color-text-primary;
  margin: 0 0 4px;
}

.exec-sub {
  font-size: 12.5px;
  color: $color-text-hint;
  margin: 0;
}

.exec-badges {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

// ─── Progress ─────────────────────────────────────────────────────────────────

.progress-block {
  margin-bottom: 24px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.progress-label {
  font-size: 12.5px;
  color: $color-text-secondary;
}

.progress-pct {
  font-size: 12.5px;
  color: $color-text-secondary;
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: $color-progress-track;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease, background-color 0.35s ease;

  &.fill--red   { background: $color-progress-red; }
  &.fill--amber { background: $color-progress-amber; }
  &.fill--green { background: $color-progress-green; }
}

// ─── Section chip ─────────────────────────────────────────────────────────────

.section-chip {
  display: inline-block;
  padding: 5px 12px;
  background: $color-section-chip-bg;
  color: $color-section-chip-fg;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 5px;
  margin: 20px 0 12px;
}

// ─── Check items ──────────────────────────────────────────────────────────────

.check-item {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid $color-border-light;

  &:last-child {
    border-bottom: none;
  }
}

.item-num {
  width: 22px;
  flex-shrink: 0;
  font-size: 13px;
  color: $color-text-secondary;
  padding-top: 1px;
}

.item-body {
  flex: 1;
  padding: 0 16px;
}

.item-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.item-name {
  font-size: 13.5px;
  color: $color-text-primary;
}

.required-star {
  color: $color-blocking;
  font-size: 13px;
  line-height: 1;
}

.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;

  &--bof {
    background: $color-blocking-bg;
    color: $color-blocking-text;
  }

  &--alert {
    background: $color-advisory-bg;
    color: $color-advisory-text;
  }
}

.item-hint {
  margin-top: 4px;
  font-size: 12px;
  color: $color-text-hint;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hint-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

// ─── Item controls ────────────────────────────────────────────────────────────

.item-ctrl {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  &--num {
    align-items: center;
  }
}

// Checkbox
.gb-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: $color-execute-bg;
  flex-shrink: 0;
}

.check-label {
  font-size: 13px;
  color: $color-text-secondary;
  margin-left: 8px;
  white-space: nowrap;
  cursor: pointer;
}

// Number input
.num-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gb-num-input {
  width: 90px;
  height: 34px;
  padding: 0 8px;
  text-align: right;
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  font-size: 13.5px;
  color: $color-text-primary;
  background: #fff;

  &:focus {
    outline: none;
    border-color: #378add;
    box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.12);
  }
}

.unit-label {
  font-size: 13px;
  color: $color-text-secondary;
  white-space: nowrap;
}

// Dropdown item control
.gb-select--item {
  width: 180px;
  height: 34px;
}

// Text input
.gb-text-input {
  width: 220px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  font-size: 13px;
  color: $color-text-primary;
  background: #fff;

  &::placeholder {
    color: #bbb;
  }

  &:focus {
    outline: none;
    border-color: #378add;
    box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.12);
  }
}

// Photo control
.btn-photo,
.btn-signature {
  padding: 7px 16px;
  background: #fff;
  color: $color-text-primary;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;

  &:hover {
    background: #f5f5f8;
  }
}

.photo-preview,
.signature-preview {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: $radius-sm;
  border: 1px solid $color-border;
  margin-left: 10px;
}

.signature-preview {
  background: #fff;
  object-fit: contain;
}

// Execute button disabled state (used while checklist detail is loading)
.btn-execute:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

// ─── Empty state ──────────────────────────────────────────────────────────────

.empty-state {
  padding: 10px 0 6px;
}

.empty-text {
  font-size: 13px;
  color: $color-text-secondary;
}

// ─── Footer ───────────────────────────────────────────────────────────────────

.exec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid $color-border-light;
}

.btn-skip {
  padding: 8px 18px;
  background: transparent;
  color: $color-text-primary;
  font-size: 13px;
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  cursor: pointer;
  transition: background 0.12s;

  &:hover {
    background: #f5f5f8;
  }
}

.footer-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-back {
  padding: 8px 18px;
  background: transparent;
  color: $color-text-primary;
  font-size: 13px;
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  cursor: pointer;
  transition: background 0.12s;

  &:hover {
    background: #f5f5f8;
  }
}

.btn-submit {
  padding: 8px 22px;
  background: $color-execute-bg;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: $radius-sm;
  cursor: pointer;
  transition: background 0.15s;

  &:hover {
    background: $color-execute-hover;
  }

  &:active {
    transform: scale(0.98);
  }
}