/* ── Sheet overlay (scrim) ── */
.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 36, 22, .4);
  z-index: 50;
  display: none;
  align-items: flex-end;
  pointer-events: none;
}
.sheet-overlay.open { display: flex; pointer-events: all; }

/* ── Sheet panel ── */
.sheet {
  width: 100%;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet::-webkit-scrollbar { display: none; }

.detail-sheet {
  width: 100%;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-sheet::-webkit-scrollbar { display: none; }

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border2);
  margin: 0 auto;
}

.sheet-title {
  font-family: 'Lora', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--t1);
}
.sheet-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--t3);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ── Inputs ── */
.sheet-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: var(--t1);
  outline: none;
}
.sheet-input:focus { border-color: var(--terra); }
.sheet-row { display: flex; gap: 10px; }

/* ── All-day toggle ── */
.allday-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}
.allday-toggle-label { font-size: 14px; color: var(--t2); }

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg3);
  border-radius: 13px;
  transition: background .2s;
  cursor: pointer;
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.toggle-switch input:checked + .toggle-track { background: var(--terra); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }

/* ── Date/time row ── */
.datetime-row { display: flex; gap: 8px; align-items: center; }
.datetime-date { flex: 1.4; min-width: 0; }
.datetime-time { flex: 1; min-width: 0; }

/* ── Category pills ── */
.cat-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-pill {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--t2);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  touch-action: manipulation;
}
.cat-pill.active {
  border-color: var(--terra);
  background: #C14B2A15;
  color: var(--terra);
  font-weight: 500;
}

/* ── Recurrence pills ── */
.recurrence-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rec-pill {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--t2);
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  touch-action: manipulation;
}
.rec-pill.active { background: var(--terra); color: #fff; border-color: var(--terra); }

/* ── Series scope picker (This event / All events) ── */
.scope-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.scope-label {
  font-size: 13px;
  color: var(--t2);
  flex-shrink: 0;
}
.scope-pills { display: flex; gap: 6px; }
.scope-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--t2);
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  touch-action: manipulation;
}
.scope-pill.active {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
  font-weight: 500;
}

/* ── Tags ── */
.tags-section { margin-top: 4px; }
.tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
  transition: opacity .15s;
  touch-action: manipulation;
}
.tag-pill:active  { opacity: .8; }
.tag-pill.selected   { opacity: 1; }
.tag-pill.unselected { opacity: .5; }

.tag-add-btn {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--t3);
  background: var(--bg2);
  border: 1px dashed var(--border2);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  touch-action: manipulation;
}
.tag-input-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.tag-color-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag-color-opt {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s;
  touch-action: manipulation;
}
.tag-color-opt.active { border-color: var(--t1); }

/* ── Series badge ── */
.series-badge {
  font-size: 11px;
  color: var(--amber);
  font-weight: 500;
  background: #FBF0E4;
  padding: 3px 8px;
  border-radius: 12px;
}

/* ── Sheet buttons ── */
.sheet-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  background: var(--terra);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  touch-action: manipulation;
}
.sheet-cancel {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: transparent;
  color: var(--t3);
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  touch-action: manipulation;
}
.btn-delete-ev {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: transparent;
  color: #C14B2A;
  font-size: 14px;
  border: 1px solid #C14B2A30;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  touch-action: manipulation;
}