:root {
  --re-cl-primary: #467aa7;
  --re-cl-primary-hover: #3a6685;
  --re-cl-danger: #c0392b;
  --re-cl-danger-hover: #a93226;

  --re-cl-border: #e0e0e0;
  --re-cl-progress-bg: #e0e0e0;
  --re-cl-progress-bar: #2fc873;
  --re-cl-grey: #666;
}

/* ── Wrapper ── */
.re-checklists {
  margin: 16px 0;
}
.re-checklists .js-re-cl-new-toggle,
.re-checklists .re-cl-icon-btn--add,
.re-checklists .re-cl-icon-btn--delete,
#issue-form .re-checklists .re-cl-icon-btn--eye,
#issue-form .re-checklists .re-cl-icon-btn--toggle{
  position: absolute;
  top: -99999px;
  left: -99999px;
}
#issue-form .re-checklists .js-re-cl-new-toggle,
#issue-form .re-checklists .re-cl-icon-btn--add,
#issue-form .re-checklists .re-cl-icon-btn--delete {
  position: relative;
  top: auto;
  left: auto;
}
/* ── Top header ── */
.re-checklists__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--re-cl-border);
  margin-bottom: 10px;
}

.re-checklists__title {
  font-size: 14px;
  font-weight: 600;
}

.re-checklists__counter {
  font-weight: normal;
  color: var(--re-cl-grey);
  margin-left: 2px;
}


/* ── Inner item add form — always hidden until toggled by JS ── */
.re-cl-item-form {
  display: none !important;
}
.re-cl-item-form.re-cl-item-form--open {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--re-cl-border);
}

/* ── New checklist form ── */
.re-cl-new-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
}

/* ── Shared link-style button ── */

.re-cl-link-btn:hover { text-decoration: underline; }

/* ── Checklist block card ── */
.re-cl-block {
  border: 1px solid var(--re-cl-border);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

/* Block header row */
.re-cl-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #fff;
}

.re-cl-block__head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.re-cl-block__master-cb {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.re-cl-block__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.re-cl-block__head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Icon buttons (delete, toggle) */
.re-cl-icon-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
  border-radius: 3px;
  line-height: 1;
}
.re-cl-icon-btn:hover { color: #333; background: #f0f0f0; }
.re-cl-icon-btn--delete:hover { color: #c0392b; }
.re-cl-icon-btn--eye.is-hiding { color: #467aa7; }

/* Hide done items when eye is toggled off */
.re-cl-block--hide-done .re-cl-item--done { display: none; }

/* Progress bar */
.re-cl-block__progress {
  height: 4px;
  background: var(--re-cl-progress-bg);
}
.re-cl-block__progress-bar {
  height: 100%;
  background: var(--re-cl-progress-bar);
  transition: width 0.3s ease;
}

/* ── Item list ── */
.re-cl-block__items {
  padding: 4px 0;
}

.re-cl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--re-cl-border);
}
.re-cl-item:first-child { border-top: none; }

/* Item delete button — hidden until row hovered */
.re-cl-item .js-re-cl-item-delete { opacity: 0; transition: opacity 0.15s; }
.re-cl-item:hover .js-re-cl-item-delete { opacity: 1; }


/* Completed item — strikethrough */
.re-cl-item--done .re-cl-item__label {
  text-decoration: line-through;
  color: var(--re-cl-grey);
}

/* ── Header actions (+ Add + template select) ── */
.re-checklists__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.re-cl-tpl-select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #aaa;
  border-radius: 3px;
  color: #555;
  background: #fff;
  cursor: pointer;
}

/* ── Template admin page ── */
.re-cl-tpl-new-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.re-cl-tpl-block {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}

.re-cl-tpl-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.re-cl-tpl-block__name {
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.re-cl-tpl-block__name:hover { text-decoration: underline; }

.re-cl-tpl-block__actions {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.re-cl-tpl-items {
  padding: 4px 0;
}

.re-cl-tpl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}
.re-cl-tpl-item:first-child { border-top: none; }

.re-cl-tpl-item__label { flex: 1; cursor: pointer; }
.re-cl-tpl-item__label:hover { text-decoration: underline; }