/*
 * habit-editor.css — Habit template editor overlay: unique styles.
 * Shared overlay styles (container, backdrop, card, header, close button,
 * inputs, save button) live in overlay.css.
 *
 * Load after overlay.css.
 */

/* ---- Card overrides (wider) --------------------------------------------- */
/* max-height / overflow-y / centering come from the shared .overlay__card. */
.habit-editor__card {
  width: min(440px, calc(100vw - 32px));
}

/* ---- Body --------------------------------------------------------------- */
.habit-editor__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.habit-editor__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-editor__section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.habit-editor__date-row {
  display: flex;
  gap: 12px;
}

.habit-editor__date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Fields ------------------------------------------------------------- */
.habit-editor__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Color field -------------------------------------------------------- */
.habit-editor__field--color {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.habit-editor__color-input {
  width: 44px;
  height: 32px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.habit-editor__color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.habit-editor__color-input::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

/* ---- Day toggles -------------------------------------------------------- */
.habit-editor__days {
  display: flex;
  gap: 4px;
}

.habit-editor__day {
  flex: 1;
  height: 30px;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.habit-editor__day--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.habit-editor__day:hover:not(.habit-editor__day--active) {
  background: var(--border);
}

/* ---- Time slots ----------------------------------------------------------- */
.habit-editor__times {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.habit-editor__time-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-editor__time-input {
  flex: 1;
  max-width: 140px;
}

.habit-editor__time-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  padding: 0;
  flex-shrink: 0;
}

.habit-editor__time-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.habit-editor__add-time {
  align-self: flex-start;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.habit-editor__add-time:hover {
  border-color: var(--accent);
  background: var(--bg);
}

/* ---- Modules ------------------------------------------------------------ */
.habit-editor__modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-editor__module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: opacity var(--transition), border-color var(--transition);
}

.habit-editor__module-drag {
  flex: 0 0 auto;
  cursor: grab;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  touch-action: none; /* let pointer events drive touch reorder, not scroll */
  border-radius: 3px;
  user-select: none;
}

.habit-editor__module-drag:hover {
  color: var(--text);
  background: var(--border);
}

.habit-editor__module--dragging {
  opacity: 0.4;
}

.habit-editor__module--drop-before {
  border-top: 2px solid var(--accent);
}

.habit-editor__module--drop-after {
  border-bottom: 2px solid var(--accent);
}

.habit-editor__module-type {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 auto;
}

.habit-editor__module-config {
  display: flex;
  gap: 6px;
}

.habit-editor__module-input {
  width: 60px;
  height: 28px;
  padding: 0 8px;
  font-size: 0.8125rem;
  background: var(--surface);
  border-radius: var(--radius-xs);
}

.habit-editor__module-input--unit {
  width: 48px;
}

.habit-editor__module-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  padding: 0;
}

.habit-editor__module-remove:hover {
  color: var(--danger);
  background: var(--bg);
}

.habit-editor__add-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.habit-editor__add-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition);
}

.habit-editor__add-module-plus {
  font-weight: 700;
}

.habit-editor__add-module-name {
  font-weight: 600;
}

.habit-editor__add-module-desc {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
}

.habit-editor__add-module:hover {
  border-color: var(--accent);
}

/* ---- Header actions (Delete + Save, in the header) ----------------------- */
/* Delete and Save sit in the header between the title and the close button.
   The header is pinned to the top of the card so the actions stay reachable
   while the body scrolls; the opaque background covers the body as it scrolls
   up underneath. */
.habit-editor .overlay__header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Compact, matching sizes for the two header buttons */
.habit-editor .overlay__header .overlay__save,
.habit-editor .overlay__header .habit-editor__delete {
  padding: 6px 14px;
}

.habit-editor__delete {
  padding: 6px 14px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--danger);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--transition);
}

.habit-editor__delete:hover {
  opacity: 0.85;
}

.habit-editor__delete:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---- Active/inactive toggle (header) ------------------------------------ */
.habit-editor__active-toggle {
  min-width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.habit-editor__active-toggle:hover {
  background: var(--accent);
  color: #fff;
}

.habit-editor__active-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.habit-editor__active-toggle--off {
  color: var(--text-muted);
  border-color: var(--border);
}

.habit-editor__active-toggle--off:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .habit-editor__day,
  .habit-editor__delete {
    transition: none;
  }
}